feat: #487 grabs are attachments — snapshot survives reload, cards in the transcript

.changeset/grab-as-attachment.md

@@ -0,0 +1,5 @@
+---
+'@conciv/embed': patch
+---
+
+Grabs are attachments: the snapshot survives a panel reload, sent grabs render as a card in the transcript instead of raw HTML text, and composer attachments now persist in the session draft.

apps/conciv/src/app/pane-context.ts

@@ -1,30 +1,6 @@
-import {createContext, createSignal, useContext, type Accessor} from 'solid-js'
-import type {Grab, GrabProvider} from '@conciv/grab'
-
-export type StagedGrab = Grab | {text: string}
-
-export type PaneGrabStore = {
-  grabs: Accessor<StagedGrab[]>
-  stage: (grab: Grab) => void
-  stageTexts: (texts: string[]) => void
-  stageAll: (grabs: StagedGrab[]) => void
-  replace: (grab: StagedGrab, next: StagedGrab) => void
-  remove: (grab: StagedGrab) => void
-  clear: () => void
-}
-
-export function makeGrabStore(): PaneGrabStore {
-  const [grabs, setGrabs] = createSignal<StagedGrab[]>([])
-  return {
-    grabs,
-    stage: (grab) => setGrabs((prev) => [...prev, grab]),
-    stageTexts: (texts) => setGrabs(texts.map((text) => ({text}))),
-    stageAll: (staged) => setGrabs((prev) => [...prev, ...staged.filter((grab) => !prev.includes(grab))]),
-    replace: (grab, next) => setGrabs((prev) => prev.map((entry) => (entry === grab ? next : entry))),
-    remove: (grab) => setGrabs((prev) => prev.filter((entry) => entry !== grab)),
-    clear: () => setGrabs([]),
-  }
-}
+import {createContext, useContext, type Accessor} from 'solid-js'
+import type {GrabProvider} from '@conciv/grab'
+import type {GrabStaging} from '../pane/grab-staging.js'
 
 export type PendingAttachmentQueue = {
   enqueue: (file: File) => void
@@ -38,7 +14,7 @@ export type PaneContextValue = {
   setLockedFor: (id: string) => (locked: boolean) => void
   slideClass: Accessor<string>
   resetSlide: () => void
-  grabStore: PaneGrabStore
+  grabStaging: GrabStaging
   grabProvider: GrabProvider | undefined
   attachments: PendingAttachmentQueue
   newSession: () => void

apps/conciv/src/app/pane-provider.tsx

@@ -2,7 +2,9 @@ import {type JSX} from 'solid-js'
 import {useQuery} from '@tanstack/solid-query'
 import {useRouter} from '@tanstack/solid-router'
 import {useAppData, useGrabProvider, useRpc} from './context.js'
-import {PaneContext, makeGrabStore, makePendingAttachmentQueue, type PaneContextValue} from './pane-context.js'
+import {PaneContext, makePendingAttachmentQueue, type PaneContextValue} from './pane-context.js'
+import {makeGrabStaging} from '../pane/grab-staging.js'
+import {resolveGrabSource} from '../pane/grab-source-resolve.js'
 
 export function PaneProvider(props: {
   sessionId: string
@@ -30,7 +32,7 @@ export function PaneProvider(props: {
     setLockedFor: () => () => {},
     slideClass: () => '',
     resetSlide: () => {},
-    grabStore: makeGrabStore(),
+    grabStaging: makeGrabStaging({ground: (grab) => resolveGrabSource(grab, (input) => rpc.page.symbolicate(input))}),
     grabProvider,
     attachments: makePendingAttachmentQueue(),
     newSession: () => {

apps/conciv/src/entry-standalone.tsx

@@ -1,6 +1,7 @@
 import {render} from 'solid-js/web'
 import {RouterProvider, createBrowserHistory} from '@tanstack/solid-router'
 import {makeBrowserRpcClient} from '@conciv/contract'
+import pageExtension from '@conciv/extension-page/client'
 import {parseConcivSettings} from './data/settings.js'
 import {createConcivRouter} from './router.js'
 
@@ -14,6 +15,7 @@ function start(): void {
     history: createBrowserHistory(),
     environment: {rootNode: document, document},
     settings,
+    extensions: [pageExtension],
     apiBase: () => apiBase,
   })
   const root = document.getElementById('app')

apps/conciv/src/extension/create-instances.ts

@@ -0,0 +1,21 @@
+import type {AnyExtension} from '@conciv/extension'
+import type {ExtensionInstance} from './extension-slots.js'
+
+export function createInstances(extensions: AnyExtension[]): ExtensionInstance[] {
+  return extensions.flatMap((extension) => {
+    try {
+      const result = extension.__client?.()
+      return [
+        {
+          extension,
+          clientValue: result?.value ?? {},
+          effects: result?.effects ?? [],
+          dispose: result?.dispose ?? (() => {}),
+        },
+      ]
+    } catch (error) {
+      console.error(`[conciv] extension "${extension.name}" failed to mount`, error)
+      return []
+    }
+  })
+}

apps/conciv/src/extension/pane-grab.ts

@@ -1,17 +1,17 @@
 import type {GrabApi, GrabProvider} from '@conciv/grab'
 import {grabApi as pageGrabApi} from '@conciv/page'
-import type {PaneGrabStore} from '../app/pane-context.js'
+import type {GrabStaging} from '../pane/grab-staging.js'
 
-export function makePaneGrabApi(store: PaneGrabStore, provider?: GrabProvider): GrabApi {
+export function makePaneGrabApi(staging: GrabStaging, provider?: GrabProvider): GrabApi {
   const actions = provider?.() ?? pageGrabApi
   return {
     pick: actions.pick,
     comment: actions.comment,
     cancel: actions.cancel,
     isActive: actions.isActive,
     grabbable: actions.grabbable,
-    stage: store.stage,
-    staged: () => store.grabs().flatMap((entry) => ('preview' in entry ? [entry] : [])),
-    clear: store.clear,
+    stage: staging.stage,
+    staged: staging.staged,
+    clear: staging.clear,
   }
 }

apps/conciv/src/pane/chat-pane.tsx

@@ -37,15 +37,12 @@ import {collectToolRenderers} from '@conciv/extension'
 import {HostApiProvider} from '@conciv/extension/host'
 import type {Grab} from '@conciv/grab'
 import {paneAttachments} from './pane-attachments.js'
-import {resolveGrabSource} from './grab-source-resolve.js'
 import {useAnnounce, useAppData, useConnected, useInstances, useRpc} from '../app/context.js'
 import {usePanelComposerFocus} from '../app/panel-focus.js'
-import {usePane, type StagedGrab} from '../app/pane-context.js'
+import {usePane} from '../app/pane-context.js'
 import {foldToolDurations} from './tool-durations.js'
 import {ToolFallbackCard} from './tool-fallback-card.js'
 import {useComposerTriggerSources} from './trigger-sources.js'
-import {GrabReference} from './grab-reference.js'
-import {GrabStrip} from './grab-strip.js'
 import {CompactSpinner, ConversationSkeleton, Divider, ThinkingBubble} from './indicators.js'
 import {ComposerActionsPending} from '../shell/pending.js'
 import {EmptyStateSlot} from '../shell/empty-state.js'
@@ -96,24 +93,26 @@ function activeCallTitle(
   return title
 }
 
-function grabTexts(grabs: ReadonlyArray<StagedGrab>): string[] {
-  return grabs.map((grab) => grab.text)
-}
-
 type ComposerApi = {
-  addAttachment: (file: File) => Promise<void>
+  addAttachment: (file: File) => Promise<string | null>
 }
 
 function ComposerWiring(props: {onReady: (api: ComposerApi) => void}): JSX.Element {
   const pane = usePane()
   const context = useComposerContext()
   onMount(() => {
-    const restored = context.grabs()
-    if (restored.length > 0) pane.grabStore.stageTexts(restored)
+    pane.grabStaging.connect({
+      attachments: context.attachments,
+      addAttachment: context.addAttachment,
+      replaceAttachment: context.replaceAttachment,
+      removeAttachment: context.removeAttachment,
+      hasAttachment: context.hasAttachment,
+    })
     props.onReady({addAttachment: context.addAttachment})
     for (const file of pane.attachments.drain()) void context.addAttachment(file)
   })
-  createEffect(() => context.setGrabs(grabTexts(pane.grabStore.grabs())))
+  onCleanup(() => pane.grabStaging.disconnect())
+  createEffect(() => pane.grabStaging.reconcile(context.attachments()))
   return <></>
 }
 
@@ -167,7 +166,6 @@ export function ChatPane(props: {sessionId: string}): JSX.Element {
     appData,
     reachability,
     notices,
-    grabStore: pane.grabStore,
     refetchMarkers: () => markers.refetch(),
   })
 
@@ -240,17 +238,11 @@ export function ChatPane(props: {sessionId: string}): JSX.Element {
   const PaneAttachment = (slotProps: {removable?: boolean}): JSX.Element => (
     <AttachmentByMime cards={attachments().cards} removable={slotProps.removable} />
   )
-  const groundGrab = async (grab: Grab): Promise<void> => {
-    const grounded = await resolveGrabSource(grab, (input) => rpc.page.symbolicate(input))
-    if (!grounded) return
-    pane.grabStore.replace(grab, grounded)
-  }
   const stageGrab = (grab: Grab) => {
-    pane.grabStore.stage(grab)
+    pane.grabStaging.stage(grab)
     focusInput()
-    void groundGrab(grab)
   }
-  const paneGrab = makePaneGrabApi(pane.grabStore, pane.grabProvider)
+  const paneGrab = makePaneGrabApi(pane.grabStaging, pane.grabProvider)
 
   const dividersAt = (count: number): MarkerRow[] => (markers.data ?? []).filter((row) => row.afterTurn === count)
   const dividersInRange = (start: number, end: number): MarkerRow[] =>
@@ -333,13 +325,6 @@ export function ChatPane(props: {sessionId: string}): JSX.Element {
                       <ExtensionSurface name="status" instances={instances} />
                       <ExtensionSurface name="footer" instances={instances} />
                     </div>
-                    <Show when={pane.grabStore.grabs().length > 0}>
-                      <GrabStrip class="flex flex-col">
-                        <For each={pane.grabStore.grabs()}>
-                          {(grab) => <GrabReference grab={grab} onRemove={() => pane.grabStore.remove(grab)} />}
-                        </For>
-                      </GrabStrip>
-                    </Show>
                     <Suspense>
                       <Show when={draftStorage()}>
                         {(storage) => (

apps/conciv/src/pane/draft-storage.ts

@@ -6,9 +6,17 @@ import type {SelectionOffsets} from './composer-input-adapter.js'
 
 const WRITE_DELAY_MS = 300
 
+const PersistedAttachmentSchema = z.object({
+  id: z.string(),
+  type: z.string(),
+  name: z.string(),
+  contentType: z.string(),
+  data: z.string(),
+})
+
 const PersistedDraftSchema = z.object({
   text: z.string().catch(''),
-  grabs: z.array(z.string()).catch([]),
+  attachments: z.array(PersistedAttachmentSchema).catch([]),
 })
 
 type PersistedDraft = z.infer<typeof PersistedDraftSchema>
@@ -41,13 +49,13 @@ export async function appendDraft(rpc: RpcClient, sessionId: string, text: strin
     text: nextText,
     selectionStart: nextText.length,
     selectionEnd: nextText.length,
-    grabs: row?.grabs ?? [],
+    attachments: row?.attachments ?? [],
   })
 }
 
 export async function makeDraftStorage(rpc: RpcClient, sessionId: string): Promise<PaneDraftStorage> {
   const row = await rpc.drafts.get({sessionId}).catch(() => null)
-  let cache = row ? JSON.stringify({text: row.text, quote: null, grabs: row.grabs, attachments: []}) : null
+  let cache = row ? JSON.stringify({text: row.text, quote: null, attachments: row.attachments}) : null
   let selection: SelectionOffsets | null = null
   const write = debounce(
     (draft: PersistedDraft) => {
@@ -58,7 +66,7 @@ export async function makeDraftStorage(rpc: RpcClient, sessionId: string): Promi
           text: draft.text,
           selectionStart: offsets.start,
           selectionEnd: offsets.end,
-          grabs: draft.grabs,
+          attachments: draft.attachments,
         })
         .catch(() => {})
     },