Skip to content

Per-row Select button + preview horizontal-overflow fix #51

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
eliothedeman merged 2 commits into from
Apr 23, 2026
Merged

Per-row Select button + preview horizontal-overflow fix #51

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
32db9b7
feat(toolpath-desktop): replace session checkboxes with Select button
eliothedeman Apr 23, 2026
d646100
fix(toolpath-desktop): stop preview transcript from forcing horizonta…
eliothedeman Apr 23, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 2 additions & 6 deletions crates/toolpath-desktop/frontend/src/lib/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,6 @@ export interface ClaudeSlice {
sessionsByPath: Record<string, ClaudeSession[]>;
sessionsLoading: Record<string, boolean>;
titles: Record<string, string>; // `${path}|${sid}` → title
selected: Record<string, Record<string, true>>; // path → sid set
deriving: boolean;
}

Expand All @@ -132,7 +131,6 @@ export interface PiSlice {
expanded: string | null;
sessionsByPath: Record<string, PiSession[]>;
sessionsLoading: Record<string, boolean>;
selected: Record<string, Record<string, true>>;
deriving: boolean;
}

Expand Down Expand Up @@ -202,9 +200,8 @@ export type Msg =
| { t: "ClaudeExpandProject"; path: string }
| { t: "ClaudeSessionReceived"; session: ClaudeSession }
| { t: "ClaudeSessionsDone"; path: string }
| { t: "ClaudeToggleSession"; path: string; sid: string }
| { t: "ClaudeTitleLoaded"; path: string; sid: string; title: string | null }
| { t: "ClaudeDerive" }
| { t: "ClaudeDerive"; path: string; sid: string }

// Pi
| { t: "PiEnsureProjects" }
Expand All @@ -214,8 +211,7 @@ export type Msg =
| { t: "PiExpandProject"; path: string }
| { t: "PiSessionReceived"; session: PiSession }
| { t: "PiSessionsDone"; path: string }
| { t: "PiToggleSession"; path: string; sid: string }
| { t: "PiDerive" }
| { t: "PiDerive"; path: string; sid: string }

// Git
| { t: "GitSetRepoPath"; value: string }
Expand Down
44 changes: 8 additions & 36 deletions crates/toolpath-desktop/frontend/src/lib/update.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@ export function initialModel(): Model {
sessionsByPath: {},
sessionsLoading: {},
titles: {},
selected: {},
deriving: false,
},
pi: {
Expand All @@ -28,7 +27,6 @@ export function initialModel(): Model {
expanded: null,
sessionsByPath: {},
sessionsLoading: {},
selected: {},
deriving: false,
},
git: {
Expand Down Expand Up @@ -190,34 +188,21 @@ export function update(msg: Msg, m: Model): [Model, Cmd | null] {
{ ...m, claude: { ...m.claude, sessionsLoading: { ...m.claude.sessionsLoading, [msg.path]: false } } },
null,
];
case "ClaudeToggleSession": {
const sel = { ...(m.claude.selected[msg.path] ?? {}) };
if (sel[msg.sid]) delete sel[msg.sid];
else sel[msg.sid] = true;
return [
{ ...m, claude: { ...m.claude, selected: { ...m.claude.selected, [msg.path]: sel } } },
null,
];
}
case "ClaudeTitleLoaded": {
const titles = { ...m.claude.titles, [`${msg.path}|${msg.sid}`]: msg.title ?? "" };
return [{ ...m, claude: { ...m.claude, titles } }, null];
}
case "ClaudeDerive": {
const path = Object.keys(m.claude.selected).find(
(p) => Object.keys(m.claude.selected[p] ?? {}).length > 0,
);
if (!path) return [m, null];
const sessionIds = Object.keys(m.claude.selected[path] ?? {});
const { path, sid } = msg;
const displayName = path.split("/").filter(Boolean).pop() ?? "claude";
const shortId = sessionIds[0]?.slice(0, 8) ?? "";
const filename = `${displayName}${shortId ? `-${shortId}` : ""}.path.json`;
const shortId = sid.slice(0, 8);
const filename = `${displayName}-${shortId}.path.json`;
return [
{ ...m, claude: { ...m.claude, deriving: true }, error: null },
{
type: "invoke",
name: "derive_claude",
args: { projectPath: path, sessionIds, includeThinking: false },
args: { projectPath: path, sessionIds: [sid], includeThinking: false },
onOk: (doc) => ({ t: "DeriveSucceeded", doc: doc as import("./types").Document, source: `Claude: ${displayName}`, filename }),
onErr: (e) => ({ t: "DeriveFailed", error: e }),
},
Expand Down Expand Up @@ -276,30 +261,17 @@ export function update(msg: Msg, m: Model): [Model, Cmd | null] {
{ ...m, pi: { ...m.pi, sessionsLoading: { ...m.pi.sessionsLoading, [msg.path]: false } } },
null,
];
case "PiToggleSession": {
const sel = { ...(m.pi.selected[msg.path] ?? {}) };
if (sel[msg.sid]) delete sel[msg.sid];
else sel[msg.sid] = true;
return [
{ ...m, pi: { ...m.pi, selected: { ...m.pi.selected, [msg.path]: sel } } },
null,
];
}
case "PiDerive": {
const path = Object.keys(m.pi.selected).find(
(p) => Object.keys(m.pi.selected[p] ?? {}).length > 0,
);
if (!path) return [m, null];
const sessionIds = Object.keys(m.pi.selected[path] ?? {});
const { path, sid } = msg;
const displayName = path.split("/").filter(Boolean).pop() ?? "pi";
const shortId = sessionIds[0]?.slice(0, 8) ?? "";
const filename = `${displayName}${shortId ? `-${shortId}` : ""}.path.json`;
const shortId = sid.slice(0, 8);
const filename = `${displayName}-${shortId}.path.json`;
return [
{ ...m, pi: { ...m.pi, deriving: true }, error: null },
{
type: "invoke",
name: "derive_pi",
args: { projectPath: path, sessionIds, includeThinking: false },
args: { projectPath: path, sessionIds: [sid], includeThinking: false },
onOk: (doc) => ({
t: "DeriveSucceeded",
doc: doc as import("./types").Document,
Expand Down
45 changes: 8 additions & 37 deletions crates/toolpath-desktop/frontend/src/routes/BrowseClaude.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,9 +82,6 @@

const claude = $derived(store.m.claude);
const projectCount = $derived(claude.projects.length);
const selectedCount = $derived(
Object.values(claude.selected).reduce((acc, s) => acc + Object.keys(s || {}).length, 0),
);
</script>

<div class:page={!embedded}>
Expand Down Expand Up @@ -115,7 +112,6 @@
<div style="border:0.5px solid var(--ink-5); background:var(--paper-bright)">
{#each claude.projects as p (p.project_path)}
{@const isExpanded = claude.expanded === p.project_path}
{@const selectedForProject = Object.keys(claude.selected[p.project_path] ?? {}).length}
<div>
<button
class={"row-card" + (isExpanded ? " row-card--selected" : "")}
Expand All @@ -128,7 +124,6 @@
</div>
<div class="row-card__right">
{p.session_count} session{p.session_count === 1 ? "" : "s"}
{#if selectedForProject > 0}<br/><span style="color:var(--road)">{selectedForProject} selected</span>{/if}
</div>
</button>
{#if isExpanded}
Expand All @@ -143,25 +138,9 @@
<div style="padding:12px 18px"><div class="notice">No sessions in this project.</div></div>
{:else}
{#each sessions as s (s.session_id)}
{@const isChecked = !!(claude.selected[p.project_path] ?? {})[s.session_id]}
{@const title = claude.titles[`${p.project_path}|${s.session_id}`]}
<label
class={"row-card" + (isChecked ? " row-card--selected" : "")}
style="padding-left:36px"
onclick={(ev: MouseEvent) => {
if ((ev.target as HTMLElement).tagName !== "INPUT") {
ev.preventDefault();
store.dispatch({ t: "ClaudeToggleSession", path: p.project_path, sid: s.session_id });
}
}}
>
<input
type="checkbox"
class="checkbox"
checked={isChecked}
onclick={(ev: MouseEvent) => ev.stopPropagation()}
onchange={() => store.dispatch({ t: "ClaudeToggleSession", path: p.project_path, sid: s.session_id })}
/>
<div class="row-card" style="padding-left:36px; cursor:default">
<span class="row-card__marker"></span>
<div style="min-width:0">
<div class="row-card__title">
{#if title}{title}{:else}<span class="row-card__sub">loading title…</span>{/if}
Expand All @@ -172,8 +151,12 @@
<span>{s.session_id.slice(0, 8)}</span>
</div>
</div>
<span class="row-card__right"></span>
</label>
<button
class="btn btn--accent btn--sm"
disabled={claude.deriving}
onclick={() => store.dispatch({ t: "ClaudeDerive", path: p.project_path, sid: s.session_id })}
>{claude.deriving ? "Deriving…" : "Select →"}</button>
</div>
{/each}
{#if loading}
<div style="padding:10px 18px; font-family:var(--font-mono); font-size:11px; color:var(--ink-3)">
Expand All @@ -187,16 +170,4 @@
{/each}
</div>
{/if}

<div class="row" style="margin-top:18px">
<span class="spacer"></span>
<span style="font-family:var(--font-mono); font-size:11px; color:var(--ink-3); letter-spacing:0.06em">
{selectedCount || "No"} session{selectedCount === 1 ? "" : "s"} selected
</span>
<button
class="btn btn--accent"
disabled={!selectedCount || claude.deriving}
onclick={() => store.dispatch({ t: "ClaudeDerive" })}
>{claude.deriving ? "Deriving…" : "Preview →"}</button>
</div>
</div>
45 changes: 8 additions & 37 deletions crates/toolpath-desktop/frontend/src/routes/BrowsePi.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,9 +99,6 @@

const pi = $derived(store.m.pi);
const projectCount = $derived(pi.projects.length);
const selectedCount = $derived(
Object.values(pi.selected).reduce((acc, s) => acc + Object.keys(s || {}).length, 0),
);
</script>

<div class:page={!embedded}>
Expand Down Expand Up @@ -132,7 +129,6 @@
<div style="border:0.5px solid var(--ink-5); background:var(--paper-bright)">
{#each pi.projects as p (p.project_path)}
{@const isExpanded = pi.expanded === p.project_path}
{@const selectedForProject = Object.keys(pi.selected[p.project_path] ?? {}).length}
<div>
<button
class={"row-card" + (isExpanded ? " row-card--selected" : "")}
Expand All @@ -145,7 +141,6 @@
</div>
<div class="row-card__right">
{p.session_count} session{p.session_count === 1 ? "" : "s"}
{#if selectedForProject > 0}<br/><span style="color:var(--road)">{selectedForProject} selected</span>{/if}
</div>
</button>
{#if isExpanded}
Expand All @@ -160,33 +155,21 @@
<div style="padding:12px 18px"><div class="notice">No sessions in this project.</div></div>
{:else}
{#each sessions as s (s.session_id)}
{@const isChecked = !!(pi.selected[p.project_path] ?? {})[s.session_id]}
<label
class={"row-card" + (isChecked ? " row-card--selected" : "")}
style="padding-left:36px"
onclick={(ev: MouseEvent) => {
if ((ev.target as HTMLElement).tagName !== "INPUT") {
ev.preventDefault();
store.dispatch({ t: "PiToggleSession", path: p.project_path, sid: s.session_id });
}
}}
>
<input
type="checkbox"
class="checkbox"
checked={isChecked}
onclick={(ev: MouseEvent) => ev.stopPropagation()}
onchange={() => store.dispatch({ t: "PiToggleSession", path: p.project_path, sid: s.session_id })}
/>
<div class="row-card" style="padding-left:36px; cursor:default">
<span class="row-card__marker"></span>
<div style="min-width:0">
<div class="row-card__title">{s.session_id}</div>
<div class="row-card__meta">
<span>{s.entry_count} entr{s.entry_count === 1 ? "y" : "ies"}</span>
<span>{fmtTime(s.timestamp)}</span>
</div>
</div>
<span class="row-card__right"></span>
</label>
<button
class="btn btn--accent btn--sm"
disabled={pi.deriving}
onclick={() => store.dispatch({ t: "PiDerive", path: p.project_path, sid: s.session_id })}
>{pi.deriving ? "Deriving…" : "Select →"}</button>
</div>
{/each}
{#if loading}
<div style="padding:10px 18px; font-family:var(--font-mono); font-size:11px; color:var(--ink-3)">
Expand All @@ -200,16 +183,4 @@
{/each}
</div>
{/if}

<div class="row" style="margin-top:18px">
<span class="spacer"></span>
<span style="font-family:var(--font-mono); font-size:11px; color:var(--ink-3); letter-spacing:0.06em">
{selectedCount || "No"} session{selectedCount === 1 ? "" : "s"} selected
</span>
<button
class="btn btn--accent"
disabled={!selectedCount || pi.deriving}
onclick={() => store.dispatch({ t: "PiDerive" })}
>{pi.deriving ? "Deriving…" : "Preview →"}</button>
</div>
</div>
2 changes: 1 addition & 1 deletion crates/toolpath-desktop/frontend/src/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -825,7 +825,7 @@ html, body {
padding: 18px 28px 28px;
}
.preview-body--split {
grid-template-columns: 380px 1fr;
grid-template-columns: 380px minmax(0, 1fr);
padding: 0;
}
.preview-body--split > .preview-body__left {
Expand Down
Loading