+ {claimed.row.label ?? bareName(claimed.row.name)}
+
+
}
diff --git a/ui-web/src/conversation/MessageItem.tsx b/ui-web/src/conversation/MessageItem.tsx
index 7e44ab785..0ce064356 100644
--- a/ui-web/src/conversation/MessageItem.tsx
+++ b/ui-web/src/conversation/MessageItem.tsx
@@ -3,6 +3,7 @@ import { memo, useMemo } from 'react'
import { openFile } from '../sidebar-right/store.ts'
import { $workspace } from '../state/store.ts'
+import { ExpandableImage } from '../ui/ImagePreview.tsx'
import { AlertIcon, InfoIcon } from '../ui/icons.tsx'
import { CopyButton } from '../ui/primitives/CopyButton.tsx'
import { FileTypeIcon } from '../ui/primitives/FileTypeIcon.tsx'
@@ -38,7 +39,7 @@ function UserMessageImpl({ node, onEdit }: { node: UserNode; onEdit?: (text: str
{node.images !== undefined && node.images.length > 0 && (
{node.images.map((image, index) => (
- ![{image.name}]()
{
+ expect(commandDraft('/plan fix the app', rows)).toMatchObject({ prefix: '/plan ', body: 'fix the app' })
+ expect(commandDraft('/plan', rows)).toBeNull()
+ expect(commandDraft('/unknown text', rows)).toBeNull()
+ expect(commandDraft('/help text', rows)).toBeNull()
+})
diff --git a/ui-web/src/conversation/command-draft.ts b/ui-web/src/conversation/command-draft.ts
new file mode 100644
index 000000000..6a6a4ff95
--- /dev/null
+++ b/ui-web/src/conversation/command-draft.ts
@@ -0,0 +1,9 @@
+import type { MenuRow } from './command-menu.ts'
+
+/** Recognized argument-taking commands occupy an atomic chip ahead of the editable argument. */
+export function commandDraft(text: string, rows: readonly MenuRow[]): { row: MenuRow; prefix: string; body: string } | null {
+ const match = /^(\/[^\s]+) /.exec(text)
+ if (!match) return null
+ const row = rows.find(row => row.name === match[1] && row.hint !== undefined && row.action === undefined)
+ return row ? { row, prefix: match[0], body: text.slice(match[0].length) } : null
+}
diff --git a/ui-web/src/sidebar-right/BytePreviews.tsx b/ui-web/src/sidebar-right/BytePreviews.tsx
index 4f65deec7..fab0882e4 100644
--- a/ui-web/src/sidebar-right/BytePreviews.tsx
+++ b/ui-web/src/sidebar-right/BytePreviews.tsx
@@ -16,6 +16,7 @@ import { readWorkspaceRelated } from '../state/actions.ts'
import { $columnDrag } from '../state/layout.ts'
import { createHtmlDocument, packHtml, referencePath, type ReadRelative } from './html-pack.ts'
import { decodeBase64, fileExtension } from './text-store.ts'
+import type { PreviewZoom } from './zoom.ts'
import css from './TextPreview.module.css'
/**
@@ -92,8 +93,9 @@ export function imageMediaType(path: string): string | undefined {
return IMAGE_MEDIA_TYPES[fileExtension(path)]
}
-/** The image at its intrinsic size; the body around it scrolls. */
-export function ImagePreview({ data, path }: { data: Uint8Array; path: string }) {
+/** Fit large images to the panel, with explicit scaling for close inspection. */
+export function ImagePreview({ data, path, zoom = 'fit' }: { data: Uint8Array; path: string; zoom?: PreviewZoom }) {
+ const [naturalWidth, setNaturalWidth] = useState(0)
const mediaType = imageMediaType(path) ?? 'application/octet-stream'
const url = useObjectUrl(data, mediaType)
const [state, setState] = useState<'failed' | 'loading' | 'ready'>('loading')
@@ -107,7 +109,7 @@ export function ImagePreview({ data, path }: { data: Uint8Array; path: string })
const name = path.split(/[/\\]/).filter(Boolean).at(-1) ?? path
return (
-
+ setZoom(tabId, zoom)} />}
{state === 'loading' &&
+ {['markdown', 'code', 'text', 'image'].includes(viewer) && Preparing the preview…
} {state === 'failed' && (
@@ -119,13 +121,15 @@ export function ImagePreview({ data, path }: { data: Uint8Array; path: string })
0 ? naturalWidth * zoom : undefined }}
decoding="async"
draggable={false}
hidden={state !== 'ready'}
onError={() => {
setState('failed')
}}
- onLoad={() => {
+ onLoad={event => {
+ setNaturalWidth(event.currentTarget.naturalWidth)
setState('ready')
}}
referrerPolicy="no-referrer"
diff --git a/ui-web/src/sidebar-right/DocumentMarkdown.test.tsx b/ui-web/src/sidebar-right/DocumentMarkdown.test.tsx
new file mode 100644
index 000000000..6564c6d7b
--- /dev/null
+++ b/ui-web/src/sidebar-right/DocumentMarkdown.test.tsx
@@ -0,0 +1,23 @@
+import { cleanup, render, screen } from '@testing-library/react'
+import { afterEach, expect, it } from 'vitest'
+import DocumentMarkdown, { frontmatterFields, splitFrontmatter } from './DocumentMarkdown.tsx'
+
+afterEach(cleanup)
+it('renders YAML mappings as metadata and leaves the Markdown body intact', () => {
+ render(
{front.source} :
+ fields.length > 0 && -
+ {fields.map((field, index) =>
- {field.key}
- {field.value}
{viewer === 'markdown' && hasPages && (
-
-
+ Loading document…}>
)}
{viewer === 'code' && hasPages && (
-
+
>({})
@@ -156,6 +158,7 @@ export function emptyTextTab(path: string): TextTabState {
version: '',
viewer: defaultViewer(path),
wrap: true,
+ zoom: defaultViewer(path) === 'image' ? 'fit' : 1,
}
}
@@ -409,3 +412,9 @@ export function resetTextTabs(): void {
generations.clear()
$textTabs.set({})
}
+
+/** Zoom belongs to the file tab and survives a viewer switch or reload. */
+export function setZoom(tabId: string, zoom: PreviewZoom): void {
+ const state = $textTabs.get()[tabId]
+ if (state) $textTabs.setKey(tabId, { ...state, zoom: zoom === 'fit' ? 'fit' : clampZoom(zoom) })
+}
diff --git a/ui-web/src/sidebar-right/zoom.ts b/ui-web/src/sidebar-right/zoom.ts
new file mode 100644
index 000000000..3ec44c370
--- /dev/null
+++ b/ui-web/src/sidebar-right/zoom.ts
@@ -0,0 +1,4 @@
+export type PreviewZoom = 'fit' | number
+
+export const clampZoom = (value: number): number =>
+ Number.isFinite(value) ? Math.max(0.25, Math.min(4, value)) : 1
diff --git a/ui-web/src/sidebar/Sidebar.module.css b/ui-web/src/sidebar/Sidebar.module.css
index 92f8987dd..bd4b7097e 100644
--- a/ui-web/src/sidebar/Sidebar.module.css
+++ b/ui-web/src/sidebar/Sidebar.module.css
@@ -366,3 +366,17 @@
background: var(--cc-alias-interactive-bg-active);
color: var(--cc-alias-label-primary);
}
+.sessionEntry { display: flex; position: relative; min-width: 0; align-items: center; }
+.sessionEntry > .sessionRow { flex: 1; min-width: 0; }
+.sessionActions { flex: none; font: var(--cc-font-xs-13); cursor: pointer; padding: 4px; border: 0; background: transparent; color: var(--cc-alias-label-tertiary); }
+.sessionActions:hover, .sessionActions[aria-expanded="true"] { color: var(--cc-alias-label-primary); }
+.sessionMenu {
+ position: fixed; z-index: 100; display: flex; flex-direction: column; gap: 8px;
+ width: 230px; padding: 12px; border-radius: 10px; box-shadow: var(--cc-shadow-lv3);
+ max-width: calc(100vw - 40px);
+ color: var(--cc-alias-label-primary); background: var(--cc-specific-menu);
+}
+.sessionMenu code { overflow-wrap: anywhere; font-size: 11px; }
+.sessionMenu button, .showMore { padding: 5px 10px; border: 0; border-radius: 6px; color: var(--cc-alias-label-secondary); background: transparent; font: var(--cc-font-xs-13); cursor: pointer; }
+.sessionMenu button:hover, .showMore:hover { background: var(--cc-alias-interactive-bg-hover); }
+.showMore { margin-left: 18px; }
diff --git a/ui-web/src/sidebar/Sidebar.test.tsx b/ui-web/src/sidebar/Sidebar.test.tsx
index 303a6f1dd..fcc7b1517 100644
--- a/ui-web/src/sidebar/Sidebar.test.tsx
+++ b/ui-web/src/sidebar/Sidebar.test.tsx
@@ -157,3 +157,19 @@ describe('New session', () => {
$newSessionDialog.set(false)
})
})
+
+it('folds long session lists, reveals search matches beyond the fold, and exposes session ids', () => {
+ const many = project('alpha')
+ many.repos[0]!.groups[0]!.sessions = Array.from({ length: 12 }, (_, index) => ({ id: `id-${index}`, title: `Conversation ${index}` }))
+ $projects.set([many])
+ $workspace.set('/alpha')
+ render(
liveId: string | null
project: ProjectNode
+ searching: boolean
}
-function SessionList({ activeId, hiddenId, keep, liveId, project }: SessionListProps) {
+function SessionActions({ row }: { row: SessionRow }) {
+ const [open, setOpen] = useState(false)
+ const [position, setPosition] = useState({ top: 0, left: 0 })
+ const trigger = useRef(null)
+ const menu = useRef(null)
+ useLayoutEffect(() => {
+ if (!open) return
+ const rect = trigger.current?.getBoundingClientRect()
+ const panel = menu.current
+ if (rect && panel) setPosition({
+ left: Math.max(8, Math.min(rect.right - panel.offsetWidth, window.innerWidth - panel.offsetWidth - 8)),
+ top: Math.max(8, Math.min(rect.bottom + 4, window.innerHeight - panel.offsetHeight - 8)),
+ })
+ panel?.querySelector('button')?.focus()
+ }, [open])
+ useEffect(() => {
+ if (!open) return
+ const outside = (event: PointerEvent) => {
+ if (!menu.current?.contains(event.target as Node) && !trigger.current?.contains(event.target as Node)) setOpen(false)
+ }
+ const escape = (event: KeyboardEvent) => {
+ if (event.key === 'Escape') { setOpen(false); trigger.current?.focus() }
+ }
+ const close = () => setOpen(false)
+ document.addEventListener('pointerdown', outside)
+ document.addEventListener('keydown', escape)
+ window.addEventListener('resize', close)
+ window.addEventListener('scroll', close, true)
+ return () => {
+ document.removeEventListener('pointerdown', outside)
+ document.removeEventListener('keydown', escape)
+ window.removeEventListener('resize', close)
+ window.removeEventListener('scroll', close, true)
+ }
+ }, [open])
+ return <>
+
+ {open && createPortal(>({})
+ const required = Object.fromEntries(project.repos.flatMap(repo => repo.groups.map(lane =>
+ [lane.id, sessionWatermark(laneRows(lane.sessions, hiddenId, keep), marks[lane.id] ?? SESSION_PAGE, activeId ?? liveId)])))
+ useEffect(() => {
+ if (searching) return
+ if (Object.entries(required).some(([id, value]) => value > (marks[id] ?? SESSION_PAGE))) setMarks(required)
+ }, [required, marks, searching])
return (
<>
{project.repos.map(repo =>
- repo.groups.map(lane => (
- {
if (!isStillCurrent()) return
- pendingAttachments = []
+ clearDraftAttachments($storedSessionId.get() ?? sessionId)
$transcript.set({ ...emptyTranscript(), info: $transcript.get().info })
$trajectory.set(emptyTrajectory())
$subagentView.set(null)
@@ -905,14 +904,15 @@ async function send(text: string, retried = false): Promise {
if (sessionId === null) return
- const live = liveAttachments(text, pendingAttachments)
+ const draftScope = $storedSessionId.get() ?? sessionId
+ const live = liveAttachments(text, getDraft(draftScope).attachments)
const images = live.flatMap(({ id, kind, name, url }) =>
kind === 'image' && url !== undefined ? [{ name, placeholder: placeholderFor(id, 'image'), url }] : [],
)
const files = live.flatMap(({ id, kind, name, size }) =>
kind === 'file' ? [{ name, placeholder: placeholderFor(id, 'file'), ...(size !== undefined && { size }) }] : [],
)
- pendingAttachments = []
+ clearDraftAttachments(draftScope)
$transcript.set(markTurnStarted(appendUserMessage($transcript.get(), text, images, files)))
$trajectory.set(recordPrompt($trajectory.get(), text))
notice('')
@@ -1406,7 +1406,9 @@ export async function attachImage(file: Blob, name: string): Promise {
+ setDraftText('one', '/plan fix [File #7]')
+ addDraftAttachment('one', { id: 7, kind: 'file', name: 'notes.txt', size: 12 })
+ setDraftText('two', 'another prompt')
+ expect(getDraft('one').text).toBe('/plan fix [File #7]')
+ expect(getDraft('two').attachments).toEqual([])
+ expect(sessionStorage.getItem('clawcodex.web.drafts.v1')).toContain('notes.txt')
+ clearDraftAttachments('one')
+ expect(getDraft('one').attachments).toEqual([])
+})
+it('restores text to a replacement runtime but removes stale upload markers', () => {
+ setDraftText('old', 'Inspect [Image #2] then [File #3] carefully')
+ addDraftAttachment('old', { id: 2, kind: 'image', name: 'screen.png', url: 'data:image/png;base64,YQ==' })
+ addDraftAttachment('old', { id: 3, kind: 'file', name: 'notes.txt' })
+ expect(adoptDraft('old', 'new')).toBe(true)
+ expect(getDraft('new')).toEqual({ text: 'Inspect then carefully', attachments: [] })
+ setDraftText('new', 'edited')
+ adoptDraft('old', 'new')
+ expect(getDraft('new').text).toBe('edited')
+})
+
+it('keeps a saved conversation draft across runtime replacements and consumes welcome drafts', () => {
+ setDraftText('welcome:/project', 'First draft')
+ adoptDraft('welcome:/project', 'stored', 'runtime-one')
+ expect(getDraft('welcome:/project').text).toBe('')
+ expect(getDraft('stored').text).toBe('First draft')
+ addDraftAttachment('stored', { id: 4, kind: 'file', name: 'notes.txt' }, 'runtime-one')
+ setDraftText('stored', 'Read [File #4]')
+ expect(adoptDraft('stored', 'stored', 'runtime-one')).toBe(false)
+ expect(getDraft('stored').attachments).toHaveLength(1)
+ expect(adoptDraft('stored', 'stored', 'runtime-two')).toBe(true)
+ expect(getDraft('stored')).toEqual({ text: 'Read', attachments: [] })
+})
diff --git a/ui-web/src/state/drafts.ts b/ui-web/src/state/drafts.ts
new file mode 100644
index 000000000..987cb579a
--- /dev/null
+++ b/ui-web/src/state/drafts.ts
@@ -0,0 +1,77 @@
+import { map } from 'nanostores'
+import { removePlaceholder, type Attachment } from '../conversation/attachments.ts'
+
+export interface DraftDocument { text: string; attachments: Attachment[]; runtimeId?: string }
+const KEY = 'clawcodex.web.drafts.v1'
+const EMPTY: DraftDocument = { text: '', attachments: [] }
+
+function readDrafts(): Record {
+ try {
+ const saved: unknown = JSON.parse(sessionStorage.getItem(KEY) ?? '{}')
+ if (!saved || typeof saved !== 'object' || Array.isArray(saved)) return {}
+ const drafts: Record = {}
+ for (const [id, value] of Object.entries(saved)) {
+ if (!value || typeof value.text !== 'string' || !Array.isArray(value.attachments)) continue
+ drafts[id] = { text: value.text, ...(typeof value.runtimeId === 'string' && { runtimeId: value.runtimeId }), attachments: value.attachments.filter((item: unknown): item is Attachment => {
+ if (!item || typeof item !== 'object') return false
+ const a = item as Record
+ return Number.isInteger(a.id) && Number(a.id) >= 0 && typeof a.name === 'string' && ['image', 'file'].includes(String(a.kind)) &&
+ (a.size === undefined || typeof a.size === 'number' && Number.isFinite(a.size) && a.size >= 0) &&
+ (a.url === undefined || typeof a.url === 'string' && /^data:image\//.test(a.url))
+ }) }
+ }
+ return drafts
+ } catch { return {} }
+}
+
+/** Tab-local drafts survive reload, without sharing unsent prompts with other windows. */
+export const $drafts = map>(readDrafts())
+export function getDraft(id: string): DraftDocument { return $drafts.get()[id] ?? EMPTY }
+
+function save(id: string, draft: DraftDocument): void {
+ $drafts.setKey(id, draft)
+ persist()
+}
+
+function persist(): void {
+ try { sessionStorage.setItem(KEY, JSON.stringify($drafts.get())) }
+ catch {
+ // Large image previews can exceed the tab's quota. Retain names, markers
+ // and text durably; the full preview remains available in this page.
+ try {
+ const small = Object.fromEntries(Object.entries($drafts.get()).map(([key, doc]) =>
+ [key, { ...doc, attachments: doc.attachments.map(({ url: _url, ...item }) => item) }]))
+ sessionStorage.setItem(KEY, JSON.stringify(small))
+ } catch { /* Storage disabled: drafts still survive navigation in this page. */ }
+ }
+}
+
+export function setDraftText(id: string, text: string): void { save(id, { ...getDraft(id), text }) }
+export function addDraftAttachment(id: string, attachment: Attachment, runtimeId = id): void {
+ const draft = getDraft(id)
+ save(id, { ...draft, runtimeId, attachments: [...draft.attachments.filter(a => a.id !== attachment.id || a.kind !== attachment.kind), attachment] })
+}
+export function clearDraftAttachments(id: string): void { save(id, { ...getDraft(id), attachments: [] }) }
+
+/** A replacement runtime can restore text, but its upload identifiers belong to the old agent. */
+export function adoptDraft(from: string, to: string, runtimeId = to): boolean {
+ const source = $drafts.get()[to] ?? $drafts.get()[from]
+ if (!source) return false
+ const stale = source.attachments.length > 0 && source.runtimeId !== runtimeId
+ let text = source.text
+ if (stale) {
+ for (const attachment of source.attachments) {
+ while (text.includes(attachment.kind === 'file' ? `[File #${attachment.id}]` : `[Image #${attachment.id}]`)) {
+ text = removePlaceholder(text, attachment.id, attachment.kind)
+ }
+ }
+ }
+ if (from !== to) $drafts.setKey(from, undefined)
+ save(to, stale ? { text, attachments: [] } : source)
+ return stale
+}
+
+export function resetDrafts(): void {
+ $drafts.set({})
+ try { sessionStorage.removeItem(KEY) } catch { /* Storage may be disabled. */ }
+}
diff --git a/ui-web/src/ui/ImagePreview.module.css b/ui-web/src/ui/ImagePreview.module.css
new file mode 100644
index 000000000..26fbcae79
--- /dev/null
+++ b/ui-web/src/ui/ImagePreview.module.css
@@ -0,0 +1,14 @@
+.thumbnail { display: inline-block; max-width: 100%; padding: 0; border: 0; background: transparent; cursor: zoom-in; vertical-align: middle; }
+.thumbnail img { display: block; max-width: 100%; }
+.dialog { width: calc(100vw - 64px); max-width: none; height: calc(100vh - 64px); max-height: none; padding: 0; border: 1px solid var(--cc-alias-border-l2); border-radius: 14px; background: var(--cc-alias-bg-base); color: var(--cc-alias-label-primary); }
+.dialog::backdrop { background: rgb(0 0 0 / 65%); }
+.toolbar { display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 16px; border-bottom: 1px solid var(--cc-alias-border-l2); }
+.toolbar span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.toolbar button { flex: none; padding: 6px 10px; border: 0; border-radius: 8px; font: inherit; color: inherit; background: var(--cc-alias-interactive-bg-hover); cursor: pointer; }
+.viewport { display: flex; height: calc(100% - 53px); overflow: auto; }
+.viewport img { flex: none; margin: auto; }
+.fit { max-width: 100%; max-height: 100%; object-fit: contain; }
+.actual { max-width: none; max-height: none; }
+.link { position: relative; }
+.hoverPreview { position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 30; width: min(240px, 65vw); padding: 6px; background: var(--cc-specific-menu); border-radius: 10px; box-shadow: var(--cc-shadow-lv3); pointer-events: none; }
+.hoverPreview img { max-width: 100%; max-height: 180px; object-fit: contain; }
diff --git a/ui-web/src/ui/ImagePreview.tsx b/ui-web/src/ui/ImagePreview.tsx
new file mode 100644
index 000000000..aa16a6ac2
--- /dev/null
+++ b/ui-web/src/ui/ImagePreview.tsx
@@ -0,0 +1,43 @@
+import { useEffect, useRef, useState, type ReactNode } from 'react'
+import { createPortal } from 'react-dom'
+import css from './ImagePreview.module.css'
+
+/** Accessible full-size image inspection, shared by sent attachments and Markdown images. */
+export function ExpandableImage({ src, alt, title, className }: { src: string; alt: string; title?: string; className?: string }) {
+ const [open, setOpen] = useState(false)
+ return <>
+
+ {open && setOpen(false)} />}
+
+}
+
+function ImageDialog({ src, alt, onClose }: { src: string; alt: string; onClose: () => void }) {
+ const dialog = useRef(null)
+ const [actual, setActual] = useState(false)
+ useEffect(() => {
+ const previous = document.activeElement
+ dialog.current?.showModal()
+ return () => { if (previous instanceof HTMLElement) previous.focus() }
+ }, [])
+ return createPortal(, document.body)
+}
+
+/** A linked image loads its thumbnail only when the link is hovered or focused. */
+export function ImageLink({ href, title, children }: { href: string; title?: string; children: ReactNode }) {
+ const [preview, setPreview] = useState(false)
+ return setPreview(true)} onMouseLeave={() => setPreview(false)}>
+ setPreview(true)} onBlur={() => setPreview(false)}>{children}
+ {preview && 
}
+
+}
diff --git a/ui-web/src/ui/markdown/Markdown.test.tsx b/ui-web/src/ui/markdown/Markdown.test.tsx
index 46f7be883..89dc9859c 100644
--- a/ui-web/src/ui/markdown/Markdown.test.tsx
+++ b/ui-web/src/ui/markdown/Markdown.test.tsx
@@ -101,6 +101,11 @@ describe('Markdown link safety', () => {
})
describe('Markdown image safety', () => {
+ it('retains linked image navigation without nesting an interactive button', () => {
+ const { container } = render({renderInline(link.tokens, key, options)}
}
+ if (/^https?:\/\/.*\.(?:png|jpe?g|gif|webp|avif|svg)(?:[?#].*)?$/i.test(link.href)) {
+ return {renderInline(link.tokens, key, { ...options, inLink: true })}
+ }
const external = isExternal(link.href)
return (
@@ -247,7 +253,7 @@ function renderToken(token: Token, key: string, options: RenderOptions): ReactNo
target={external ? '_blank' : undefined}
title={link.title ?? undefined}
>
- {renderInline(link.tokens, key, options)}
+ {renderInline(link.tokens, key, { ...options, inLink: true })}
)
}
@@ -263,13 +269,13 @@ function renderToken(token: Token, key: string, options: RenderOptions): ReactNo
)
}
+ if (options.inLink) return 
+
return (
-
diff --git a/ui-web/vite.config.ts b/ui-web/vite.config.ts
index 1eaa10b8c..2d311da84 100644
--- a/ui-web/vite.config.ts
+++ b/ui-web/vite.config.ts
@@ -38,6 +38,7 @@ export default defineConfig({
// on-demand chunk and is fetched only when a code block needs it.
manualChunks(id: string): string | undefined {
if (!id.includes('/node_modules/')) return undefined
+ if (id.includes('/node_modules/yaml/')) return 'yaml'
if (id.includes('/node_modules/katex/')) return 'katex'
if (id.includes('/node_modules/@shikijs/langs/')) return undefined
if (id.includes('/node_modules/shiki/') || id.includes('/node_modules/@shikijs/')) {
{rows}
}
{whole && bytes === undefined && state.failure === undefined && (
Reading…
)} {viewer === 'html' && bytes !== undefined &&diff --git a/ui-web/src/sidebar-right/ZoomControls.tsx b/ui-web/src/sidebar-right/ZoomControls.tsx new file mode 100644 index 000000000..8ed7b14bc --- /dev/null +++ b/ui-web/src/sidebar-right/ZoomControls.tsx @@ -0,0 +1,19 @@ +import css from './TextPreview.module.css' +import { clampZoom, type PreviewZoom } from './zoom.ts' + +export function ZoomControls({ value, onChange, image = false }: { + value: PreviewZoom; onChange: (zoom: PreviewZoom) => void; image?: boolean +}) { + const scale = value === 'fit' ? 1 : value + return
+
+
+
+
+}
diff --git a/ui-web/src/sidebar-right/text-store.test.ts b/ui-web/src/sidebar-right/text-store.test.ts
index fb84df56b..c74997715 100644
--- a/ui-web/src/sidebar-right/text-store.test.ts
+++ b/ui-web/src/sidebar-right/text-store.test.ts
@@ -20,6 +20,7 @@ import {
reloadPages,
resetTextTabs,
setScroll,
+ setZoom,
toggleWrap,
viewerChoices,
} from './text-store.ts'
@@ -55,6 +56,17 @@ afterEach(() => {
resetTextTabs()
})
+it('keeps preview zoom per tab and clamps numeric zoom to the supported range', () => {
+ $textTabs.set({ a: emptyTextTab('/repo/a.md'), b: emptyTextTab('/repo/image.png') })
+ expect($textTabs.get().b?.zoom).toBe('fit')
+ setZoom('a', 1.5)
+ setZoom('b', 100)
+ expect($textTabs.get().a?.zoom).toBe(1.5)
+ expect($textTabs.get().b?.zoom).toBe(4)
+ setZoom('b', Number.NaN)
+ expect($textTabs.get().b?.zoom).toBe(1)
+})
+
describe('page arithmetic', () => {
it('tells one empty line apart from a page past the end', () => {
expect(linesOf({ lines: 1, text: '' })).toEqual([''])
diff --git a/ui-web/src/sidebar-right/text-store.ts b/ui-web/src/sidebar-right/text-store.ts
index a286b38f3..cddf429a9 100644
--- a/ui-web/src/sidebar-right/text-store.ts
+++ b/ui-web/src/sidebar-right/text-store.ts
@@ -16,6 +16,7 @@
*/
import { map } from 'nanostores'
+import { clampZoom, type PreviewZoom } from './zoom.ts'
import type { FileBytes, FilePage, WorkspaceFileFailure } from '../gateway/protocol.ts'
import { readWorkspaceBytes, readWorkspaceFile } from '../state/actions.ts'
@@ -139,6 +140,7 @@ export interface TextTabState {
version: string
viewer: PreviewViewer
wrap: boolean
+ zoom: PreviewZoom
}
export const $textTabs = map
+ Session ID
, document.body)}
+
+}
+
+function SessionList({ activeId, hiddenId, keep, liveId, project, searching }: SessionListProps) {
// Lane headers only earn their line when a repo actually has more than one
// checkout — a single-worktree project would otherwise show a header that
// repeats its own name.
const showLanes = laneCount(project) > 1
+ const [marks, setMarks] = useState{row.id}
+ repo.groups.map(lane => {
+ const rows = laneRows(lane.sessions, hiddenId, keep)
+ const visible = searching ? rows.length : required[lane.id] ?? SESSION_PAGE
+ return
diff --git a/ui-web/src/sidebar/filter.ts b/ui-web/src/sidebar/filter.ts
index 727437525..36dc3b46f 100644
--- a/ui-web/src/sidebar/filter.ts
+++ b/ui-web/src/sidebar/filter.ts
@@ -2,7 +2,7 @@ import type { ProjectNode, SessionRow } from '../gateway/protocol.ts'
/** What a row is searched by: its display name, then the prompt behind it. */
function haystack(row: SessionRow): string {
- return `${row.title ?? ''}\n${row.preview ?? ''}`.toLowerCase()
+ return `${row.id}\n${row.title ?? ''}\n${row.preview ?? ''}`.toLowerCase()
}
/**
diff --git a/ui-web/src/sidebar/watermark.test.ts b/ui-web/src/sidebar/watermark.test.ts
new file mode 100644
index 000000000..c116886ef
--- /dev/null
+++ b/ui-web/src/sidebar/watermark.test.ts
@@ -0,0 +1,10 @@
+import { expect, it } from 'vitest'
+import { sessionWatermark } from './watermark.ts'
+
+const rows = Array.from({ length: 80 }, (_, n) => ({ id: String(n), title: `Session ${n}` }))
+it('reveals a contiguous prefix for active sessions and never shrinks on updates', () => {
+ expect(sessionWatermark(rows, 5, '8')).toBe(9)
+ expect(sessionWatermark(rows, 9, '0')).toBe(9)
+ expect(sessionWatermark(rows, 5, '60')).toBe(5)
+ expect(sessionWatermark(rows, 65, '60')).toBe(65)
+})
diff --git a/ui-web/src/sidebar/watermark.ts b/ui-web/src/sidebar/watermark.ts
new file mode 100644
index 000000000..04c4b0940
--- /dev/null
+++ b/ui-web/src/sidebar/watermark.ts
@@ -0,0 +1,12 @@
+import type { SessionRow } from '../gateway/protocol.ts'
+
+export const SESSION_PAGE = 5
+
+/** Keep a contiguous prefix, revealing attention rows within the first 50 without shrinking it again. */
+export function sessionWatermark(rows: readonly SessionRow[], previous: number, active: string | null): number {
+ let needed = SESSION_PAGE
+ rows.slice(0, 50).forEach((row, index) => {
+ if (row.id === active || row.is_active) needed = index + 1
+ })
+ return Math.max(previous, needed)
+}
diff --git a/ui-web/src/state/actions.test.ts b/ui-web/src/state/actions.test.ts
index 3c1eff9de..8a585abb0 100644
--- a/ui-web/src/state/actions.test.ts
+++ b/ui-web/src/state/actions.test.ts
@@ -41,6 +41,7 @@ import {
$workspace,
} from './store.ts'
import { emptyTranscript, type AssistantNode } from './transcript.ts'
+import { getDraft, setDraftText } from './drafts.ts'
/** Answers every RPC from a canned table and lets tests push events. */
class FakeGateway {
@@ -1437,6 +1438,40 @@ describe('the same runtime reached through its other row', () => {
})
describe('attached files', () => {
+ it('keeps draft uploads with the saved conversation while navigating between runtimes', async () => {
+ const gateway = await connect({
+ 'session.resume': { session_id: 'runtime-one', stored_session_id: 'saved-one' },
+ 'file.attach': { attached: true, id: 4, name: 'notes.txt' },
+ })
+ await resumeSession('saved-one')
+ setDraftText('saved-one', 'Read [File #4]')
+ await attachFile(new Blob(['alpha']), 'notes.txt')
+ gateway.results['session.resume'] = { session_id: 'runtime-two', stored_session_id: 'saved-two' }
+ await resumeSession('saved-two')
+ expect(getDraft('saved-two').attachments).toEqual([])
+ gateway.results['session.resume'] = { session_id: 'runtime-one', stored_session_id: 'saved-one' }
+ await resumeSession('saved-one')
+ expect(getDraft('saved-one').attachments[0]?.name).toBe('notes.txt')
+ await submitPrompt(getDraft('saved-one').text)
+ expect($transcript.get().nodes.find(node => node.kind === 'user')).toMatchObject({ files: [{ name: 'notes.txt' }] })
+ expect(getDraft('saved-one').attachments).toEqual([])
+ })
+
+ it('restores saved text and warns about uploads after a replacement runtime attaches', async () => {
+ const gateway = await connect({
+ 'session.resume': { session_id: 'runtime-one', stored_session_id: 'saved' },
+ 'file.attach': { attached: true, id: 4, name: 'notes.txt' },
+ })
+ await resumeSession('saved')
+ setDraftText('saved', 'Read [File #4] carefully')
+ await attachFile(new Blob(['alpha']), 'notes.txt')
+ $sessionId.set(null)
+ gateway.results['session.resume'] = { session_id: 'replacement', stored_session_id: 'saved' }
+ await resumeSession('saved')
+ expect(getDraft('saved')).toEqual({ text: 'Read carefully', attachments: [] })
+ expect($notice.get().text).toContain('Attach files again')
+ })
+
it('uploads the bytes and carries the card into the user row while the wire prompt stays text', async () => {
const gateway = await connect({ 'file.attach': { attached: true, id: 4, name: 'notes.txt' } })
await createSession()
diff --git a/ui-web/src/state/actions.ts b/ui-web/src/state/actions.ts
index e56faca24..9845a7a9d 100644
--- a/ui-web/src/state/actions.ts
+++ b/ui-web/src/state/actions.ts
@@ -9,6 +9,7 @@
import { GatewayClient, type ConnectionState } from '../gateway/client.ts'
import { apiGet, resolveBackend, type BackendTarget } from '../gateway/boot.ts'
+import { addDraftAttachment, adoptDraft, clearDraftAttachments, getDraft, resetDrafts } from './drafts.ts'
import type {
ApprovalChoice,
CommandEntry,
@@ -120,9 +121,6 @@ function markSessionUsed(): void {
if (remembered !== null && remembered.live === $sessionId.get()) rememberSession({ ...remembered, used: true })
}
-// The backend owns sending images; keep their bytes here only for the local
-// user row, including prompts waiting in the queue. Drained with the prompt.
-let pendingAttachments: Attachment[] = []
export function gateway(): GatewayClient {
if (client === null) throw new Error('gateway not started')
@@ -133,7 +131,7 @@ export function gateway(): GatewayClient {
/** Test seam: install a client with an injected socket factory. */
export function setGatewayClient(next: GatewayClient | null): void {
client = next
- pendingAttachments = []
+ resetDrafts()
}
function notice(text: string, tone: 'error' | 'info' = 'info'): void {
@@ -143,7 +141,6 @@ function notice(text: string, tone: 'error' | 'info' = 'info'): void {
function beginSessionNavigation(): void {
sessionNavigationEpoch += 1
attachInFlight = null
- pendingAttachments = []
notice('')
}
@@ -700,6 +697,8 @@ function adoptSession(result: SessionResumeResult): void {
// report the row that runtime replayed, and the highlight would jump.
const clicked = $storedSessionId.get()
const row = clicked !== null && clicked === result.session_id ? clicked : (result.stored_session_id ?? result.session_id)
+ const draftSource = clicked ?? 'welcome'
+ if (adoptDraft(draftSource, row, result.session_id)) notice('Draft restored. Attach files again after reconnecting the agent.')
$storedSessionId.set(row)
rememberSession({
live: result.session_id,
@@ -804,7 +803,7 @@ export async function clearSession(): Promise
{showLanes && (
- )),
+ }),
)}
)
@@ -321,6 +385,7 @@ export function Sidebar({ collapsed }: SidebarProps) {
keep={keep}
liveId={liveId}
project={project}
+ searching={searching}
/>
)}