@@ -199,11 +207,7 @@ function WelcomeState({
needs.
- Ask the{' '}
-
- Agent
- {' '}
- to build widgets on the{' '}
+ Ask the agent to build widgets on the{' '}
Overview
{' '}
@@ -251,7 +255,7 @@ function ExploreWorkspaceState({ agent, disabled = false, onSelectPrompt }: Prom
)
}
-function EmptyState({ agent }: AgentStateProps) {
+function OverviewEmptyState({ agent }: AgentStateProps) {
return (
@@ -261,6 +265,16 @@ function EmptyState({ agent }: AgentStateProps) {
)
}
+function TabEmptyState({ agent }: AgentStateProps) {
+ return (
+
+
+ Chat with your agent and manage the view from here
+
+
+ )
+}
+
type WelcomeTermProps = {
children: string
destination: WelcomeDestination
diff --git a/client/features/chat/messages/ExploreWorkspaceState.test.tsx b/client/features/chat/messages/ExploreWorkspaceState.test.tsx
index 01fdb4c5..cd30fd30 100644
--- a/client/features/chat/messages/ExploreWorkspaceState.test.tsx
+++ b/client/features/chat/messages/ExploreWorkspaceState.test.tsx
@@ -53,7 +53,7 @@ describe('ExploreWorkspaceState', () => {
expect(html).not.toContain('Wait for me to choose')
const context = renderMoiContext({
- activeTab: 'agent',
+ activeTab: { id: 'overview' },
directives: [...WORKSPACE_ANALYSIS_PROMPT.context]
})
expect(context).toContain('Explore the existing workspace files')
diff --git a/client/features/chat/messages/WelcomeState.test.tsx b/client/features/chat/messages/WelcomeState.test.tsx
index a7470ff0..d202fcac 100644
--- a/client/features/chat/messages/WelcomeState.test.tsx
+++ b/client/features/chat/messages/WelcomeState.test.tsx
@@ -39,12 +39,12 @@ describe('WelcomeState', () => {
expect(renderedParagraphs(html)).toEqual([
'moi is the personal workspace built for you by your agent. It grows and adapts to your needs.',
- 'Ask the Agent to build widgets on the Overview page, or more complex tools as separate Views. Use Scratchpad for exploring and shaping ideas with your agent.',
+ 'Ask the agent to build widgets on the Overview page, or more complex tools as separate Views. Use Scratchpad for exploring and shaping ideas with your agent.',
'Try an example:'
])
})
- test('renders four inline tab actions and three prompt bubbles with icons', () => {
+ test('renders three inline tab actions and three prompt bubbles with icons', () => {
const html = renderWelcome()
const welcomeTerms = [...html.matchAll(/]+data-welcome-destination.*?<\/button>/gs)]
@@ -52,9 +52,9 @@ describe('WelcomeState', () => {
...html.matchAll(/]+data-welcome-destination).*?<\/button>/gs)
]
- expect(welcomeTerms).toHaveLength(4)
+ expect(welcomeTerms).toHaveLength(3)
expect(welcomeTerms.every(([term]) => term.includes(' {
expect(html).not.toContain('workspace-local SQLite database')
const context = renderMoiContext({
- activeTab: 'agent',
+ activeTab: { id: 'overview' },
directives: [...CHAT_WELCOME_PROMPTS[0].context]
})
expect(context).toContain('# This message only')
diff --git a/client/features/chat/messages/fork-history.test.ts b/client/features/chat/messages/fork-history.test.ts
new file mode 100644
index 00000000..7d3f15ff
--- /dev/null
+++ b/client/features/chat/messages/fork-history.test.ts
@@ -0,0 +1,62 @@
+import { expect, test } from 'bun:test'
+import { emptyViewState } from '@/lib/format'
+import type { SessionRecord, Turn } from '@/lib/types'
+import { visibleForkHistory } from './fork-history'
+
+const fork: SessionRecord = {
+ forkedFromSessionId: 'parent',
+ forkedThroughMessageId: 'child-boundary',
+ forkedNoticeIds: ['old-notice']
+}
+const turn = (id: string): Turn => ({
+ id,
+ role: 'user',
+ origin: { kind: 'user-input' },
+ parts: [{ type: 'text', text: id }],
+ timestamp: '2026-09-17T12:00:00Z'
+})
+
+test('forked chat starts empty without changing its native history', () => {
+ const view = { ...emptyViewState(), turns: [turn('inherited'), turn('child-boundary')] }
+ expect(visibleForkHistory(view, fork).turns).toEqual([])
+ expect(view.turns).toHaveLength(2)
+})
+
+test('shows only new turns after the child replay boundary', () => {
+ const view = {
+ ...emptyViewState(),
+ turns: [turn('inherited'), turn('child-boundary'), turn('new')]
+ }
+ expect(visibleForkHistory(view, fork).turns.map(turn => turn.id)).toEqual(['new'])
+ expect(visibleForkHistory(view)).toBe(view)
+})
+
+test('missing boundary in the loaded transcript shows its full history', () => {
+ const view = { ...emptyViewState(), turns: [turn('inherited')] }
+ expect(visibleForkHistory(view, fork)).toBe(view)
+})
+
+test('an empty source needs no synthetic first message', () => {
+ const emptyFork: SessionRecord = { forkedFromSessionId: 'parent' }
+ expect(visibleForkHistory(emptyViewState(), emptyFork).turns).toEqual([])
+ const view = { ...emptyViewState(), turns: [turn('new')] }
+ expect(visibleForkHistory(view, emptyFork)).toBe(view)
+})
+
+test('a failed cutoff read leaves inherited history visible', () => {
+ const view = { ...emptyViewState(), turns: [turn('inherited')] }
+ expect(visibleForkHistory(view, { forkedFromSessionId: 'parent' })).toBe(view)
+})
+
+test('hides inherited notices and keeps new ones', () => {
+ const view = {
+ ...emptyViewState(),
+ turns: [turn('child-boundary')],
+ notices: ['old-notice', 'new-notice'].map(id => ({
+ id,
+ kind: 'compact' as const,
+ at: '2026-09-17T12:00:00Z'
+ }))
+ }
+ expect(visibleForkHistory(view, fork).notices.map(notice => notice.id)).toEqual(['new-notice'])
+})
diff --git a/client/features/chat/messages/fork-history.ts b/client/features/chat/messages/fork-history.ts
new file mode 100644
index 00000000..c19ad724
--- /dev/null
+++ b/client/features/chat/messages/fork-history.ts
@@ -0,0 +1,14 @@
+import type { SessionRecord, ViewState } from '@/lib/types'
+
+export function visibleForkHistory(view: ViewState, session?: SessionRecord): ViewState {
+ if (!session?.forkedFromSessionId || !session.forkedThroughMessageId) return view
+ const cutoff = session.forkedThroughMessageId
+ const index = view.turns.findIndex(turn => turn.id === cutoff)
+ if (index < 0) return view
+ const forkedNoticeIds = new Set(session.forkedNoticeIds)
+ return {
+ ...view,
+ turns: view.turns.slice(index + 1),
+ notices: view.notices.filter(notice => !forkedNoticeIds.has(notice.id))
+ }
+}
diff --git a/client/features/chat/sessions/ChatSelector.test.ts b/client/features/chat/sessions/ChatSelector.test.ts
index f35a4d52..f80c1233 100644
--- a/client/features/chat/sessions/ChatSelector.test.ts
+++ b/client/features/chat/sessions/ChatSelector.test.ts
@@ -3,7 +3,7 @@ import { describe, expect, test } from 'bun:test'
import type { SessionInfo } from '@/lib/types'
import { removeArchivedSession } from './api'
-import { groupSessionsByDate, sessionBadge } from './ChatSelector'
+import { groupSessionsByDate, groupSessionsForTab, sessionBadge } from './ChatSelector'
function session(sessionId: string, summary: string, lastModified: string): SessionInfo {
return {
@@ -71,6 +71,81 @@ describe('groupSessionsByDate', () => {
})
})
+describe('groupSessionsForTab', () => {
+ const now = new Date(2026, 6, 30, 12)
+ const sessions: SessionInfo[] = [
+ { sessionId: 'generic', summary: 'Generic', lastModified: now.getTime() - 3 },
+ { sessionId: 'view', summary: 'View', lastModified: now.getTime(), tabId: 'views/words' },
+ {
+ sessionId: 'scratchpad',
+ summary: 'Sketch',
+ lastModified: now.getTime() - 1,
+ tabId: 'scratchpad'
+ },
+ {
+ sessionId: 'overview',
+ summary: 'Overview',
+ lastModified: now.getTime() - 2,
+ tabId: 'overview'
+ }
+ ]
+
+ test('Overview shows chats outside views, grouped by day and newest first', () => {
+ const groups = groupSessionsForTab(
+ [
+ ...sessions,
+ {
+ sessionId: 'agent',
+ summary: 'Agent',
+ lastModified: now.getTime() - 4,
+ tabId: 'agent'
+ },
+ {
+ sessionId: 'older',
+ summary: 'Older',
+ lastModified: new Date(2026, 6, 29, 12).getTime(),
+ tabId: 'scratchpad'
+ },
+ {
+ sessionId: 'deleted-view',
+ summary: 'Deleted view',
+ lastModified: now.getTime() - 5,
+ tabId: 'views/deleted'
+ }
+ ],
+ 'overview',
+ now
+ )
+ expect(
+ groups.map(group => [group.label, group.sessions.map(session => session.sessionId)])
+ ).toEqual([
+ ['Today', ['scratchpad', 'overview', 'generic', 'agent']],
+ ['Yesterday', ['older']]
+ ])
+ expect(sessions.map(session => session.sessionId)).toEqual([
+ 'generic',
+ 'view',
+ 'scratchpad',
+ 'overview'
+ ])
+ })
+
+ test('views and Scratchpad only show their own chats, grouped by date', () => {
+ for (const tabId of ['views/words', 'scratchpad'] as const) {
+ const groups = groupSessionsForTab(sessions, tabId, now)
+ expect(groups).toEqual([
+ {
+ key: '2026-6-30',
+ label: 'Today',
+ sessions: sessions.filter(session => session.tabId === tabId)
+ }
+ ])
+ }
+ expect(groupSessionsForTab(sessions, 'views/empty', now)).toEqual([])
+ expect(groupSessionsForTab([], 'overview', now)).toEqual([])
+ })
+})
+
describe('sessionBadge', () => {
const base = session('s1', 'A chat', new Date(2026, 6, 30, 8).toISOString())
diff --git a/client/features/chat/sessions/ChatSelector.tsx b/client/features/chat/sessions/ChatSelector.tsx
index 5476d341..44468235 100644
--- a/client/features/chat/sessions/ChatSelector.tsx
+++ b/client/features/chat/sessions/ChatSelector.tsx
@@ -1,18 +1,17 @@
import { useRef, useState } from 'react'
-import { IconArchive, IconChevronDown, IconEdit } from '@tabler/icons-react'
+import { IconArchive, IconEdit, IconHistory, IconPin, IconPinFilled } from '@tabler/icons-react'
import { useArchiveWorkspaceSession, useWorkspaceSessions } from './api'
import { useWorkspaceAgent } from '@/client/features/workspace/api'
import { useWorkspaceId } from '@/client/features/workspace/WorkspaceContext'
-import { useSelectedSession } from '@/client/features/chat/sessions/useSelectedSession'
-import { cn } from '@/client/lib/cn'
import {
- hasRunningBackgroundSession,
- isSessionRunning,
- liveStore,
- useLive
-} from '@/client/features/chat/chat-store'
-import type { SessionInfo } from '@/lib/types'
+ useSelectedSession,
+ useCurrentTabId,
+ usePinnedSession
+} from '@/client/features/chat/sessions/useSelectedSession'
+import { cn } from '@/client/lib/cn'
+import { isSessionRunning, liveStore, useLive } from '@/client/features/chat/chat-store'
+import type { SessionInfo, WorkspaceTabId } from '@/lib/types'
import { Button } from '@/client/components/ui/button'
import { toast } from '@/client/components/ui/toast'
@@ -23,17 +22,16 @@ import {
DropdownMenuGroup,
DropdownMenuItem,
DropdownMenuLabel,
- DropdownMenuSeparator,
DropdownMenuTrigger
} from '@/client/components/ui/dropdown-menu'
import { Spinner } from '@/client/components/ui/spinner'
type ChatSelectorProps = {
- isViewBuilder?: boolean
+ className?: string
}
-type ChatHeaderLabelProps = {
- label: string
+type SessionSelectorProps = ChatSelectorProps & {
+ sessions: SessionInfo[]
}
type ChatSessionGroup = {
@@ -42,10 +40,6 @@ type ChatSessionGroup = {
sessions: SessionInfo[]
}
-function ChatHeaderLabel({ label }: ChatHeaderLabelProps) {
- return {label}
-}
-
// One tiny text badge per row at most: a cron/subagent flavor wins; otherwise
// an external origin shows its provider lowercase (e.g. "irc", "telegram").
// Plain app chats get none.
@@ -239,33 +233,94 @@ export function groupSessionsByDate(sessions: SessionInfo[], now = new Date()):
return [...groups.values()]
}
-export function ChatSelector({ isViewBuilder = false }: ChatSelectorProps) {
- if (isViewBuilder) {
- return
+export function groupSessionsForTab(
+ sessions: SessionInfo[],
+ tabId: WorkspaceTabId,
+ now = new Date()
+): ChatSessionGroup[] {
+ return groupSessionsByDate(
+ sessions.filter(session =>
+ tabId === 'overview' ? !session.tabId?.startsWith('views/') : session.tabId === tabId
+ ),
+ now
+ )
+}
+
+export function ChatSelector({ className }: ChatSelectorProps) {
+ const workspaceId = useWorkspaceId()
+ const { pinnedSessionId, loaded, pin } = usePinnedSession()
+ const [selectedSessionId] = useSelectedSession()
+ const { data: sessions = [] } = useWorkspaceSessions(workspaceId)
+ if (!loaded) return null
+
+ if (pinnedSessionId) {
+ const title = sessions.find(session => session.sessionId === pinnedSessionId)?.summary
+ if (!title) return null
+ return (
+
+ {title}
+
+ pin(null)}
+ aria-label="Unpin chat"
+ aria-pressed={true}
+ >
+
+
+ }
+ />
+ Unpin chat
+
+
+ )
}
- return
+ return (
+
+
+ {selectedSessionId && (
+
+ pin(selectedSessionId)}
+ aria-label="Pin chat to workspace"
+ aria-pressed={false}
+ >
+
+
+ }
+ />
+ Pin chat to workspace
+
+ )}
+
+ )
}
-function SessionSelector() {
+function SessionSelector({ className, sessions }: SessionSelectorProps) {
const workspaceId = useWorkspaceId()
- const [selectedSession, selectSession] = useSelectedSession()
- const selectedSessionId = selectedSession ?? null
+ const tabId = useCurrentTabId()
+ const [selectedSessionId, selectSession] = useSelectedSession()
const [confirmingSessionId, setConfirmingSessionId] = useState(null)
- const { data: sessions = [] } = useWorkspaceSessions(workspaceId)
const canArchive = useWorkspaceAgent(workspaceId).data?.supportsArchiving === true
const archiveSession = useArchiveWorkspaceSession(workspaceId)
- const hasRunningBackgroundChat = useLive(state =>
- hasRunningBackgroundSession(state.activity, workspaceId, selectedSessionId)
- )
+ const sessionGroups = groupSessionsForTab(sessions, tabId)
- if (sessions.length === 0) {
- return
- }
-
- const active = sessions.find(s => s.sessionId === selectedSessionId)
- const label = active?.summary ?? 'New chat'
- const sessionGroups = groupSessionsByDate(sessions)
+ if (sessionGroups.length === 0 && !selectedSessionId) return null
function handleMenuOpenChange(open: boolean) {
if (!open) setConfirmingSessionId(null)
@@ -282,59 +337,63 @@ function SessionSelector() {
}
}
- return (
-
-
+
- {label}
- {hasRunningBackgroundChat ? (
-
- ) : (
-
- )}
+
}
/>
+ New chat
+
+ ) : (
+
+
+
+
+
+ }
+ />
+ }
+ />
+ History
+
- selectSession(null)}
- >
-
- New chat
-
- {sessionGroups.length > 0 && (
- <>
-
-
- {sessionGroups.map(group => (
-
- {group.label}
- {group.sessions.map(session => (
-
- ))}
-
+
+ {sessionGroups.map(group => (
+
+ {group.label}
+ {group.sessions.map(session => (
+
))}
-
-
- )}
+
+ ))}
+
+
+
Starting view chat…
+
+
{error}
+
+
+
+
+
+
+ {draft && (
+ void sketch.continueInChat()}
+ />
+ )}
+
+
+
+ {displayStatus === 'building' && (
+
+ )}
+ {displayStatus === 'starting' &&
}
+ {displayStatus === 'waiting' && (
+
+ )}
+ {displayStatus === 'failed' && (
+
+ )}
+
+ {draft && !controls.active && !hasStrokes && (
+
+
+ Sketch how the view should look
+
+ )}
+
+
+
The view needs your attention
+
+ {error ?? 'Open the chat to answer or ask the agent to continue'}
+
+
+
+
+
+
+
+ {children}
+
+ )
+}
diff --git a/client/features/views/ViewBuilder.test.tsx b/client/features/views/ViewBuilder.test.tsx
deleted file mode 100644
index 95f8a304..00000000
--- a/client/features/views/ViewBuilder.test.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import { describe, expect, test } from 'bun:test'
-import { createElement } from 'react'
-import { renderToStaticMarkup } from 'react-dom/server'
-
-import type { ViewBuilder as ViewBuilderData } from '@/lib/types'
-
-import { ViewBuilder } from './ViewBuilder'
-
-const builder: ViewBuilderData = {
- id: 'builder-1',
- status: 'draft',
- input: { requirements: '' },
- sessionId: 'session-1',
- createdAt: 1,
- updatedAt: 1
-}
-
-function renderBuilder(status: ViewBuilderData['status'], active = true): string {
- return renderToStaticMarkup(
- createElement(ViewBuilder, {
- active,
- builder: { ...builder, status },
- chatDocked: false,
- workspaceId: 'workspace-1',
- onEditingStart: () => undefined,
- onContinueInChat: () => undefined,
- onOpenChat: () => undefined,
- onDiscard: () => undefined
- })
- )
-}
-
-describe('ViewBuilder', () => {
- test('keeps an inactive draft mounted', () => {
- const active = renderBuilder('draft')
- const inactive = renderBuilder('draft', false)
-
- expect(active).toContain('Sketch how the view should look')
- expect(active).toContain('Drawing area')
- expect(inactive).toContain('Sketch how the view should look')
- expect(inactive).toContain('Drawing area')
- })
-
- test('keeps post-submit states mounted while inactive', () => {
- const waiting = renderBuilder('waiting')
- const building = renderBuilder('building')
-
- expect(waiting).toContain('The view needs your attention')
- expect(waiting).toContain('Drawing area')
- expect(building).toContain('Drawing area')
- expect(building).toContain('data-slot="spinner"')
- expect(renderBuilder('waiting', false)).toContain('The view needs your attention')
- expect(renderBuilder('building', false)).toContain('Drawing area')
- })
-
- test('leaves ready builders to the tab replacement flow', () => {
- expect(renderBuilder('ready')).toBe('')
- })
-})
diff --git a/client/features/views/ViewBuilder.tsx b/client/features/views/ViewBuilder.tsx
deleted file mode 100644
index a389e0c1..00000000
--- a/client/features/views/ViewBuilder.tsx
+++ /dev/null
@@ -1,239 +0,0 @@
-import type { ReactNode, Ref } from 'react'
-import { useImperativeHandle } from 'react'
-
-import { Button } from '@/client/components/ui/button'
-import { Spinner } from '@/client/components/ui/spinner'
-import { DrawingLayer } from '@/client/features/drawings/DrawingLayer'
-import { DrawingToolbar } from '@/client/features/drawings/DrawingToolbar'
-import {
- type DrawingControls,
- useDrawingHistoryState
-} from '@/client/features/drawings/useDrawingLayer'
-import {
- type ViewBuilderSketchController,
- useViewBuilderSketch
-} from '@/client/features/drawings/useViewBuilderSketch'
-import { cn } from '@/client/lib/cn'
-import type { ViewBuilder as ViewBuilderData } from '@/lib/types'
-import { viewBuilderTabId } from '@/lib/workspace-tabs'
-import { IconScribble } from '@tabler/icons-react'
-
-export type ViewBuilderHandle = {
- prepareSketchForSend: () => Promise
- resetSketch: () => Promise
-}
-
-type ViewBuilderProps = {
- ref?: Ref
- active: boolean
- builder: ViewBuilderData
- chatDocked: boolean
- workspaceId: string
- onEditingStart: () => void
- onContinueInChat: () => void
- onOpenChat: () => void
- onDiscard: () => void
-}
-
-export function ViewBuilder({
- ref,
- active,
- builder,
- chatDocked,
- workspaceId,
- onEditingStart,
- onContinueInChat,
- onOpenChat,
- onDiscard
-}: ViewBuilderProps) {
- const sketch = useViewBuilderSketch({
- active: active && builder.status === 'draft',
- builderId: builder.id,
- sessionId: builder.sessionId,
- source: viewBuilderTabId(builder.id),
- workspaceId,
- onEditingStart,
- onContinueInChat
- })
-
- useImperativeHandle(
- ref,
- () => ({
- prepareSketchForSend: sketch.prepareForSend,
- resetSketch: sketch.resetDocument
- }),
- [sketch.prepareForSend, sketch.resetDocument]
- )
-
- switch (builder.status) {
- case 'ready':
- return null
- case 'draft':
- case 'waiting':
- case 'building':
- return (
-
- )
- }
-}
-
-type ViewBuilderSketchSurfaceProps = {
- active: boolean
- chatDocked: boolean
- error?: string
- sketch: ViewBuilderSketchController
- status: Exclude
- onDiscard: () => void
- onOpenChat: () => void
-}
-
-function ViewBuilderSketchSurface({
- active,
- chatDocked,
- error,
- sketch,
- status,
- onDiscard,
- onOpenChat
-}: ViewBuilderSketchSurfaceProps) {
- const draft = status === 'draft'
-
- return (
-
- {draft &&
}
-
-
- {draft && (
- void sketch.continueInChat()}
- />
- )}
-
-
-
- {status === 'building' &&
}
- {status === 'waiting' && (
-
- )}
-
- {!controls.active && !hasStrokes && (
-
-
- Sketch how the view should look
-
- )}
-
-
-
The view needs your attention
-
- {error ?? 'Open the chat to answer or ask the agent to continue'}
-
-
-
-
-
-
-
- {children}
-
- )
-}
diff --git a/client/features/views/ViewManager.tsx b/client/features/views/ViewManager.tsx
index 0b998b10..d74ffd07 100644
--- a/client/features/views/ViewManager.tsx
+++ b/client/features/views/ViewManager.tsx
@@ -29,7 +29,7 @@ import { AppletPresenceProvider } from '@/client/features/collab'
import { useWorkspaceId } from '@/client/features/workspace/WorkspaceContext'
import { cn } from '@/client/lib/cn'
import { useLatestRef } from '@/client/lib/use-latest-ref'
-import type { ViewInfo } from '@/lib/types'
+import type { CompiledView } from '@/lib/types'
import {
nextEvictionDelay,
@@ -39,7 +39,7 @@ import {
} from './view-residency'
type ViewManagerProps = {
- views: ViewInfo[]
+ views: CompiledView[]
// The view the active tab names, or null when another tab is on screen. The
// manager stays mounted either way — that is what makes coming back from the
// agent or Overview tab instant too.
@@ -83,7 +83,7 @@ export const ViewManager = memo(function ViewManager({
// The views mounted right now: the active one, plus the recently-visited ones
// parked offscreen. The policy (and its timing) lives in view-residency.ts.
-function useResidentViews(activeId: string | null, views: ViewInfo[]): ResidentView[] {
+function useResidentViews(activeId: string | null, views: CompiledView[]): ResidentView[] {
const [residents, setResidents] = useState([])
// A workspace refetch hands us a new array on every event; residency only
// cares whether a view appeared or disappeared. So the effect keys off the id
@@ -119,7 +119,7 @@ function useResidentViews(activeId: string | null, views: ViewInfo[]): ResidentV
}
type ViewSlotProps = {
- view: ViewInfo
+ view: CompiledView
active: boolean
params: Record
}
@@ -191,8 +191,8 @@ function ViewSlot({ view, active, params }: ViewSlotProps) {
}
type ViewFrameProps = {
- view: ViewInfo
- build: ViewBuild
+ view: CompiledView
+ build: LoadedViewVersion
params: Record
// Play the rebuild dissolve. Set on the incoming build only, and only while
// the build it replaced is still rendered underneath it.
@@ -237,7 +237,7 @@ function ViewFrame({ view, build, params, entering, current = false }: ViewFrame
)
}
-type ViewBuild = {
+type LoadedViewVersion = {
Component: ComponentType
version: number
}
@@ -248,11 +248,11 @@ type LoadedBundle = {
// spinner every time the agent edits it is worse than showing the previous
// build for that moment. The splash is for a view with nothing to show yet —
// the first time it is opened.
- current: ViewBuild | null
+ current: LoadedViewVersion | null
// The build `current` just replaced, kept underneath for the length of the
// dissolve so the new one fades in over the view instead of over an empty
// panel. Null except during a rebuild swap on screen.
- outgoing: ViewBuild | null
+ outgoing: LoadedViewVersion | null
}
// How long the outgoing build stays underneath. Matches the `duration-200` the
diff --git a/client/features/views/api.ts b/client/features/views/api.ts
index f7caa172..ab29dbc8 100644
--- a/client/features/views/api.ts
+++ b/client/features/views/api.ts
@@ -1,117 +1,78 @@
+import type { MessageAttachment, PendingView, SelectedSessionScope, ViewInfo } from '@/lib/types'
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
-
import { jsonRequest, requestJson, requestVoid } from '@/client/api/http'
import { WORKSPACE_RESOURCE_OPTIONS } from '@/client/api/query-options'
import { workspaceKeys } from '@/client/api/workspace-keys'
-import { APP_ICON_IDS } from '@/client/lib/app-icon-registry'
import { useWorkspaceEvent } from '@/client/runtime/useWorkspaceEvents'
-import type { MessageAttachment, SelectedSessionScope, ViewBuilder, ViewInfo } from '@/lib/types'
export function useViews(workspaceId: string) {
+ const queryClient = useQueryClient()
+ useWorkspaceEvent(event => {
+ if (
+ (event.type === 'views:changed' || event.type === 'view:deleted') &&
+ event.workspaceId === workspaceId
+ ) {
+ void queryClient.invalidateQueries({ queryKey: workspaceKeys.views(workspaceId) })
+ if (event.type === 'view:deleted')
+ void queryClient.invalidateQueries({ queryKey: workspaceKeys.sessions(workspaceId) })
+ }
+ })
return useQuery({
queryKey: workspaceKeys.views(workspaceId),
- queryFn: async () => {
- const data = await requestJson<{ views: ViewInfo[] }>(`/api/workspaces/${workspaceId}/views`)
- return data.views
- },
+ queryFn: async () =>
+ (await requestJson<{ views: ViewInfo[] }>(`/api/workspaces/${workspaceId}/views`)).views,
...WORKSPACE_RESOURCE_OPTIONS
})
}
-
-export function useRenameView(workspaceId: string) {
- return useMutation({
- mutationFn: ({ viewId, title }) =>
- requestJson(
- `/api/workspaces/${workspaceId}/views/${encodeURIComponent(viewId)}`,
- jsonRequest('PATCH', { title }),
- 'Failed to rename view'
- )
- })
-}
-
-export function useDeleteView(workspaceId: string) {
- return useMutation({
- mutationFn: viewId =>
- requestVoid(
- `/api/workspaces/${workspaceId}/views/${encodeURIComponent(viewId)}`,
- { method: 'DELETE' },
- 'Failed to delete view'
- )
+function useViewMutation(workspaceId: string, mutationFn: (input: Input) => Promise) {
+ const queryClient = useQueryClient()
+ return useMutation({
+ mutationFn,
+ onSuccess: () => queryClient.invalidateQueries({ queryKey: workspaceKeys.views(workspaceId) })
})
}
-
-function upsertBuilder(builders: ViewBuilder[] | undefined, builder: ViewBuilder): ViewBuilder[] {
- const current = builders ?? []
- const index = current.findIndex(candidate => candidate.id === builder.id)
- if (index === -1) return [...current, builder]
- return current.map(candidate =>
- candidate.id === builder.id && candidate.updatedAt <= builder.updatedAt ? builder : candidate
+export function useRenameView(workspaceId: string) {
+ return useViewMutation(workspaceId, ({ viewId, title }: { viewId: string; title: string }) =>
+ requestJson(
+ `/api/workspaces/${workspaceId}/views/${encodeURIComponent(viewId)}`,
+ jsonRequest('PATCH', { title }),
+ 'Couldn’t rename view'
+ )
)
}
-
-export function useViewBuilders(workspaceId: string) {
- const queryClient = useQueryClient()
- useWorkspaceEvent(event => {
- if (event.type === 'view-builder:updated' && event.workspaceId === workspaceId) {
- queryClient.setQueryData(workspaceKeys.viewBuilders(workspaceId), current =>
- upsertBuilder(current, event.builder)
- )
- } else if (event.type === 'view-builder:deleted' && event.workspaceId === workspaceId) {
- queryClient.setQueryData(workspaceKeys.viewBuilders(workspaceId), current =>
- (current ?? []).filter(builder => builder.id !== event.builderId)
- )
- }
- })
-
- return useQuery({
- queryKey: workspaceKeys.viewBuilders(workspaceId),
- queryFn: async () => {
- const data = await requestJson<{ builders: ViewBuilder[] }>(
- `/api/workspaces/${workspaceId}/view-builders`
- )
- return data.builders
- },
- ...WORKSPACE_RESOURCE_OPTIONS
- })
+export function useDeleteView(workspaceId: string) {
+ return useViewMutation(workspaceId, (viewId: string) =>
+ requestVoid(
+ `/api/workspaces/${workspaceId}/views/${encodeURIComponent(viewId)}`,
+ { method: 'DELETE' },
+ 'Couldn’t delete view'
+ )
+ )
}
-
-export function useCreateViewBuilder(workspaceId: string) {
- const queryClient = useQueryClient()
- return useMutation({
- mutationFn: () =>
- requestJson(
- `/api/workspaces/${workspaceId}/view-builders`,
- jsonRequest('POST'),
- 'Failed to create view builder'
- ),
- onSuccess: builder => {
- queryClient.setQueryData(workspaceKeys.viewBuilders(workspaceId), current =>
- upsertBuilder(current, builder)
- )
- }
- })
+export function useCreateView(workspaceId: string) {
+ return useViewMutation(workspaceId, () =>
+ requestJson(
+ `/api/workspaces/${workspaceId}/views`,
+ jsonRequest('POST'),
+ 'Couldn’t create view'
+ )
+ )
}
-
-export function useSaveViewBuilder(workspaceId: string) {
- const queryClient = useQueryClient()
- return useMutation({
- mutationFn: ({ builderId, requirements }) =>
- requestJson(
- `/api/workspaces/${workspaceId}/view-builders/${builderId}`,
- jsonRequest('PATCH', { input: { requirements } }),
- 'Failed to save view requirements'
- ),
- onSuccess: builder => {
- queryClient.setQueryData(workspaceKeys.viewBuilders(workspaceId), current =>
- upsertBuilder(current, builder)
+export function useSaveViewDraft(workspaceId: string) {
+ return useViewMutation(
+ workspaceId,
+ ({ viewId, requirements }: { viewId: string; requirements: string }) =>
+ requestJson(
+ `/api/workspaces/${workspaceId}/views/${viewId}`,
+ jsonRequest('PATCH', { requirements }),
+ 'Couldn’t save view requirements'
)
- }
- })
+ )
}
-
-export type SubmitViewBuilderInput = {
- builderId: string
+export type SubmitViewInput = {
+ viewId: string
requirements: string
+ sessionId: string
optimisticId: string
selectedSessionScope?: SelectedSessionScope
attachments?: MessageAttachment[]
@@ -120,41 +81,13 @@ export type SubmitViewBuilderInput = {
fastMode?: boolean
stream?: boolean
}
-
-export function useSubmitViewBuilder(workspaceId: string) {
- const queryClient = useQueryClient()
- return useMutation({
- mutationFn: ({ builderId, requirements, ...options }) =>
- requestJson(
- `/api/workspaces/${workspaceId}/view-builders/${builderId}/submit`,
- jsonRequest('POST', {
- input: { requirements },
- availableIcons: APP_ICON_IDS,
- ...options
- }),
- 'Failed to start view builder'
- ),
- onSuccess: builder => {
- queryClient.setQueryData(workspaceKeys.viewBuilders(workspaceId), current =>
- upsertBuilder(current, builder)
- )
- }
- })
-}
-
-export function useDiscardViewBuilder(workspaceId: string) {
- const queryClient = useQueryClient()
- return useMutation({
- mutationFn: builderId =>
- requestVoid(
- `/api/workspaces/${workspaceId}/view-builders/${builderId}`,
- { method: 'DELETE' },
- 'Failed to discard view builder'
- ),
- onSuccess: (_result, builderId) => {
- queryClient.setQueryData(workspaceKeys.viewBuilders(workspaceId), current =>
- (current ?? []).filter(builder => builder.id !== builderId)
- )
- }
- })
+export function useSubmitView(workspaceId: string) {
+ return useViewMutation(workspaceId, ({ viewId, ...input }: SubmitViewInput) =>
+ requestJson<{ viewId: string; sessionId: string }>(
+ `/api/workspaces/${workspaceId}/views/${viewId}/submit`,
+ jsonRequest('POST', input),
+ 'Couldn’t start view chat'
+ )
+ )
}
+export const useDiscardView = useDeleteView
diff --git a/client/features/views/useViewActions.ts b/client/features/views/useViewActions.ts
new file mode 100644
index 00000000..5628407d
--- /dev/null
+++ b/client/features/views/useViewActions.ts
@@ -0,0 +1,151 @@
+import { useUiStore } from '@/client/store/ui'
+import { draftSessionId, composerDraftKey } from '@/lib/session-drafts'
+import { useQueryClient } from '@tanstack/react-query'
+
+import {
+ prepareOptimisticSend,
+ moveChatDraft,
+ finishComposerSend,
+ attachmentsForSend,
+ resolveChatRunOptions,
+ startOptimisticSession
+} from '@/client/features/chat/chat-send'
+import {
+ optimisticallySetSelectedSession,
+ renameSelectedSessionInCache,
+ usePinnedSession
+} from '@/client/features/chat/sessions/useSelectedSession'
+import { workspaceKeys } from '@/client/api/workspace-keys'
+import { useCollabEnabled } from '@/client/features/collab'
+import { useWorkspaceAgent } from '@/client/features/workspace/api'
+import { useWorkspaceLayoutCtx } from '@/client/features/workspace/WorkspaceLayoutContext'
+import {
+ useCreateView,
+ useDiscardView,
+ useSaveViewDraft,
+ useSubmitView
+} from '@/client/features/views/api'
+import { recoverViewSubmission } from './view-submission'
+import type { PendingView, SessionRecord, ViewInfo } from '@/lib/types'
+import { viewTabId } from '@/lib/workspace-tabs'
+
+export function useViewActions() {
+ const queryClient = useQueryClient()
+ const collabEnabled = useCollabEnabled()
+ const selectionScope = collabEnabled ? 'browser-tab' : 'shared'
+ const { workspaceId, layout } = useWorkspaceLayoutCtx()
+ const { pinnedSessionId } = usePinnedSession()
+ const modelData = useWorkspaceAgent(workspaceId).data
+ const createMutation = useCreateView(workspaceId)
+ const saveMutation = useSaveViewDraft(workspaceId)
+ const submitMutation = useSubmitView(workspaceId)
+ const discardMutation = useDiscardView(workspaceId)
+
+ const create = () => createMutation.mutateAsync()
+
+ const save = (viewId: string, requirements: string) =>
+ saveMutation.mutateAsync({ viewId, requirements })
+
+ const submit = async (pendingView: PendingView, requirements: string) => {
+ const text = requirements.trim()
+ const draftId = pinnedSessionId ?? draftSessionId(viewTabId(pendingView.id))
+ const sessionId = pinnedSessionId ?? crypto.randomUUID()
+ const attachments = attachmentsForSend(workspaceId, draftId)
+ if (!text && attachments.length === 0) return
+
+ if (!pinnedSessionId)
+ startOptimisticSession({
+ tabId: viewTabId(pendingView.id),
+ queryClient,
+ workspaceId,
+ sessionId,
+ text,
+ filenames: attachments.map(attachment => attachment.label)
+ })
+ if (!pinnedSessionId) {
+ moveChatDraft(workspaceId, draftId, sessionId)
+ optimisticallySetSelectedSession(
+ queryClient,
+ workspaceId,
+ sessionId,
+ viewTabId(pendingView.id),
+ selectionScope
+ )
+ }
+ const prepared = prepareOptimisticSend(
+ { queryClient, workspaceId, sessionId, text },
+ attachments
+ )
+
+ const config = queryClient.getQueryData(
+ workspaceKeys.session(workspaceId, sessionId)
+ )?.config
+ const { model, effort, fastMode, stream } = resolveChatRunOptions(
+ modelData,
+ config?.model ?? layout.selectedModel,
+ config?.effort ?? layout.selectedEffort,
+ config?.fastMode ?? layout.selectedFastMode
+ )
+
+ queryClient.setQueryData(workspaceKeys.views(workspaceId), views =>
+ views?.map(view =>
+ view.id === pendingView.id && view.status === 'draft'
+ ? { ...view, status: 'starting', requirements: text, executionSessionId: sessionId }
+ : view
+ )
+ )
+
+ try {
+ const result = await submitMutation.mutateAsync({
+ viewId: pendingView.id,
+ sessionId,
+ requirements: text,
+ optimisticId: prepared.optimisticId,
+ selectedSessionScope: selectionScope,
+ ...(attachments.length > 0
+ ? {
+ attachments: prepared.attachments
+ }
+ : {}),
+ model,
+ effort,
+ fastMode,
+ stream
+ })
+ moveChatDraft(workspaceId, sessionId, result.sessionId)
+ renameSelectedSessionInCache(queryClient, workspaceId, sessionId, result.sessionId)
+ if (!pinnedSessionId)
+ optimisticallySetSelectedSession(
+ queryClient,
+ workspaceId,
+ result.sessionId,
+ viewTabId(pendingView.id),
+ selectionScope
+ )
+ finishComposerSend(workspaceId, attachments)
+ const draftKey = composerDraftKey(workspaceId, result.sessionId)
+ const ui = useUiStore.getState()
+ if (ui.composerDrafts[draftKey]?.trim() === text) ui.setComposerDraft(draftKey, null)
+ } catch (error) {
+ await recoverViewSubmission(
+ queryClient,
+ workspaceId,
+ pendingView.id,
+ sessionId,
+ text,
+ !!pinnedSessionId,
+ selectionScope
+ )
+ throw error
+ }
+ }
+
+ const discard = (viewId: string) => discardMutation.mutateAsync(viewId)
+
+ return {
+ create,
+ save,
+ submit,
+ discard
+ }
+}
diff --git a/client/features/views/useViewBuilderActions.ts b/client/features/views/useViewBuilderActions.ts
deleted file mode 100644
index 543a844d..00000000
--- a/client/features/views/useViewBuilderActions.ts
+++ /dev/null
@@ -1,103 +0,0 @@
-import { useQueryClient } from '@tanstack/react-query'
-
-import {
- prepareDraftAttachments,
- attachmentsForSend,
- resolveChatRunOptions,
- startOptimisticSession,
- startOptimisticTurn
-} from '@/client/features/chat/chat-send'
-import { liveStore } from '@/client/features/chat/chat-store'
-import { useSelectedSession } from '@/client/features/chat/sessions/useSelectedSession'
-import { useCollabEnabled } from '@/client/features/collab'
-import { useWorkspaceAgent } from '@/client/features/workspace/api'
-import { useWorkspaceLayoutCtx } from '@/client/features/workspace/WorkspaceLayoutContext'
-import {
- useCreateViewBuilder,
- useDiscardViewBuilder,
- useSaveViewBuilder,
- useSubmitViewBuilder
-} from '@/client/features/views/api'
-import type { ViewBuilder } from '@/lib/types'
-
-export function useViewBuilderActions() {
- const queryClient = useQueryClient()
- const { workspaceId, layout } = useWorkspaceLayoutCtx()
- const [, selectSession] = useSelectedSession()
- const collabEnabled = useCollabEnabled()
- const modelData = useWorkspaceAgent(workspaceId).data
- const createMutation = useCreateViewBuilder(workspaceId)
- const saveMutation = useSaveViewBuilder(workspaceId)
- const submitMutation = useSubmitViewBuilder(workspaceId)
- const discardMutation = useDiscardViewBuilder(workspaceId)
-
- const create = () => createMutation.mutateAsync()
-
- const save = (builderId: string, requirements: string) =>
- saveMutation.mutateAsync({ builderId, requirements })
-
- const submit = async (builder: ViewBuilder, requirements: string) => {
- const text = requirements.trim()
- const attachments = attachmentsForSend(workspaceId, builder.sessionId)
- if (!text && attachments.length === 0) return
-
- startOptimisticSession({
- queryClient,
- workspaceId,
- sessionId: builder.sessionId,
- text,
- filenames: attachments.map(attachment => attachment.label)
- })
- const prepared = prepareDraftAttachments(attachments)
- const parts = [...prepared.parts]
- if (text) parts.push({ type: 'text', text })
-
- const optimisticId = startOptimisticTurn({
- queryClient,
- workspaceId,
- sessionId: builder.sessionId,
- parts
- })
- selectSession(builder.sessionId)
-
- const { model, effort, fastMode, stream } = resolveChatRunOptions(
- modelData,
- layout.selectedModel,
- layout.selectedEffort,
- layout.selectedFastMode
- )
-
- try {
- await submitMutation.mutateAsync({
- builderId: builder.id,
- requirements: text,
- optimisticId,
- selectedSessionScope: collabEnabled ? 'browser-tab' : 'shared',
- ...(attachments.length > 0
- ? {
- attachments: prepared.attachments
- }
- : {}),
- model,
- effort,
- fastMode,
- stream
- })
- liveStore.getState().clearAttachments(workspaceId, builder.sessionId)
- } catch (error) {
- liveStore.getState().setActivity(workspaceId, builder.sessionId, 'idle')
- liveStore
- .getState()
- .setError(
- workspaceId,
- builder.sessionId,
- error instanceof Error ? error.message : 'Could not start view builder'
- )
- throw error
- }
- }
-
- const discard = (builderId: string) => discardMutation.mutateAsync(builderId)
-
- return { create, save, submit, discard }
-}
diff --git a/client/features/views/useViewBuilderDrafts.ts b/client/features/views/useViewBuilderDrafts.ts
deleted file mode 100644
index d8097b9e..00000000
--- a/client/features/views/useViewBuilderDrafts.ts
+++ /dev/null
@@ -1,68 +0,0 @@
-import { useCallback, useEffect, useRef } from 'react'
-
-import { toast } from '@/client/components/ui/toast'
-import { useLatestRef } from '@/client/lib/use-latest-ref'
-import { useUiStore } from '@/client/store/ui'
-import type { ViewBuilder } from '@/lib/types'
-
-type UseViewBuilderDraftsOptions = {
- builders: ViewBuilder[]
- onSave: (builderId: string, requirements: string) => Promise
-}
-
-// Builder draft text lives in the UI store and is subscribed from the
-// composer, so a keystroke re-renders only the composer — never the workspace
-// screen with its tab bar, Overview, mounted views, and builder canvases. This
-// hook owns the writes: the store update, the debounced server save, and the
-// cleanup when a builder leaves its draft state.
-export function useViewBuilderDrafts({ builders, onSave }: UseViewBuilderDraftsOptions) {
- const timersRef = useRef(new Map>())
- const buildersRef = useLatestRef(builders)
- const onSaveRef = useLatestRef(onSave)
-
- const clear = useCallback((builderId: string) => {
- const timer = timersRef.current.get(builderId)
- if (timer) clearTimeout(timer)
- timersRef.current.delete(builderId)
- useUiStore.getState().setViewBuilderDraft(builderId, null)
- }, [])
-
- const change = useCallback(
- (builderId: string, value: string) => {
- useUiStore.getState().setViewBuilderDraft(builderId, value)
- const existing = timersRef.current.get(builderId)
- if (existing) clearTimeout(existing)
- timersRef.current.set(
- builderId,
- setTimeout(() => {
- timersRef.current.delete(builderId)
- const builder = buildersRef.current.find(candidate => candidate.id === builderId)
- if (!builder || builder.status !== 'draft') return
- void onSaveRef.current(builderId, value).catch(() => {
- toast.add({ title: 'Couldn’t save view description', type: 'error' })
- })
- }, 500)
- )
- },
- [buildersRef, onSaveRef]
- )
-
- // Drop drafts for builders that left draft status through any path (submit
- // from another surface, server-side transition). Builders absent from the
- // list are cleared by the explicit discard/close paths, not here — the
- // store outlives this screen and may hold other workspaces' drafts.
- useEffect(() => {
- for (const builder of builders) {
- if (builder.status !== 'draft') clear(builder.id)
- }
- }, [builders, clear])
-
- useEffect(
- () => () => {
- for (const timer of timersRef.current.values()) clearTimeout(timer)
- },
- []
- )
-
- return { change, clear }
-}
diff --git a/client/features/views/useViewDrafts.ts b/client/features/views/useViewDrafts.ts
new file mode 100644
index 00000000..81794df9
--- /dev/null
+++ b/client/features/views/useViewDrafts.ts
@@ -0,0 +1,79 @@
+import { useCallback, useEffect, useRef } from 'react'
+import { toast } from '@/client/components/ui/toast'
+import { useLatestRef } from '@/client/lib/use-latest-ref'
+import { useUiStore } from '@/client/store/ui'
+import { composerDraftKey, draftSessionId } from '@/lib/session-drafts'
+import { viewTabId } from '@/lib/workspace-tabs'
+import type { PendingView } from '@/lib/types'
+
+type UseViewDraftsOptions = {
+ workspaceId: string
+ pendingViews: PendingView[]
+ onSave: (viewId: string, requirements: string) => Promise
+}
+
+// The composer owns local text. This hook seeds server-saved requirements and
+// autosaves changes without subscribing the workspace screen to keystrokes.
+export function useViewDrafts({ workspaceId, pendingViews, onSave }: UseViewDraftsOptions) {
+ const initializedRef = useRef(new Set())
+ const timersRef = useRef(new Map>())
+ const pendingViewsRef = useLatestRef(pendingViews)
+ const onSaveRef = useLatestRef(onSave)
+ const clear = useCallback(
+ (viewId: string) => {
+ clearTimeout(timersRef.current.get(viewId))
+ timersRef.current.delete(viewId)
+ useUiStore
+ .getState()
+ .setComposerDraft(composerDraftKey(workspaceId, draftSessionId(viewTabId(viewId))), null)
+ },
+ [workspaceId]
+ )
+
+ useEffect(() => {
+ for (const view of pendingViews) {
+ const draftId = draftSessionId(viewTabId(view.id))
+ const key = composerDraftKey(workspaceId, draftId)
+ useUiStore.getState().moveComposerDraft(draftId, key)
+ if (view.status !== 'draft') clear(view.id)
+ else if (!initializedRef.current.has(key)) {
+ initializedRef.current.add(key)
+ if (useUiStore.getState().composerDrafts[key] === undefined)
+ useUiStore.getState().setComposerDraft(key, view.requirements)
+ }
+ }
+ }, [workspaceId, pendingViews, clear])
+
+ useEffect(() => {
+ const timers = timersRef.current
+ const unsubscribe = useUiStore.subscribe((state, previous) => {
+ for (const view of pendingViewsRef.current) {
+ if (view.status !== 'draft') continue
+ const key = composerDraftKey(workspaceId, draftSessionId(viewTabId(view.id)))
+ const value = state.composerDrafts[key]
+ if (value === previous.composerDrafts[key]) continue
+ clearTimeout(timers.get(view.id))
+ timers.delete(view.id)
+ if (value === undefined) continue
+ timers.set(
+ view.id,
+ setTimeout(() => {
+ timers.delete(view.id)
+ if (pendingViewsRef.current.find(item => item.id === view.id)?.status !== 'draft')
+ return
+ void onSaveRef.current(view.id, value).catch(() => {
+ toast.add({ title: 'Couldn’t save view description', type: 'error' })
+ })
+ }, 500)
+ )
+ }
+ })
+ return () => {
+ unsubscribe()
+ for (const timer of timers.values()) clearTimeout(timer)
+ timers.clear()
+ }
+ }, [workspaceId, pendingViewsRef, onSaveRef])
+
+ return { clear }
+}
diff --git a/client/features/views/view-presentation.test.ts b/client/features/views/view-presentation.test.ts
index a8d6110e..80b41b70 100644
--- a/client/features/views/view-presentation.test.ts
+++ b/client/features/views/view-presentation.test.ts
@@ -1,36 +1,28 @@
import { describe, expect, test } from 'bun:test'
-import { IconArticle, IconCalendar, IconChartBar } from '@tabler/icons-react'
+import { IconArticle, IconCalendar } from '@tabler/icons-react'
-import type { ViewBuilder, ViewInfo } from '@/lib/types'
+import type { CompiledView, ViewConfig } from '@/lib/types'
import { getViewIcon, getViewLabel } from './view-presentation'
-const view = (config: ViewInfo['config']): ViewInfo => ({ id: 'roadmap', config })
+const view = (config: ViewConfig): CompiledView => ({
+ id: 'roadmap',
+ status: 'compiled',
+ ...config,
+ title: config.title || 'roadmap'
+})
describe('view presentation', () => {
test('uses the configured title and icon', () => {
const configured = view({ title: 'Roadmap', icon: 'calendar' })
expect(getViewLabel(configured)).toBe('Roadmap')
- expect(getViewIcon(configured, [])).toBe(IconCalendar)
+ expect(getViewIcon(configured)).toBe(IconCalendar)
})
- test('shares the builder and generic fallbacks used by workspace tabs', () => {
- const builder: ViewBuilder = {
- id: 'builder',
- kind: 'view',
- status: 'ready',
- input: { requirements: '' },
- sessionId: 'session',
- viewId: 'roadmap',
- icon: 'chart',
- createdAt: 0,
- updatedAt: 0
- }
-
+ test('uses generic defaults when config has no title or icon', () => {
expect(getViewLabel(view({}))).toBe('roadmap')
- expect(getViewIcon(view({}), [builder])).toBe(IconChartBar)
- expect(getViewIcon(view({}), [])).toBe(IconArticle)
+ expect(getViewIcon(view({}))).toBe(IconArticle)
})
})
diff --git a/client/features/views/view-presentation.ts b/client/features/views/view-presentation.ts
index b4eca099..48dab219 100644
--- a/client/features/views/view-presentation.ts
+++ b/client/features/views/view-presentation.ts
@@ -1,13 +1,12 @@
import { IconArticle, type TablerIcon } from '@tabler/icons-react'
import { resolveAppIcon } from '@/client/lib/app-icon-registry'
-import type { ViewBuilder, ViewInfo } from '@/lib/types'
+import type { ViewInfo } from '@/lib/types'
export function getViewLabel(view: ViewInfo): string {
- return view.config.title || view.id
+ return view.title || (view.status === 'compiled' ? view.id : 'New view')
}
-export function getViewIcon(view: ViewInfo, builders: readonly ViewBuilder[]): TablerIcon {
- const builder = builders.find(candidate => candidate.viewId === view.id)
- return resolveAppIcon(view.config.icon) ?? resolveAppIcon(builder?.icon) ?? IconArticle
+export function getViewIcon(view: ViewInfo): TablerIcon {
+ return resolveAppIcon(view.icon) ?? IconArticle
}
diff --git a/client/features/views/view-submission.test.ts b/client/features/views/view-submission.test.ts
new file mode 100644
index 00000000..2dc726bd
--- /dev/null
+++ b/client/features/views/view-submission.test.ts
@@ -0,0 +1,125 @@
+import type { SessionInfo, WorkspaceSessionSelection } from '@/lib/types'
+import { afterEach, expect, test } from 'bun:test'
+import { QueryClient } from '@tanstack/react-query'
+import { recoverViewSubmission } from './view-submission'
+import { liveStore, attachmentKey } from '@/client/features/chat/chat-store'
+import { useUiStore } from '@/client/store/ui'
+import { workspaceKeys } from '@/client/api/workspace-keys'
+import { appUiKeys } from '@/client/api/app-ui-keys'
+import { composerDraftKey, draftSessionId } from '@/lib/session-drafts'
+import type { StagedAttachment } from '@/client/features/chat/composer/attachments/types'
+
+const originalFetch = globalThis.fetch
+const workspaceId = 'recovery'
+const text = 'Build a gardening board'
+const attachment: StagedAttachment = {
+ kind: 'text',
+ localId: 'brief',
+ source: 'views/garden',
+ label: 'Brief',
+ text
+}
+
+afterEach(() => {
+ globalThis.fetch = originalFetch
+ liveStore.setState({ attachments: {}, activity: {}, errors: {} })
+ useUiStore.setState({ composerDrafts: {} })
+})
+
+function setup(status?: 'draft' | 'failed' | 'submitted') {
+ const qc = new QueryClient({ defaultOptions: { queries: { retry: false } } })
+ const selection = {
+ selected: status && status !== 'draft' ? { 'views/garden': 'native' } : {},
+ pinned: null
+ }
+ const requests: string[] = []
+ globalThis.fetch = (async (input: RequestInfo | URL) => {
+ const url = String(input)
+ requests.push(url)
+ if (!status) throw new Error('Offline')
+ return Response.json(
+ url.endsWith('/views')
+ ? {
+ views: [
+ {
+ id: 'garden',
+ status,
+ requirements: text,
+ executionSessionId: status === 'draft' ? undefined : 'native'
+ }
+ ]
+ }
+ : selection
+ )
+ }) as typeof fetch
+ liveStore.setState({
+ attachments: { [attachmentKey(workspaceId, 'temporary')]: [attachment] },
+ activity: { [`${workspaceId}:temporary`]: 'running' }
+ })
+ qc.setQueryData(workspaceKeys.sessions(workspaceId), [{ sessionId: 'temporary' }])
+ return { qc, requests, selection }
+}
+
+test('validation rejection restores fresh composer, prompt, and attachments', async () => {
+ const { qc, requests, selection } = setup('draft')
+ await recoverViewSubmission(qc, workspaceId, 'garden', 'temporary', text, false)
+ const draftId = draftSessionId('views/garden')
+ expect(liveStore.getState().attachments[attachmentKey(workspaceId, draftId)]).toEqual([
+ attachment
+ ])
+ expect(useUiStore.getState().composerDrafts[composerDraftKey(workspaceId, draftId)]).toBe(text)
+ expect(
+ qc.getQueryData(appUiKeys.sessionSelection(workspaceId))
+ ).toEqual(selection)
+ expect(qc.getQueryData(workspaceKeys.sessions(workspaceId))).toEqual([])
+ expect(requests).toHaveLength(2)
+})
+
+test('failed startup keeps the server chat and restores its draft after native rename', async () => {
+ const { qc, selection } = setup('failed')
+ liveStore.getState().renameSession(workspaceId, 'temporary', 'native')
+ await recoverViewSubmission(qc, workspaceId, 'garden', 'temporary', text, false)
+ expect(liveStore.getState().attachments[attachmentKey(workspaceId, 'native')]).toEqual([
+ attachment
+ ])
+ expect(useUiStore.getState().composerDrafts[composerDraftKey(workspaceId, 'native')]).toBe(text)
+ expect(
+ qc.getQueryData(appUiKeys.sessionSelection(workspaceId))
+ ).toEqual(selection)
+})
+
+test('lost response after accepted startup retains the chat without replaying or marking it idle', async () => {
+ const { qc, requests } = setup('submitted')
+ await recoverViewSubmission(qc, workspaceId, 'garden', 'temporary', text, false)
+ expect(liveStore.getState().activity[`${workspaceId}:native`]).toBe('running')
+ expect(liveStore.getState().attachments[attachmentKey(workspaceId, 'native')]).toEqual([
+ attachment
+ ])
+ expect(requests.every(url => !url.endsWith('/submit'))).toBe(true)
+})
+
+test('offline recovery preserves the draft and attachments without replaying', async () => {
+ const { qc, requests } = setup()
+ await recoverViewSubmission(qc, workspaceId, 'garden', 'temporary', text, false)
+ expect(liveStore.getState().attachments[attachmentKey(workspaceId, 'temporary')]).toEqual([
+ attachment
+ ])
+ expect(useUiStore.getState().composerDrafts[composerDraftKey(workspaceId, 'temporary')]).toBe(
+ text
+ )
+ expect(requests).toHaveLength(2)
+})
+
+test('rejected submission moves the existing composer draft back without replacing it', async () => {
+ const { qc } = setup('draft')
+ useUiStore.getState().setComposerDraft(composerDraftKey(workspaceId, 'temporary'), '')
+ await recoverViewSubmission(qc, workspaceId, 'garden', 'temporary', text, false)
+ expect(
+ useUiStore.getState().composerDrafts[
+ composerDraftKey(workspaceId, draftSessionId('views/garden'))
+ ]
+ ).toBe('')
+ expect(
+ useUiStore.getState().composerDrafts[composerDraftKey(workspaceId, 'temporary')]
+ ).toBeUndefined()
+})
diff --git a/client/features/views/view-submission.ts b/client/features/views/view-submission.ts
new file mode 100644
index 00000000..c986e906
--- /dev/null
+++ b/client/features/views/view-submission.ts
@@ -0,0 +1,88 @@
+import type { QueryClient } from '@tanstack/react-query'
+import { requestJson } from '@/client/api/http'
+import { workspaceKeys } from '@/client/api/workspace-keys'
+import { appUiKeys } from '@/client/api/app-ui-keys'
+import {
+ readSelectedSession,
+ writeSelectedSession
+} from '@/client/features/chat/sessions/browser-tab-state'
+import { selectedSessionKey } from '@/client/features/chat/sessions/useSelectedSession'
+import { moveChatDraft } from '@/client/features/chat/chat-send'
+import { liveStore } from '@/client/features/chat/chat-store'
+import { useUiStore } from '@/client/store/ui'
+import { composerDraftKey, draftSessionId } from '@/lib/session-drafts'
+import { viewTabId } from '@/lib/workspace-tabs'
+import type {
+ PendingView,
+ SelectedSessionScope,
+ SessionInfo,
+ ViewInfo,
+ WorkspaceSessionSelection
+} from '@/lib/types'
+
+function pendingView(view: ViewInfo | undefined): PendingView | undefined {
+ return view?.status === 'compiled' ? undefined : view
+}
+
+// A failed HTTP response does not prove startup failed. Refresh the server's
+// state before restoring the fresh composer; never replay the request.
+export async function recoverViewSubmission(
+ queryClient: QueryClient,
+ workspaceId: string,
+ viewId: string,
+ sessionId: string,
+ text: string,
+ pinned: boolean,
+ selectionScope: SelectedSessionScope = 'shared'
+) {
+ const cachedView = pendingView(
+ queryClient
+ .getQueryData(workspaceKeys.views(workspaceId))
+ ?.find(view => view.id === viewId)
+ )
+ let target = cachedView?.executionSessionId ?? sessionId
+ try {
+ const [{ views }, selection] = await Promise.all([
+ requestJson<{ views: ViewInfo[] }>(`/api/workspaces/${workspaceId}/views`),
+ requestJson(`/api/workspaces/${workspaceId}/selected-session`)
+ ])
+ const view = pendingView(views.find(view => view.id === viewId))
+ if (!pinned && view?.status === 'draft') {
+ target = draftSessionId(viewTabId(viewId))
+ queryClient.setQueryData(workspaceKeys.sessions(workspaceId), sessions =>
+ sessions?.filter(session => session.sessionId !== sessionId)
+ )
+ queryClient.removeQueries({ queryKey: workspaceKeys.events(workspaceId, sessionId) })
+ } else {
+ target =
+ view?.executionSessionId ??
+ (pinned ? selection.pinned : selection.selected[viewTabId(viewId)]) ??
+ sessionId
+ }
+ moveChatDraft(workspaceId, sessionId, target)
+ if (view?.status === 'draft' || view?.status === 'failed')
+ liveStore.getState().setActivity(workspaceId, target, 'idle')
+ queryClient.setQueryData(workspaceKeys.views(workspaceId), views)
+ queryClient.setQueryData(appUiKeys.sessionSelection(workspaceId), selection)
+ if (selectionScope === 'browser-tab' && !pinned) {
+ const local =
+ queryClient.getQueryData(
+ selectedSessionKey(workspaceId, 'browser-tab')
+ ) ?? readSelectedSession(workspaceId)
+ const selected = { ...local.selected }
+ if (view?.status === 'draft') delete selected[viewTabId(viewId)]
+ else selected[viewTabId(viewId)] = target
+ const next = { selected, pinned: null }
+ queryClient.setQueryData(selectedSessionKey(workspaceId, 'browser-tab'), next)
+ writeSelectedSession(workspaceId, next)
+ }
+ } catch {
+ moveChatDraft(workspaceId, sessionId, target)
+ // Offline: retain the draft at its current identity until state can refresh.
+ void queryClient.invalidateQueries({ queryKey: workspaceKeys.views(workspaceId) })
+ void queryClient.invalidateQueries({ queryKey: appUiKeys.sessionSelection(workspaceId) })
+ }
+ const draftKey = composerDraftKey(workspaceId, target)
+ const ui = useUiStore.getState()
+ ui.setComposerDraft(draftKey, ui.composerDrafts[draftKey] ?? text)
+}
diff --git a/client/features/workspace/WorkspaceMenu.tsx b/client/features/workspace/WorkspaceMenu.tsx
new file mode 100644
index 00000000..cd88f50b
--- /dev/null
+++ b/client/features/workspace/WorkspaceMenu.tsx
@@ -0,0 +1,63 @@
+import { useState } from 'react'
+
+import { IconLetterCase, IconSettings } from '@tabler/icons-react'
+
+import { WorkspaceIcon } from '@/client/components/shared/WorkspaceIcon'
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuGroup,
+ DropdownMenuItem,
+ DropdownMenuTrigger
+} from '@/client/components/ui/dropdown-menu'
+import {
+ WorkspaceSettingsDialog,
+ WorkspaceSettingsDialogTrigger
+} from '@/client/features/settings/WorkspaceSettingsDialog'
+import { useWorkspaceLayoutCtx } from './WorkspaceLayoutContext'
+
+type WorkspaceMenuProps = {
+ onOpenTheme: () => void
+}
+
+export function WorkspaceMenu({ onOpenTheme }: WorkspaceMenuProps) {
+ const { layout, name, provider } = useWorkspaceLayoutCtx()
+ const [iconHovered, setIconHovered] = useState(false)
+
+ return (
+
+
+ setIconHovered(true)}
+ onPointerLeave={() => setIconHovered(false)}
+ >
+
+ {name && {name}}
+
+
+
+
+
+ Theme
+
+ }
+ className="w-full"
+ >
+
+ Settings
+
+
+
+
+
+ )
+}
diff --git a/client/features/workspace/WorkspaceScreen.tsx b/client/features/workspace/WorkspaceScreen.tsx
index e40c495f..04158e92 100644
--- a/client/features/workspace/WorkspaceScreen.tsx
+++ b/client/features/workspace/WorkspaceScreen.tsx
@@ -3,13 +3,10 @@ import { lazy, Suspense, useCallback, useEffect, useRef, useState } from 'react'
import { AnimatePresence } from 'motion/react'
import {
- IconArticle,
IconBrowserPlus,
IconLayout2,
IconLayoutSidebarRight,
- IconLetterCase,
IconMessages,
- IconSettings,
IconSketching
} from '@tabler/icons-react'
@@ -23,30 +20,23 @@ import { ThemePanel } from '@/client/features/workspace/ThemePanel'
import { Overview } from '@/client/features/overview/Overview'
import { WorkspaceUsersMenu } from '@/client/features/collab'
import { PanelHeader } from '@/client/components/shared/PanelHeader'
-import { WorkspaceIcon } from '@/client/components/shared/WorkspaceIcon'
import { Button } from '@/client/components/ui/button'
-import {
- DropdownMenu,
- DropdownMenuContent,
- DropdownMenuGroup,
- DropdownMenuItem,
- DropdownMenuTrigger
-} from '@/client/components/ui/dropdown-menu'
import { Tooltip, TooltipContent, TooltipTrigger } from '@/client/components/ui/tooltip'
+import { toast } from '@/client/components/ui/toast'
import {
useAppletChatMessage,
useAppletChatAttachment
} from '@/client/features/chat/applet-chat-intents'
import { useChat } from '@/client/features/chat/useChat'
+import { usePinnedSession } from '@/client/features/chat/sessions/useSelectedSession'
import {
- WorkspaceSettingsDialog,
- WorkspaceSettingsDialogTrigger
-} from '@/client/features/settings/WorkspaceSettingsDialog'
-import { ViewBuilder, type ViewBuilderHandle } from '@/client/features/views/ViewBuilder'
+ PendingViewScreen,
+ type PendingViewHandle
+} from '@/client/features/views/PendingViewScreen'
import { ViewManager } from '@/client/features/views/ViewManager'
import { getViewIcon, getViewLabel } from '@/client/features/views/view-presentation'
-import { useViewBuilderActions } from '@/client/features/views/useViewBuilderActions'
-import { useViewBuilderDrafts } from '@/client/features/views/useViewBuilderDrafts'
+import { useViewActions } from '@/client/features/views/useViewActions'
+import { useViewDrafts } from '@/client/features/views/useViewDrafts'
import { useFitsSplitLayout } from '@/client/features/workspace/useFitsSplitLayout'
import { useWorkspaceComposerState } from '@/client/features/chat/composer/useWorkspaceComposerState'
import { useWorkspaceTheme } from '@/client/runtime/workspace-theme'
@@ -57,13 +47,13 @@ import {
useLive
} from '@/client/features/chat/chat-store'
import { useWorkspaceLayoutCtx } from '@/client/features/workspace/WorkspaceLayoutContext'
+import { WorkspaceMenu } from '@/client/features/workspace/WorkspaceMenu'
import {
effectiveOpenTabs,
normalizeTabsState,
tabAvailable
} from '@/client/features/workspace/tab-resolution'
import { useWorkspaceNavigation } from '@/client/features/workspace/useWorkspaceNavigation'
-import { resolveAppIcon } from '@/client/lib/app-icon-registry'
import { cn } from '@/client/lib/cn'
import { useWorkspaceEvent } from '@/client/runtime/useWorkspaceEvents'
import { useUiStore } from '@/client/store/ui'
@@ -73,19 +63,16 @@ import {
WorkspaceTabs
} from '@/client/features/workspace/WorkspaceTabs'
import { isDefaultWidget } from '@/lib/default-widgets'
+import { composerDraftKey, draftSessionId } from '@/lib/session-drafts'
import type {
+ CompiledView,
LayoutMode,
- ViewBuilder as ViewBuilderData,
+ PendingView,
ViewInfo,
WidgetInfo,
WorkspaceTabId
} from '@/lib/types'
-import {
- viewBuilderIdFromTab,
- viewBuilderTabId,
- viewIdFromTab,
- viewTabId
-} from '@/lib/workspace-tabs'
+import { viewIdFromTab, viewTabId } from '@/lib/workspace-tabs'
import { WorkspaceSplitLayout } from './WorkspaceSplitLayout'
import { UnavailablePage } from './UnavailablePage'
@@ -96,12 +83,9 @@ const Scratchpad = lazy(() =>
}))
)
-const viewBuilderIcon = (builder: ViewBuilderData) => resolveAppIcon(builder.icon) ?? IconArticle
-
type WorkspaceScreenProps = {
widgets: WidgetInfo[]
views: ViewInfo[]
- builders: ViewBuilderData[]
}
type WidgetMode = 'idle' | 'customizing' | 'theming'
@@ -109,10 +93,9 @@ type WidgetMode = 'idle' | 'customizing' | 'theming'
function tabItemFor(
tab: WorkspaceTabId,
views: ViewInfo[],
- builders: ViewBuilderData[],
closable: boolean,
agentRunning: boolean,
- builderRunning: (sessionId: string) => boolean
+ viewRunning: (sessionId: string) => boolean
): WorkspaceTabItem | null {
if (tab === 'agent') {
return {
@@ -140,25 +123,18 @@ function tabItemFor(
closable
}
}
- const builderId = viewBuilderIdFromTab(tab)
- const builder = builderId ? builders.find(candidate => candidate.id === builderId) : null
- if (builder) {
- return {
- key: tab,
- Icon: viewBuilderIcon(builder),
- label: builder.title || builder.viewId || 'New view',
- closable,
- loading: builderRunning(builder.sessionId)
- }
- }
const viewId = viewIdFromTab(tab)
const view = viewId ? views.find(v => v.id === viewId) : null
return view
? {
key: tab,
- Icon: getViewIcon(view, builders),
+ Icon: getViewIcon(view),
label: getViewLabel(view),
- closable
+ closable: closable || view.status !== 'compiled',
+ loading:
+ view.status !== 'compiled' &&
+ !!view.executionSessionId &&
+ viewRunning(view.executionSessionId)
}
: null
}
@@ -173,56 +149,10 @@ function applyVisibleTabOrder(
return open.map(tab => (visibleSet.has(tab) ? orderedVisible[cursor++] : tab))
}
-type WorkspaceMenuProps = {
- onOpenTheme: () => void
-}
-
-function WorkspaceMenu({ onOpenTheme }: WorkspaceMenuProps) {
- const { layout, name, provider } = useWorkspaceLayoutCtx()
- const [iconHovered, setIconHovered] = useState(false)
-
- return (
-
-
- setIconHovered(true)}
- onPointerLeave={() => setIconHovered(false)}
- >
-
- {name && {name}}
-
-
-
-
-
- Theme
-
- }
- className="w-full"
- >
-
- Settings
-
-
-
-
-
- )
-}
-
-export function WorkspaceScreen({ widgets, views, builders }: WorkspaceScreenProps) {
+export function WorkspaceScreen({ widgets, views: allViews }: WorkspaceScreenProps) {
const { layout, setLayout, workspaceId } = useWorkspaceLayoutCtx()
const theme = resolveWorkspaceTheme(layout.theme)
- const builderActions = useViewBuilderActions()
+ const viewActions = useViewActions()
const {
ref: rowRef,
fits: canUseSplit,
@@ -231,14 +161,17 @@ export function WorkspaceScreen({ widgets, views, builders }: WorkspaceScreenPro
const [widgetMode, setWidgetMode] = useState('idle')
const [floatingChatOpen, setFloatingChatOpen] = useState(false)
const [chatFocusRequest, setChatFocusRequest] = useState(0)
- const builderRefs = useRef(new Map())
+ const pendingViewRefs = useRef(new Map())
const dockedChatWidth = useUiStore(state => state.dockedChatWidth)
const setDockedChatWidth = useUiStore(state => state.setDockedChatWidth)
const sessionActivity = useLive(state => state.activity)
+ const views = allViews.filter((view): view is CompiledView => view.status === 'compiled')
+ const pendingViews = allViews.filter((view): view is PendingView => view.status !== 'compiled')
const hasRunningSession = hasRunningWorkspaceActivity(sessionActivity, workspaceId)
- const builderDrafts = useViewBuilderDrafts({
- builders,
- onSave: (builderId, requirements) => builderActions.save(builderId, requirements)
+ const viewDrafts = useViewDrafts({
+ workspaceId,
+ pendingViews,
+ onSave: (viewId, requirements) => viewActions.save(viewId, requirements)
})
useWorkspaceTheme(layout.theme)
@@ -246,11 +179,9 @@ export function WorkspaceScreen({ widgets, views, builders }: WorkspaceScreenPro
// Split needs the open set to decide whether it's available at all, and the
// navigation hook needs split to resolve the active tab — so the open set is
// derived from the raw layout here, before either.
- const hasWorkspaceContent = effectiveOpenTabs(
- normalizeTabsState(layout.tabs),
- views,
- builders
- ).some(tab => tab !== 'agent')
+ const hasWorkspaceContent = effectiveOpenTabs(normalizeTabsState(layout.tabs), allViews).some(
+ tab => tab !== 'agent'
+ )
const hasAppletWidgets = widgets.some(widget => !isDefaultWidget(widget.id))
const hasWorkspaceApplets = hasAppletWidgets || views.length > 0
@@ -271,8 +202,7 @@ export function WorkspaceScreen({ widgets, views, builders }: WorkspaceScreenPro
isUnavailable,
onNavigationClick
} = useWorkspaceNavigation({
- views,
- builders,
+ views: allViews,
split: dockedSplit
})
@@ -281,9 +211,11 @@ export function WorkspaceScreen({ widgets, views, builders }: WorkspaceScreenPro
// in its `` envelope.
const {
view,
+ forkedFromSessionId,
chatLoaded,
previewTurn,
sessionId,
+ composerSessionId,
processing,
error,
loadError,
@@ -293,7 +225,8 @@ export function WorkspaceScreen({ widgets, views, builders }: WorkspaceScreenPro
selectSession,
dismissError
} = useChat({ activeTab, appletParams })
- const { composerBanner, builderComposerBanner, agentAvailability } = useWorkspaceComposerState(
+ const { pinnedSessionId } = usePinnedSession()
+ const { composerBanner, viewDraftComposerBanner, agentAvailability } = useWorkspaceComposerState(
workspaceId,
{
chatError: error,
@@ -303,7 +236,7 @@ export function WorkspaceScreen({ widgets, views, builders }: WorkspaceScreenPro
}
)
- const openTabIds = effectiveOpenTabs(tabsState, views, builders)
+ const openTabIds = effectiveOpenTabs(tabsState, allViews)
const nonAgentOpenTabs = openTabIds.filter(tab => tab !== 'agent')
const openSet = new Set(tabsState.open)
@@ -318,28 +251,27 @@ export function WorkspaceScreen({ widgets, views, builders }: WorkspaceScreenPro
const canCloseTabs = openTabIds.length > 1
const tabItems = visibleTabIds
.map(tab =>
- tabItemFor(
- tab,
- views,
- builders,
- canCloseTabs || viewBuilderIdFromTab(tab) !== null,
- hasRunningSession,
- sessionId => isSessionRunning(sessionActivity, workspaceId, sessionId)
+ tabItemFor(tab, allViews, canCloseTabs, hasRunningSession, sessionId =>
+ isSessionRunning(sessionActivity, workspaceId, sessionId)
)
)
.filter((tab): tab is WorkspaceTabItem => Boolean(tab))
const activeViewId = viewIdFromTab(activeTab)
const activeView = activeViewId ? views.find(v => v.id === activeViewId) : undefined
- const activeBuilderId = viewBuilderIdFromTab(activeTab)
- const activeBuilder = activeBuilderId
- ? builders.find(builder => builder.id === activeBuilderId)
+ const activePendingView = activeViewId
+ ? pendingViews.find(pendingView => pendingView.id === activeViewId)
: undefined
- const activeDraftBuilder =
- activeBuilder?.status === 'draft' &&
- !isSessionRunning(sessionActivity, workspaceId, activeBuilder.sessionId)
- ? activeBuilder
+ const activeDraftView =
+ !pinnedSessionId &&
+ sessionId === null &&
+ activePendingView?.status === 'draft' &&
+ (!activePendingView.executionSessionId ||
+ !isSessionRunning(sessionActivity, workspaceId, activePendingView.executionSessionId))
+ ? activePendingView
: undefined
- const activeDraftBuilderId = activeDraftBuilder?.id
+ const activeDraftViewId = activeDraftView?.id
+ const startupPending = !pinnedSessionId && activePendingView?.status === 'starting'
+ const visibleChatLoaded = chatLoaded && !startupPending
const canAnnotate =
widgetMode === 'idle' &&
((activeTab === 'overview' && hasAppletWidgets) || activeView !== undefined)
@@ -351,7 +283,7 @@ export function WorkspaceScreen({ widgets, views, builders }: WorkspaceScreenPro
targetRef: annotationTargetRef
} = useChatAnnotation({
workspaceId,
- sessionId,
+ sessionId: composerSessionId,
activeTab,
mode,
available: canAnnotate,
@@ -360,49 +292,14 @@ export function WorkspaceScreen({ widgets, views, builders }: WorkspaceScreenPro
})
useEffect(() => {
- const open = tabsState.open.filter(tab => tabAvailable(tab, views, builders))
+ const open = tabsState.open.filter(tab => tabAvailable(tab, allViews))
if (open.length === tabsState.open.length) return
- const nextOpen = effectiveOpenTabs(tabsState, views, builders)
+ const nextOpen = effectiveOpenTabs(tabsState, allViews)
setTabs({
open: nextOpen,
active: nextOpen.includes(tabsState.active) ? tabsState.active : nextOpen[0]
})
- }, [builders, setTabs, tabsState, views])
-
- useEffect(() => {
- const replacements = new Map()
- for (const builder of builders) {
- if (builder.status !== 'ready' || !builder.viewId) continue
- if (!views.some(view => view.id === builder.viewId)) continue
- replacements.set(viewBuilderTabId(builder.id), viewTabId(builder.viewId))
- }
- if (replacements.size === 0) return
-
- // The URL follows a replaced builder tab to the view that took its place.
- const urlReplacement = replacements.get(activeTab)
- if (urlReplacement) navigateToTab(urlReplacement, { replace: true })
-
- const replacementViews = new Set(replacements.values())
- const sourceForView = new Map(
- [...replacements].map(([builderTab, viewTab]) => [viewTab, builderTab])
- )
- const open: WorkspaceTabId[] = []
- let changed = false
- for (const tab of tabsState.open) {
- const source = sourceForView.get(tab)
- if (replacementViews.has(tab) && source && tabsState.open.includes(source)) {
- changed = true
- continue
- }
- const replacement = replacements.get(tab)
- const next = replacement ?? tab
- if (replacement) changed = true
- if (!open.includes(next)) open.push(next)
- }
- if (!changed) return
- const active = replacements.get(tabsState.active) ?? tabsState.active
- setTabs({ open: open.length > 0 ? open : ['overview'], active })
- }, [activeTab, builders, navigateToTab, setTabs, tabsState, views])
+ }, [allViews, setTabs, tabsState])
useEffect(() => {
if (mode !== 'fullscreen' || activeTab === 'agent') {
@@ -411,10 +308,10 @@ export function WorkspaceScreen({ widgets, views, builders }: WorkspaceScreenPro
}, [activeTab, mode])
useEffect(() => {
- if (!activeDraftBuilderId) return
+ if (!activeDraftViewId) return
if (mode === 'fullscreen') setFloatingChatOpen(true)
setChatFocusRequest(request => request + 1)
- }, [activeDraftBuilderId, mode])
+ }, [activeDraftViewId, mode])
// Tab switching is navigation; the saved default and the open set follow via
// the navigation hook. Only the chat side effects belong to the screen.
@@ -427,9 +324,8 @@ export function WorkspaceScreen({ widgets, views, builders }: WorkspaceScreenPro
}
const createView = () => {
- // Do NOT select the draft's pre-minted sessionId here: no session exists
- // behind it until submit. Submit selects it once the chat actually starts.
- void builderActions.create().then(builder => openTab(viewBuilderTabId(builder.id)))
+ // A pending view has no chat until its first submission.
+ void viewActions.create().then(pendingView => openTab(viewTabId(pendingView.id)))
}
const navigateFromWelcome = (destination: WelcomeDestination) => {
@@ -453,11 +349,27 @@ export function WorkspaceScreen({ widgets, views, builders }: WorkspaceScreenPro
}
})
+ const deletePendingView = async (pendingView: PendingView) => {
+ const sketch = pendingViewRefs.current.get(pendingView.id)
+ try {
+ await viewActions.discard(pendingView.id)
+ } catch (error) {
+ toast.add({
+ title: error instanceof Error ? error.message : 'Couldn’t discard view',
+ type: 'error'
+ })
+ return false
+ }
+ await sketch?.resetSketch()
+ viewDrafts.clear(pendingView.id)
+ return true
+ }
+
const closeTab = (tab: WorkspaceTabId) => {
if (tab === 'overview') return
- const builderId = viewBuilderIdFromTab(tab)
- const builder = builderId ? builders.find(candidate => candidate.id === builderId) : undefined
- if ((!canCloseTabs && !builder) || !openSet.has(tab)) return
+ const viewId = viewIdFromTab(tab)
+ const pendingView = viewId ? pendingViews.find(candidate => candidate.id === viewId) : undefined
+ if ((!canCloseTabs && !pendingView) || !openSet.has(tab)) return
let open = tabsState.open.filter(t => t !== tab)
if (open.length === 0) open = ['overview']
// The neighbor that takes over when the tab on screen closes.
@@ -465,7 +377,7 @@ export function WorkspaceScreen({ widgets, views, builders }: WorkspaceScreenPro
const nextTab =
visibleTabIds[visibleIndex + 1] ??
visibleTabIds[visibleIndex - 1] ??
- open.find(t => tabAvailable(t, views, builders)) ??
+ open.find(t => tabAvailable(t, allViews)) ??
'overview'
const active =
tabsState.active === tab || !open.includes(tabsState.active) ? nextTab : tabsState.active
@@ -473,24 +385,20 @@ export function WorkspaceScreen({ widgets, views, builders }: WorkspaceScreenPro
// tabsStateRef) can't resurrect the closed tab.
setTabs({ open, active })
if (activeTab === tab) navigateToTab(nextTab)
- if (builder?.status === 'draft') {
- void builderRefs.current.get(builder.id)?.resetSketch()
- builderDrafts.clear(builder.id)
- void builderActions.discard(builder.id)
- }
+ if (pendingView?.status === 'draft') void deletePendingView(pendingView)
}
- const discardBuilder = (builder: ViewBuilderData) => {
- const tab = viewBuilderTabId(builder.id)
- if (openSet.has(tab)) {
- let open = tabsState.open.filter(item => item !== tab)
- if (open.length === 0) open = ['overview']
- setTabs({ open, active: tabsState.active === tab ? open[0] : tabsState.active })
- if (activeTab === tab) navigateToTab(open[0])
- }
- void builderRefs.current.get(builder.id)?.resetSketch()
- builderDrafts.clear(builder.id)
- void builderActions.discard(builder.id)
+ const discardPendingView = async (pendingView: PendingView) => {
+ if (!(await deletePendingView(pendingView))) return
+
+ const tab = viewTabId(pendingView.id)
+ if (!openSet.has(tab)) return
+ let open = tabsState.open.filter(item => item !== tab)
+ if (open.length === 0) open = ['overview']
+ const nextTab = open.find(item => tabAvailable(item, allViews)) ?? 'overview'
+ const active = tabsState.active === tab ? nextTab : tabsState.active
+ setTabs({ open, active })
+ if (activeTab === tab) navigateToTab(nextTab, { replace: true })
}
const reorderTabs = (orderedVisibleTabs: WorkspaceTabId[]) => {
@@ -501,7 +409,9 @@ export function WorkspaceScreen({ widgets, views, builders }: WorkspaceScreenPro
const openChat = (intent?: string) => {
if (intent !== undefined) {
- useUiStore.getState().setComposerDraft(workspaceId, intent)
+ useUiStore
+ .getState()
+ .setComposerDraft(composerDraftKey(workspaceId, composerSessionId), intent)
}
if (mode === 'fullscreen' && activeTab !== 'agent') {
setFloatingChatOpen(true)
@@ -517,7 +427,7 @@ export function WorkspaceScreen({ widgets, views, builders }: WorkspaceScreenPro
// in full-screen mode the chat is a closed popover, and a run the user can't
// see is worse than a panel that opens itself.
useAppletChatMessage({ sessionId, send, revealChat: openChat, agentAvailability })
- useAppletChatAttachment(sessionId, openChat)
+ useAppletChatAttachment(composerSessionId, openChat)
const createItems: CreateWorkspaceTabItem[] = [
...(!dockedSplit && !openSet.has('agent')
@@ -540,29 +450,17 @@ export function WorkspaceScreen({ widgets, views, builders }: WorkspaceScreenPro
}
] satisfies CreateWorkspaceTabItem[])
: []),
- ...views
- .map(v => ({ view: v, tab: viewTabId(v.id) }))
+ ...allViews
+ .map(view => ({ view, tab: viewTabId(view.id) }))
.filter(({ tab }) => !openSet.has(tab))
.map(
({ view, tab }): CreateWorkspaceTabItem => ({
key: tab,
- Icon: getViewIcon(view, builders),
+ Icon: getViewIcon(view),
label: getViewLabel(view),
onClick: () => openTab(tab)
})
),
- ...builders
- .filter(builder => builder.status !== 'ready')
- .map(builder => ({ builder, tab: viewBuilderTabId(builder.id) }))
- .filter(({ tab }) => !openSet.has(tab))
- .map(
- ({ builder, tab }): CreateWorkspaceTabItem => ({
- key: tab,
- Icon: viewBuilderIcon(builder),
- label: builder.title || builder.viewId || 'New view',
- onClick: () => openTab(tab)
- })
- ),
{
key: 'create-view',
Icon: IconBrowserPlus,
@@ -571,37 +469,24 @@ export function WorkspaceScreen({ widgets, views, builders }: WorkspaceScreenPro
}
]
- const changeBuilderDraft = useCallback(
- (value: string) => {
- if (activeDraftBuilder) builderDrafts.change(activeDraftBuilder.id, value)
- },
- [activeDraftBuilder, builderDrafts]
- )
- const removeBuilderDrawing = useCallback(() => {
- if (activeDraftBuilder) {
- void builderRefs.current.get(activeDraftBuilder.id)?.resetSketch()
+ const removeViewDrawing = useCallback(() => {
+ if (activeDraftView) {
+ void pendingViewRefs.current.get(activeDraftView.id)?.resetSketch()
}
- }, [activeDraftBuilder])
- const submitBuilderDraft = useCallback(
- async (value: string) => {
- if (!activeDraftBuilder) return
- const builderView = builderRefs.current.get(activeDraftBuilder.id)
- await builderView?.prepareSketchForSend()
- await builderActions.submit(activeDraftBuilder, value)
+ }, [activeDraftView])
+ const sendChat = async (text: string, options?: Parameters[1]) => {
+ if (activePendingView?.status === 'draft') {
+ await pendingViewRefs.current.get(activePendingView.id)?.prepareSketchForSend()
+ await viewActions.submit(activePendingView, text)
// Submit clears the sent attachment. Keep the canvas until the built view replaces it.
- builderDrafts.clear(activeDraftBuilder.id)
- },
- [activeDraftBuilder, builderActions, builderDrafts]
- )
+ viewDrafts.clear(activePendingView.id)
+ } else await send(text, options)
+ }
- const builderChatDraft = activeDraftBuilder
+ const viewChatDraft = activeDraftView
? {
- sessionId: activeDraftBuilder.sessionId,
- builderId: activeDraftBuilder.id,
- initialValue: activeDraftBuilder.input.requirements,
- onChange: changeBuilderDraft,
- onRemoveDrawing: removeBuilderDrawing,
- onSubmit: submitBuilderDraft
+ sessionId: draftSessionId(viewTabId(activeDraftView.id)),
+ onRemoveDrawing: removeViewDrawing
}
: undefined
@@ -611,20 +496,21 @@ export function WorkspaceScreen({ widgets, views, builders }: WorkspaceScreenPro
agent={theme.agent}
active={mode === 'split'}
focusRequest={chatFocusRequest}
- chatLoaded={chatLoaded}
+ chatLoaded={visibleChatLoaded}
hasWorkspaceApplets={hasWorkspaceApplets}
view={view}
+ forkedFromSessionId={forkedFromSessionId}
previewTurn={previewTurn}
sessionId={sessionId}
processing={processing}
- composerBanner={activeDraftBuilder ? builderComposerBanner : composerBanner}
+ composerBanner={activeDraftView ? viewDraftComposerBanner : composerBanner}
agentAvailability={agentAvailability}
- send={send}
+ send={sendChat}
stop={stop}
onNavigateFromWelcome={navigateFromWelcome}
onClose={() => setMode('fullscreen')}
annotation={dockedAnnotation}
- builderDraft={builderChatDraft}
+ viewDraft={viewChatDraft}
docked
/>
)
@@ -637,12 +523,13 @@ export function WorkspaceScreen({ widgets, views, builders }: WorkspaceScreenPro
chatLoaded={chatLoaded}
hasWorkspaceApplets={hasWorkspaceApplets}
view={view}
+ forkedFromSessionId={forkedFromSessionId}
previewTurn={previewTurn}
sessionId={sessionId}
processing={processing}
composerBanner={composerBanner}
agentAvailability={agentAvailability}
- send={send}
+ send={sendChat}
stop={stop}
onNavigateFromWelcome={navigateFromWelcome}
/>
@@ -675,7 +562,6 @@ export function WorkspaceScreen({ widgets, views, builders }: WorkspaceScreenPro
}
widgets={widgets}
views={views}
- builders={builders}
onOpenView={viewId => openTab(viewTabId(viewId))}
onCreateView={createView}
onCreateWidget={() => {
@@ -689,30 +575,34 @@ export function WorkspaceScreen({ widgets, views, builders }: WorkspaceScreenPro
) : null}
- {builders
- .filter(builder => builder.status !== 'ready')
- .map(builder => (
- {
- if (handle) builderRefs.current.set(builder.id, handle)
- else builderRefs.current.delete(builder.id)
- }}
- active={!isUnavailable && activeBuilder?.id === builder.id}
- builder={builder}
- chatDocked={mode === 'split'}
- workspaceId={workspaceId}
- onEditingStart={() => {
- if (mode === 'fullscreen') setFloatingChatOpen(false)
- }}
- onContinueInChat={openChat}
- onOpenChat={() => {
- selectSession(builder.sessionId)
- openChat()
- }}
- onDiscard={() => discardBuilder(builder)}
- />
- ))}
+ {pendingViews.map(pendingView => (
+ {
+ if (handle) pendingViewRefs.current.set(pendingView.id, handle)
+ else pendingViewRefs.current.delete(pendingView.id)
+ }}
+ active={!isUnavailable && activePendingView?.id === pendingView.id}
+ pendingView={pendingView}
+ running={
+ !!pendingView.executionSessionId &&
+ isSessionRunning(sessionActivity, workspaceId, pendingView.executionSessionId)
+ }
+ sketchSessionId={
+ pendingView.status === 'draft'
+ ? (pinnedSessionId ?? draftSessionId(viewTabId(pendingView.id)))
+ : undefined
+ }
+ chatDocked={mode === 'split'}
+ workspaceId={workspaceId}
+ onEditingStart={() => {
+ if (mode === 'fullscreen') setFloatingChatOpen(false)
+ }}
+ onContinueInChat={openChat}
+ onOpenChat={openChat}
+ onDiscard={() => discardPendingView(pendingView)}
+ />
+ ))}
{/* Views are not part of the chain above: ViewManager keeps them
mounted across tab switches (and collapses to nothing while
@@ -753,7 +643,7 @@ export function WorkspaceScreen({ widgets, views, builders }: WorkspaceScreenPro