Release v2.10.0 (tiled view) by vultuk · Pull Request #30 · vultuk/claude-code-web

vultuk · 2025-09-13T20:56:40Z

Replaces PR #29 due to unresolved conversation rule. Includes tiled view, splitter, per-pane sessions; version bump and changelog.

…ssions\n\nchore(release): v2.10.0

Copilot

Pull Request Overview

This release adds a tiled view feature allowing users to view two Claude sessions side-by-side, bumping the version to 2.10.0.

Implementation of MVP tiled view with two resizable panes
Independent terminal connections for each pane with session selection
Persistent layout state and resizer position in localStorage

Reviewed Changes

Copilot reviewed 7 out of 8 changed files in this pull request and generated 9 comments.

Show a summary per file

File	Description
src/public/style.css	Added CSS styles for tab actions button, tiled pane layout, resizer controls, and tile-specific UI components
src/public/session-manager.js	Added calls to refresh pane session selectors when sessions are loaded or updated
src/public/panes.js	New file implementing ClaudePane and PaneManager classes for tiled view functionality
src/public/index.html	Added tiled view toggle button, new tiled container HTML structure, and panes.js script inclusion
src/public/app.js	Integrated PaneManager initialization, tile toggle event handling, and pane-aware terminal resizing
package.json	Version bump from 2.9.0 to 2.10.0
CHANGELOG.md	Added v2.10.0 changelog entry and reorganized previous v2.9.0 entry

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

Copilot · 2025-09-13T20:58:20Z

src/public/style.css


+.tab-actions { display: flex; gap: 6px; align-items: center; }
+.tab-tile {
+  width: 28px; height: 28px; display:flex; align-items:center; justify-content:center;


Missing spaces around CSS property values. Should be 'display: flex; align-items: center; justify-content: center;' for consistency with the rest of the codebase.

Suggested change

width: 28px; height: 28px; display:flex; align-items:center; justify-content:center;

width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;

Copilot · 2025-09-13T20:58:20Z

src/public/style.css

+.tile-grid {
+  display: grid; grid-template-columns: 1fr 6px 1fr; grid-template-rows: 100%; width: 100%;
+}
+.tile-pane { display:flex; flex-direction: column; min-width: 0; border-left: 1px solid var(--border); }


Missing space after colon in 'display:flex'. Should be 'display: flex' for consistency.

Suggested change

.tile-pane { display:flex; flex-direction: column; min-width: 0; border-left: 1px solid var(--border); }

.tile-pane { display: flex; flex-direction: column; min-width: 0; border-left: 1px solid var(--border); }

Copilot · 2025-09-13T20:58:20Z

src/public/style.css

+}
+.tile-pane { display:flex; flex-direction: column; min-width: 0; border-left: 1px solid var(--border); }
+.tile-pane:first-child { border-left: none; }
+.tile-toolbar { display:flex; align-items:center; gap: 8px; padding: 6px 8px; background: var(--bg-secondary); border-bottom:1px solid var(--border); }


Multiple missing spaces after colons in CSS properties. Should be 'display: flex; align-items: center; border-bottom: 1px solid var(--border);'.

Suggested change

.tile-toolbar { display:flex; align-items:center; gap: 8px; padding: 6px 8px; background: var(--bg-secondary); border-bottom:1px solid var(--border); }

.tile-toolbar { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: var(--bg-secondary); border-bottom: 1px solid var(--border); }

Copilot · 2025-09-13T20:58:20Z

src/public/style.css

+.tile-pane { display:flex; flex-direction: column; min-width: 0; border-left: 1px solid var(--border); }
+.tile-pane:first-child { border-left: none; }
+.tile-toolbar { display:flex; align-items:center; gap: 8px; padding: 6px 8px; background: var(--bg-secondary); border-bottom:1px solid var(--border); }
+.tile-toolbar .spacer { flex:1; }


Missing space after colon. Should be 'flex: 1;'.

Suggested change

.tile-toolbar .spacer { flex:1; }

.tile-toolbar .spacer { flex: 1; }

Copilot · 2025-09-13T20:58:21Z

src/public/style.css

+.tile-pane:first-child { border-left: none; }
+.tile-toolbar { display:flex; align-items:center; gap: 8px; padding: 6px 8px; background: var(--bg-secondary); border-bottom:1px solid var(--border); }
+.tile-toolbar .spacer { flex:1; }
+.tile-session-select { background: var(--bg-tertiary); color: var(--text-primary); border:1px solid var(--border); border-radius:6px; padding:6px 8px; font-family: var(--font-mono); font-size:12px; }


Multiple missing spaces after colons. Should be 'border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; font-size: 12px;'.

Suggested change

.tile-session-select { background: var(--bg-tertiary); color: var(--text-primary); border:1px solid var(--border); border-radius:6px; padding:6px 8px; font-family: var(--font-mono); font-size:12px; }

.tile-session-select { background: var(--bg-tertiary); color: var(--text-primary); border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; font-family: var(--font-mono); font-size: 12px; }

Copilot · 2025-09-13T20:58:21Z

src/public/style.css

+.tile-toolbar { display:flex; align-items:center; gap: 8px; padding: 6px 8px; background: var(--bg-secondary); border-bottom:1px solid var(--border); }
+.tile-toolbar .spacer { flex:1; }
+.tile-session-select { background: var(--bg-tertiary); color: var(--text-primary); border:1px solid var(--border); border-radius:6px; padding:6px 8px; font-family: var(--font-mono); font-size:12px; }
+.tile-close { background: transparent; border:1px solid var(--border); border-radius:4px; color: var(--text-secondary); width:26px; height:26px; display:flex; align-items:center; justify-content:center; cursor:pointer; }


Multiple missing spaces after colons. Should be 'border: 1px solid var(--border); border-radius: 4px; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; cursor: pointer;'.

Suggested change

.tile-close { background: transparent; border:1px solid var(--border); border-radius:4px; color: var(--text-secondary); width:26px; height:26px; display:flex; align-items:center; justify-content:center; cursor:pointer; }

.tile-close { background: transparent; border: 1px solid var(--border); border-radius: 4px; color: var(--text-secondary); width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; cursor: pointer; }

Copilot · 2025-09-13T20:58:21Z

src/public/app.js

        // Plan modal title
        const planTitle = document.querySelector('#planModal .modal-header h2');
-        if (planTitle) planTitle.innerHTML = `<span class="icon" aria-hidden="true">${window.icons?.clipboard?.(18) || ''}</span> ${this.getAlias('claude')}'s Plan`;
+        if (planTitle) planTitle.innerHTML = `<span class=\"icon\" aria-hidden=\"true\">${window.icons?.clipboard?.(18) || ''}</span> ${this.getAlias('claude')}'s Plan`;


Escaped quotes in template literal are incorrect. Should use single quotes around class names: .

Suggested change

if (planTitle) planTitle.innerHTML = `${window.icons?.clipboard?.(18) || ''} ${this.getAlias('claude')}'s Plan`;

if (planTitle) planTitle.innerHTML = `${window.icons?.clipboard?.(18) || ''} ${this.getAlias('claude')}'s Plan`;

Copilot · 2025-09-13T20:58:21Z

src/public/app.js

        }

        this.terminal.options.fontSize = settings.fontSize;
+        if (this.paneManager?.panes) this.paneManager.panes.forEach(p => { if (p.terminal) p.terminal.options.fontSize = settings.fontSize; p.fit();});


Missing space before closing brace. Should be 'p.fit(); });' for better readability.

Suggested change

if (this.paneManager?.panes) this.paneManager.panes.forEach(p => { if (p.terminal) p.terminal.options.fontSize = settings.fontSize; p.fit();});

if (this.paneManager?.panes) this.paneManager.panes.forEach(p => { if (p.terminal) p.terminal.options.fontSize = settings.fontSize; p.fit(); });

Copilot · 2025-09-13T20:58:22Z

CHANGELOG.md

+- Tiled View (MVP): view two sessions side‑by‑side with independent terminals and sockets.
+- Resizable splitter between panes with persistent split position.
+- Per‑pane session picker and close controls; layout and assignments persist in localStorage.


Using en-dash (‑) instead of hyphen (-) in 'side‑by‑side' and 'Per‑pane'. Should use regular hyphens: 'side-by-side' and 'Per-pane'.

vultuk added 7 commits August 29, 2025 14:06

chore(release): v2.6.0

87e4894

chore(release): v2.6.1

cdc08d5

chore(release): v2.9.0

fe4e2a1

feat(ui): tiled view (2-pane) with resizable splitter and per-pane se…

90a085f

…ssions\n\nchore(release): v2.10.0

fix: resolve merge conflicts for v2.10.0 rebase

71883a5

chore: resolve changelog and lockfile conflicts for v2.10.0

01f311a

merge: release v2.10.0 into main

6e8e8b9

Copilot AI review requested due to automatic review settings September 13, 2025 20:56

vultuk merged commit d2b6778 into main Sep 13, 2025

vultuk deleted the release/v2.10.0-fix branch September 13, 2025 20:56

Copilot AI reviewed Sep 13, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Release v2.10.0 (tiled view)#30

Release v2.10.0 (tiled view)#30
vultuk merged 7 commits intomainfrom
release/v2.10.0-fix

vultuk commented Sep 13, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Sep 13, 2025

Uh oh!

Copilot AI Sep 13, 2025

Uh oh!

Copilot AI Sep 13, 2025

Uh oh!

Copilot AI Sep 13, 2025

Uh oh!

Copilot AI Sep 13, 2025

Uh oh!

Copilot AI Sep 13, 2025

Uh oh!

Copilot AI Sep 13, 2025

Uh oh!

Copilot AI Sep 13, 2025

Uh oh!

Copilot AI Sep 13, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

	width: 28px; height: 28px; display:flex; align-items:center; justify-content:center;
	width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;

	.tile-pane { display:flex; flex-direction: column; min-width: 0; border-left: 1px solid var(--border); }
	.tile-pane { display: flex; flex-direction: column; min-width: 0; border-left: 1px solid var(--border); }

	.tile-toolbar { display:flex; align-items:center; gap: 8px; padding: 6px 8px; background: var(--bg-secondary); border-bottom:1px solid var(--border); }
	.tile-toolbar { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: var(--bg-secondary); border-bottom: 1px solid var(--border); }

	.tile-toolbar .spacer { flex:1; }
	.tile-toolbar .spacer { flex: 1; }

	.tile-session-select { background: var(--bg-tertiary); color: var(--text-primary); border:1px solid var(--border); border-radius:6px; padding:6px 8px; font-family: var(--font-mono); font-size:12px; }
	.tile-session-select { background: var(--bg-tertiary); color: var(--text-primary); border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; font-family: var(--font-mono); font-size: 12px; }

	.tile-close { background: transparent; border:1px solid var(--border); border-radius:4px; color: var(--text-secondary); width:26px; height:26px; display:flex; align-items:center; justify-content:center; cursor:pointer; }
	.tile-close { background: transparent; border: 1px solid var(--border); border-radius: 4px; color: var(--text-secondary); width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; cursor: pointer; }

	if (planTitle) planTitle.innerHTML = `<span class=\"icon\" aria-hidden=\"true\">${window.icons?.clipboard?.(18) \|\| ''}</span> ${this.getAlias('claude')}'s Plan`;
	if (planTitle) planTitle.innerHTML = `<span class='icon' aria-hidden="true">${window.icons?.clipboard?.(18) \|\| ''}</span> ${this.getAlias('claude')}'s Plan`;

	if (this.paneManager?.panes) this.paneManager.panes.forEach(p => { if (p.terminal) p.terminal.options.fontSize = settings.fontSize; p.fit();});
	if (this.paneManager?.panes) this.paneManager.panes.forEach(p => { if (p.terminal) p.terminal.options.fontSize = settings.fontSize; p.fit(); });

Conversation

vultuk commented Sep 13, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Sep 13, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 13, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 13, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 13, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 13, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 13, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 13, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 13, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 13, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant