Skip to content

feat(staged): compact new session dialog #785

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
matt2e merged 4 commits into from
Jun 12, 2026
+117 −75
Merged

feat(staged): compact new session dialog #785

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
4415ded
feat(staged): move repo/subpath label into New Session header
matt2e Jun 12, 2026
372bdfe
fix(staged): surface attach images in new session footer
matt2e Jun 12, 2026
b59bce9
style(staged): align new session footer controls
matt2e Jun 12, 2026
eb9b30d
fix(staged): preserve multi-image attachments
matt2e Jun 12, 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
14 changes: 11 additions & 3 deletions apps/staged/src/lib/features/agents/AgentSelector.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,15 +15,17 @@
import AgentIcon from './AgentIcon.svelte';
import { agentState, REMOTE_AGENTS } from './agent.svelte';
import { setAiAgent, getPreferredAgent } from '../settings/preferences.svelte';
import { cn } from '$lib/components/utils';
import * as DropdownMenu from '$lib/components/ui/dropdown-menu';

interface Props {
disabled?: boolean;
remote?: boolean;
dropUp?: boolean;
triggerClass?: string;
}

let { disabled = false, remote = false, dropUp = false }: Props = $props();
let { disabled = false, remote = false, dropUp = false, triggerClass }: Props = $props();

let agents = $derived(remote ? REMOTE_AGENTS : agentState.providers);

Expand All @@ -36,7 +38,10 @@
{#if agents.length > 1}
<DropdownMenu.Root>
<DropdownMenu.Trigger
class="inline-flex items-center gap-1 rounded px-2 py-1 text-xs text-muted-foreground transition-colors hover:bg-[var(--bg-hover)] focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-40"
class={cn(
'inline-flex items-center gap-1 rounded px-2 py-1 text-xs text-muted-foreground transition-colors hover:bg-[var(--bg-hover)] focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-40',
triggerClass
)}
{disabled}
title="Select AI agent"
>
Expand Down Expand Up @@ -68,7 +73,10 @@
{:else}
<button
type="button"
class="inline-flex items-center gap-1 rounded px-2 py-1 text-xs text-muted-foreground disabled:cursor-not-allowed disabled:opacity-40"
class={cn(
'inline-flex items-center gap-1 rounded px-2 py-1 text-xs text-muted-foreground disabled:cursor-not-allowed disabled:opacity-40',
triggerClass
)}
{disabled}
title={currentLabel}
>
Expand Down
10 changes: 6 additions & 4 deletions apps/staged/src/lib/features/sessions/ImageAttachment.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,12 +21,14 @@
import { createImageFromData, getImageData, deleteImage } from '../../commands';
import type { Image } from '../../types';

type ImageIdsUpdate = string[] | ((current: string[]) => string[]);

interface Props {
branchId: string;
projectId: string;
disabled?: boolean;
imageIds: string[];
onImageIdsChange: (ids: string[]) => void;
onImageIdsChange: (update: ImageIdsUpdate) => void;
}

let { branchId, projectId, disabled = false, imageIds, onImageIdsChange }: Props = $props();
Expand Down Expand Up @@ -86,7 +88,7 @@
base64,
true
);
onImageIdsChange([...imageIds, image.id]);
onImageIdsChange((current) => [...current, image.id]);
// Set preview immediately from the local data
const dataUrl = `data:${file.type};base64,${base64}`;
previews = new Map(previews);
Expand All @@ -110,7 +112,7 @@
}

function removeImage(imageId: string) {
onImageIdsChange(imageIds.filter((id) => id !== imageId));
onImageIdsChange((current) => current.filter((id) => id !== imageId));
previews = new Map(previews);
previews.delete(imageId);
deleteImage(imageId).catch((err) => {
Expand Down Expand Up @@ -182,7 +184,7 @@
<Button
variant="outline"
type="button"
class="h-auto gap-1.5 rounded-md border border-dashed border-[var(--border-muted)] bg-transparent px-2.5 py-1.5 text-xs text-[var(--text-faint)] shadow-none hover:border-[var(--border-emphasis)] hover:bg-transparent hover:text-muted-foreground"
class="gap-1.5 px-4 py-2 text-sm font-medium text-muted-foreground shadow-none hover:text-foreground max-[640px]:h-11 max-[640px]:justify-center"
onclick={openFilePicker}
>
<ImagePlus size={14} />
Expand Down
168 changes: 100 additions & 68 deletions apps/staged/src/lib/features/sessions/NewSessionModal.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,8 @@
let isCommit = $derived(currentMode === 'commit');
let isReview = $derived(currentMode === 'review');
let isNote = $derived(!isCommit && !isReview);
const footerControlClass =
'h-9 gap-1.5 rounded-md border border-[var(--border-muted)] bg-[var(--bg-primary)] px-4 py-2 text-sm font-medium text-muted-foreground shadow-none transition-colors hover:bg-[var(--bg-hover)] hover:text-foreground max-[640px]:h-11 max-[640px]:justify-center';

function selectPromptContent(el: HTMLElement, selection: 'all' | 'last-line') {
const sel = window.getSelection();
Expand Down Expand Up @@ -381,9 +383,11 @@
}
}

type ImageIdsUpdate = string[] | ((current: string[]) => string[]);

// Keep imageIds in sync with ImageAttachment changes
function onImageIdsChange(ids: string[]) {
imageIds = ids;
function onImageIdsChange(update: ImageIdsUpdate) {
imageIds = typeof update === 'function' ? update(imageIds) : update;
}

// Subscribe to the shared drag-drop service so the modal intercepts
Expand Down Expand Up @@ -419,34 +423,44 @@
>
<Dialog.Title class="sr-only">New {currentModeInfo.label} session</Dialog.Title>
<header class="modal-header">
<div class="mode-switcher" bind:this={modeMenuEl}>
<button
class={`mode-switcher-btn ${currentModeInfo.iconClass}`}
onclick={() => (modeMenuOpen = !modeMenuOpen)}
type="button"
>
<currentModeInfo.icon size={14} />
<span>{currentModeInfo.label}</span>
<ChevronDown size={14} />
</button>
{#if modeMenuOpen}
<div class="mode-menu">
{#each allModes as m, i}
<button
class="mode-menu-item"
class:active={m.value === currentMode}
type="button"
onclick={() => switchMode(m.value)}
>
<span class="header-icon {m.iconClass}">
<m.icon size={14} />
</span>
<span>{m.label}</span>
{#if viewport.showShortcutHints}
<span class="mode-menu-hint">{modKey}{i + 1}</span>
{/if}
</button>
{/each}
<div class="header-left">
<div class="mode-switcher" bind:this={modeMenuEl}>
<button
class={`mode-switcher-btn ${currentModeInfo.iconClass}`}
onclick={() => (modeMenuOpen = !modeMenuOpen)}
type="button"
>
<currentModeInfo.icon size={14} />
<span>{currentModeInfo.label}</span>
<ChevronDown size={14} />
</button>
{#if modeMenuOpen}
<div class="mode-menu">
{#each allModes as m, i}
<button
class="mode-menu-item"
class:active={m.value === currentMode}
type="button"
onclick={() => switchMode(m.value)}
>
<span class="header-icon {m.iconClass}">
<m.icon size={14} />
</span>
<span>{m.label}</span>
{#if viewport.showShortcutHints}
<span class="mode-menu-hint">{modKey}{i + 1}</span>
{/if}
</button>
{/each}
</div>
{/if}
</div>
{#if repoLabel}
<div class="repo-info">
<RepoLabel
githubRepo={repoLabel.headRepo ?? repoLabel.githubRepo}
subpath={repoLabel.subpath}
/>
</div>
{/if}
</div>
Expand All @@ -469,15 +483,6 @@
</header>

<form class="modal-body" onsubmit={handleSubmit}>
{#if repoLabel}
<div class="repo-info">
<RepoLabel
githubRepo={repoLabel.headRepo ?? repoLabel.githubRepo}
subpath={repoLabel.subpath}
/>
</div>
{/if}

<div class="form-group">
<HashtagInput
bind:textareaEl
Expand All @@ -491,21 +496,31 @@
disabled={starting}
items={hashtagItems}
/>
{#if viewport.showShortcutHints}
<span class="hint">{willQueue ? '⌘ Enter to queue' : '⌘ Enter to start'}</span>
{/if}
</div>

<ImageAttachment
branchId={branch.id}
projectId={branch.projectId}
disabled={starting}
{imageIds}
{onImageIdsChange}
/>
{#if imageIds.length > 0}
<ImageAttachment
branchId={branch.id}
projectId={branch.projectId}
disabled={starting}
{imageIds}
{onImageIdsChange}
/>
{/if}

<div class="form-actions">
<AgentSelector disabled={starting} {remote} dropUp />
<div class="form-actions-left">
<AgentSelector disabled={starting} {remote} dropUp triggerClass={footerControlClass} />
{#if imageIds.length === 0}
<ImageAttachment
branchId={branch.id}
projectId={branch.projectId}
disabled={starting}
{imageIds}
{onImageIdsChange}
/>
{/if}
Comment on lines +514 to +522

@chatgpt-codex-connector chatgpt-codex-connector Bot Jun 12, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Keep the uploader mounted while multi-select finishes

When the dialog starts with no images, this conditional mounts a different ImageAttachment than the one used after the first image is added. If a user selects multiple files in one picker action, ImageAttachment.handleFileSelect is still looping asynchronously after the first onImageIdsChange, but this zero-image instance gets unmounted and continues with its stale imageIds prop; subsequent uploads call onImageIdsChange([...imageIds, image.id]) from the stale empty array, so earlier selected images can be dropped. Keep a single uploader instance mounted across the empty/non-empty transition or make the callback append against current parent state.

Useful? React with 👍 / 👎.

</div>
<div class="form-actions-right">
<Button
type="button"
Expand All @@ -518,8 +533,8 @@
</Button>
<Button
type="submit"
variant="outline"
class="gap-1.5 px-4 py-2 text-sm font-medium max-[640px]:h-11 max-[640px]:flex-1 max-[640px]:justify-center"
variant="default"
class="gap-1.5 px-4 py-2 text-sm font-semibold shadow-none hover:bg-[var(--ui-accent-hover)] max-[640px]:h-11 max-[640px]:flex-1 max-[640px]:justify-center"
disabled={starting || (!isReview && !prompt.trim())}
>
{#if starting}
Expand All @@ -542,12 +557,22 @@
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 10px 18px;
border-bottom: 1px solid var(--border-subtle);
}

.header-left {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
flex: 1;
}

.mode-switcher {
position: relative;
flex-shrink: 0;
}

.mode-switcher-btn {
Expand Down Expand Up @@ -676,6 +701,17 @@
flex-shrink: 0;
}

.repo-info {
min-width: 0;
padding: 4px 10px;
background: var(--bg-hover);
border-radius: 6px;
font-size: var(--size-sm);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

/* Body */
.modal-body {
padding: 18px;
Expand All @@ -686,16 +722,6 @@
min-height: 0;
}

.repo-info {
padding: 8px 10px;
background: var(--bg-hover);
border-radius: 6px;
font-size: var(--size-sm);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.form-group {
display: flex;
flex-direction: column;
Expand Down Expand Up @@ -738,12 +764,6 @@
border-color: var(--border-emphasis);
}

.hint {
font-size: var(--size-xs);
color: var(--text-faint);
text-align: right;
}

/* Actions */
.form-actions {
display: flex;
Expand All @@ -753,6 +773,13 @@
margin-top: 4px;
}

.form-actions-left {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}

.form-actions-right {
display: flex;
gap: 8px;
Expand All @@ -776,6 +803,11 @@
flex-direction: column;
}

.form-actions-left {
flex-wrap: wrap;
width: 100%;
}

.form-actions :global(.selector-btn) {
min-height: 40px;
max-width: calc(100vw - 32px);
Expand Down