total-recall-brain 3.45.0 → 3.46.0

package/frontend/src/components/workspace/PluginHome.tsx

@@ -0,0 +1,76 @@
+import { useEffect, useState } from 'react'
+import { findWorkspaceChunks, readWorkspaceComposition, type WorkspaceChunk } from '../../api/workspace-drawers'
+import type { PluginInfo } from '../../api/plugins'
+import { drawerPanels, PublishedChunk } from './DrawerLayout'
+import { PluginPanel } from '../plugins/PluginPanel'
+import { scopedPluginOperations } from '../plugins/scoped-plugin-operations'
+import { usePluginDesign } from './usePluginDesign'
+
+export function PluginHome({ plugin, plugins, brainId, onCommand }: {
+  plugin: PluginInfo; plugins: PluginInfo[] | null; brainId?: string; onCommand: (name: string) => void
+}) {
+  const [defaults, setDefaults] = useState<WorkspaceChunk[]>([])
+  const [published, setPublished] = useState<{ chunks: WorkspaceChunk[]; version: string | null }>()
+  const [loading, setLoading] = useState(true)
+  const liveDesign = usePluginDesign(plugin.id, brainId)
+  const designCss = liveDesign?.design?.css ?? ''
+  const panels = drawerPanels(plugin)
+  const home = (plugin.manifest?.ui as { home?: string } | undefined)?.home || plugin.ui?.home
+  const panel = panels.find(element => element.id === home) || panels[0]
+  const operations = scopedPluginOperations(plugin)
+  const chunks = published?.chunks.length ? published.chunks : defaults
+
+  useEffect(() => {
+    const controller = new AbortController()
+    void findWorkspaceChunks('page', '', controller.signal, plugin.id, brainId).then(({ chunks }) => {
+      if (controller.signal.aborted) return
+      const ownerDefault = panel?.id && chunks.find(chunk => chunk.panel === panel.id)
+      setDefaults(ownerDefault ? [ownerDefault] : chunks.slice(0, 1))
+    }).catch(() => {}).finally(() => {
+      if (!controller.signal.aborted) setLoading(false)
+    })
+    return () => controller.abort()
+  }, [plugin.id, panel?.id, brainId])
+
+  useEffect(() => {
+    const controller = new AbortController()
+    let timer: ReturnType<typeof setTimeout>
+    const refresh = async () => {
+      try {
+        const next = await readWorkspaceComposition(plugin.id, controller.signal, brainId)
+        if (!controller.signal.aborted) {
+          setPublished(current => current?.version === next.version &&
+            current.chunks.map(chunk => chunk.sha256).join() === next.chunks.map(chunk => chunk.sha256).join() ? current : next)
+        }
+      } catch { /* The owner default remains available on an older or unreachable server. */ }
+      finally {
+        if (!controller.signal.aborted) timer = setTimeout(refresh, 2500)
+      }
+    }
+    void refresh()
+    return () => { controller.abort(); clearTimeout(timer) }
+  }, [plugin.id, brainId])
+
+  return <div className="plugin-home">
+    {loading && <p role="status">Loading published blocks…</p>}
+    {liveDesign?.issue && <p role="status">{liveDesign.issue}</p>}
+    {!loading && chunks.map(chunk =>
+      <div key={`${chunk.key}:${chunk.sha256}`} className="plugin-home">
+        <PublishedChunk name={chunk.key} side="page" plugins={plugins} brainId={brainId} design={chunk.plugin === plugin.id ? liveDesign?.design : undefined}
+          designOwner={chunk.plugin === plugin.id ? undefined : chunk.plugin} />
+      </div>
+    )}
+    {!loading && !published?.chunks.length && panel && !chunks.some(chunk => chunk.panel === panel.id) &&
+      <PluginPanel plugin={plugin} elementId={panel.id} designCss={designCss} brainId={brainId} />}
+    {!published?.chunks.length && !chunks.some(chunk => chunk.operations?.length) && operations.length > 0 && <section aria-label="Plugin operations">
+      <h2>Start a workflow</h2>
+      <ul className="plugin-home-operations">
+        {operations.slice(0, 6).map(command => <li key={command.name}>
+          <button type="button" className="btn btn-ghost" onClick={() => onCommand(command.name)}>{command.name}</button>
+          {command.description && <span>{command.description}</span>}
+        </li>)}
+      </ul>
+    </section>}
+    {!panel && !loading && !chunks.length && <p className="plugin-muted">This plugin has yet to publish a dedicated Home interface.</p>}
+  </div>
+}

package/frontend/src/components/workspace/WorkspaceDrawers.tsx

@@ -0,0 +1,96 @@
+import { useEffect, useRef, useState, type ReactNode } from 'react'
+import type { PluginInfo } from '../../api/plugins'
+import type { DrawerSide } from '../../api/workspace-drawers'
+import HelpPage from '../../pages/HelpPage'
+import { DrawerChat } from './DrawerChat'
+import { DrawerLayout, DrawerPanel } from './DrawerLayout'
+
+export type WorkspaceEdge = 'left' | DrawerSide
+const tools = ['Phone', 'Text', 'Shortcuts', 'Chat', 'Custom'] as const
+type Tool = (typeof tools)[number]
+
+function EdgeDrawer({ side, title, open, onChange, children }: {
+  side: DrawerSide; title: string; open: boolean; onChange: (edge: WorkspaceEdge | null) => void; children: ReactNode
+}) {
+  const toggle = useRef<HTMLButtonElement>(null)
+  const closeButton = useRef<HTMLButtonElement>(null)
+  const content = useRef<HTMLElement>(null)
+  const panelId = `workspace-drawer-${side}`
+
+  useEffect(() => {
+    if (open) closeButton.current?.focus()
+    return () => {
+      if (open && content.current?.contains(document.activeElement)) toggle.current?.focus()
+    }
+  }, [open])
+  const close = () => {
+    toggle.current?.focus()
+    onChange(null)
+  }
+  return <>
+    <button type="button" className={`workspace-edge-handle workspace-edge-handle--${side}`}
+      ref={toggle} aria-label={side === 'right' ? 'Help drawer' : 'Bottom drawer'}
+      aria-controls={panelId} aria-expanded={open} onClick={() => open ? close() : onChange(side)}
+      onKeyDown={event => { if (event.key === 'Escape' && open) close() }}>
+      <svg width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" aria-hidden="true">
+        <path d={side === 'right' ? (open ? 'm6 3 5 5-5 5' : 'm10 3-5 5 5 5') : (open ? 'm3 6 5 5 5-5' : 'm3 10 5-5 5 5')} />
+      </svg>
+      {title}
+    </button>
+    <aside ref={content} id={panelId} aria-label={title} inert={!open}
+      className={`workspace-edge-panel workspace-edge-panel--${side}${open ? ' open' : ''}`}
+      onKeyDown={event => { if (event.key === 'Escape') { event.stopPropagation(); close() } }}>
+      <header className="workspace-edge-header">
+        <h2>{title}</h2>
+        <button type="button" ref={closeButton} className="btn btn-ghost btn-sm" onClick={close}>Close</button>
+      </header>
+      {open && <div className="workspace-edge-body">{children}</div>}
+    </aside>
+  </>
+}
+
+function HelpDrawer({ plugins, brainId }: { plugins: PluginInfo[] | null; brainId?: string }) {
+  const [custom, setCustom] = useState(false)
+  return <>
+    <div className="drawer-section-tabs" role="group" aria-label="Help sections">
+      <button type="button" className="btn btn-ghost btn-sm" aria-pressed={!custom} onClick={() => setCustom(false)}>Reference</button>
+      <button type="button" className="btn btn-ghost btn-sm" aria-pressed={custom} onClick={() => setCustom(true)}>Custom</button>
+    </div>
+    {custom ? (brainId ? <DrawerLayout key={brainId} side="right" view="custom" plugins={plugins} brainId={brainId} />
+      : <p className="drawer-note">Select one local brain to open custom help.</p>) : <HelpPage embedded />}
+  </>
+}
+
+function ToolsDrawer({ plugins, activeBrainId, brainId }: { plugins: PluginInfo[] | null; activeBrainId: string; brainId?: string }) {
+  const [section, setSection] = useState<Tool>('Shortcuts')
+  return <>
+    <div className="drawer-section-tabs" role="group" aria-label="Bottom drawer tools">
+      {tools.map(tool => <button key={tool} type="button" className="btn btn-ghost btn-sm"
+        aria-pressed={tool === section} onClick={() => setSection(tool)}>{tool}</button>)}
+    </div>
+    {(section === 'Phone' || section === 'Text') && (brainId
+      ? <DrawerPanel plugins={plugins} reference={{ plugin: section.toLowerCase(), element: section.toLowerCase() }} brainId={brainId} />
+      : <p className="drawer-note">Select one local brain to open {section}.</p>)}
+    {section === 'Chat' && (plugins ? <DrawerChat plugin={plugins.find(plugin => plugin.id === 'meta-harness')}
+      activeBrainId={activeBrainId} /> : <p role="status">Loading Metaharness…</p>)}
+    {section === 'Shortcuts' && <DrawerLayout side="bottom" view="shortcuts" plugins={plugins} brainId={brainId} />}
+    {section === 'Custom' && (brainId ? <DrawerLayout key={brainId} side="bottom" view="custom" plugins={plugins} brainId={brainId} />
+      : <p className="drawer-note">Select one local brain to open custom tools.</p>)}
+  </>
+}
+
+export function WorkspaceDrawers({ edge, onChange, plugins, activeBrainId }: {
+  edge: WorkspaceEdge | null
+  onChange: (edge: WorkspaceEdge | null) => void
+  plugins: PluginInfo[] | null
+  activeBrainId: string
+}) {
+  const brainId = !activeBrainId.includes(',') && (activeBrainId === 'global' || activeBrainId.startsWith('project:'))
+    ? activeBrainId : undefined
+  return <>
+    <EdgeDrawer side="right" title="Help" open={edge === 'right'} onChange={onChange}><HelpDrawer plugins={plugins} brainId={brainId} /></EdgeDrawer>
+    <EdgeDrawer side="bottom" title="Tools" open={edge === 'bottom'} onChange={onChange}>
+      <ToolsDrawer plugins={plugins} activeBrainId={activeBrainId} brainId={brainId} />
+    </EdgeDrawer>
+  </>
+}

package/frontend/src/components/workspace/WorkspacePage.tsx

@@ -0,0 +1,95 @@
+import { useEffect, useState } from 'react'
+import { Link } from 'react-router-dom'
+import type { PluginInfo } from '../../api/plugins'
+import { listSavedPages, readSavedPage, type SavedPage, type SavedPageSummary } from '../../api/workspace-drawers'
+import { PublishedChunk } from './DrawerLayout'
+
+export function SavedPages({ brainId, drawerOpen, activePageId, onOpenPage }: {
+  brainId?: string
+  drawerOpen: boolean
+  activePageId: string | null
+  onOpenPage: () => void
+}) {
+  const [expanded, setExpanded] = useState(false)
+  return <details className="sidebar-memory sidebar-saved-pages" onToggle={event => setExpanded(event.currentTarget.open)}>
+    <summary className="nav-link">
+      Saved pages <span className="plugin-folder-chevron" aria-hidden="true">{expanded ? '▾' : '›'}</span>
+    </summary>
+    {drawerOpen && expanded && (brainId
+      ? <SavedPageLinks key={brainId} brainId={brainId} activePageId={activePageId} onOpenPage={onOpenPage} />
+      : <p className="plugin-folder-message">Select one brain to see its saved pages.</p>)}
+  </details>
+}
+
+function SavedPageLinks({ brainId, activePageId, onOpenPage }: {
+  brainId: string
+  activePageId: string | null
+  onOpenPage: () => void
+}) {
+  const [result, setResult] = useState<{ pages: SavedPageSummary[] } | { error: string }>()
+  useEffect(() => {
+    const controller = new AbortController()
+    void listSavedPages(brainId, controller.signal).then(
+      data => { if (!controller.signal.aborted) setResult(data) },
+      () => { if (!controller.signal.aborted) setResult({ error: 'Could not load saved pages.' }) },
+    )
+    return () => controller.abort()
+  }, [brainId])
+
+  if (!result) return <p className="plugin-folder-message" role="status">Loading saved pages…</p>
+  if ('error' in result) return <p className="plugin-folder-message" role="alert">{result.error}</p>
+  if (!result.pages.length) return <p className="plugin-folder-message">No saved pages</p>
+
+  return <ul className="plugin-folder-list" aria-label="Saved pages">
+    {result.pages.map(page => {
+      const query = new URLSearchParams({ page: page.id, brain: brainId })
+      const current = page.id === activePageId
+      return <li key={page.id}>
+        <Link to={`/memory?${query}`} className={`nav-link ${current ? 'active' : ''}`}
+          aria-current={current ? 'page' : undefined} onClick={onOpenPage}>{page.title}</Link>
+      </li>
+    })}
+  </ul>
+}
+
+export function WorkspacePage({ id, brainId, plugins }: {
+  id: string
+  brainId?: string
+  plugins: PluginInfo[] | null
+}) {
+  return brainId
+    ? <SavedPageContent key={`${brainId}:${id}`} id={id} brainId={brainId} plugins={plugins} />
+    : <section className="plugin-workspace-page" aria-label="Saved page">
+      <p>Select one brain to open this saved page.</p>
+    </section>
+}
+
+function SavedPageContent({ id, brainId, plugins }: {
+  id: string
+  brainId: string
+  plugins: PluginInfo[] | null
+}) {
+  const [result, setResult] = useState<SavedPage | { error: string }>()
+  useEffect(() => {
+    const controller = new AbortController()
+    void readSavedPage(id, brainId, controller.signal).then(
+      page => { if (!controller.signal.aborted) setResult(page) },
+      () => { if (!controller.signal.aborted) setResult({ error: 'Could not open this saved page in the selected brain.' }) },
+    )
+    return () => controller.abort()
+  }, [id, brainId])
+
+  const page = result && 'chunks' in result ? result : undefined
+  return <section className="plugin-workspace-page" aria-labelledby="saved-page-title">
+    <header className="plugin-drawer-header">
+      <h1 id="saved-page-title">{page?.title || 'Saved page'}</h1>
+      <Link className="btn btn-ghost btn-sm" to="/memory">Close</Link>
+    </header>
+    {!result && <p role="status">Loading saved page…</p>}
+    {result && 'error' in result && <p role="alert">{result.error}</p>}
+    {page && !page.chunks.length && <p className="plugin-muted">No page blocks are available in this brain.</p>}
+    {page?.chunks.map(chunk =>
+      <PublishedChunk key={`${chunk.key}:${chunk.sha256}`} name={chunk.key} side="page" plugins={plugins}
+        brainId={brainId} designOwner={chunk.plugin} />)}
+  </section>
+}

package/frontend/src/components/workspace/usePluginDesign.ts

@@ -0,0 +1,38 @@
+import { useEffect, useState } from 'react'
+import { readPluginDesign, type PluginDesign } from '../../api/workspace-drawers'
+
+export function usePluginDesign(pluginId: string | undefined, brainId?: string) {
+  const [current, setCurrent] = useState<{ pluginId: string; brainId?: string; design?: PluginDesign; issue?: string }>()
+  useEffect(() => {
+    if (!pluginId) return
+    const controller = new AbortController()
+    let timer: ReturnType<typeof setTimeout>
+    let revision: string | null = null
+    const refresh = async () => {
+      try {
+        const result = await readPluginDesign(pluginId, revision, controller.signal, brainId)
+        if (controller.signal.aborted) return
+        if ('unchanged' in result) {
+          setCurrent(current => current?.issue ? { ...current, issue: undefined } : current)
+        } else {
+          revision = result.revision
+          setCurrent(current => current?.pluginId === pluginId && current.brainId === brainId && current.design?.revision === result.revision && !current.issue
+            ? current : { pluginId, brainId, design: result })
+        }
+      } catch (error) {
+        if (!controller.signal.aborted) {
+          const issue = error instanceof Error ? error.message : 'Could not refresh the plugin design.'
+          setCurrent(current => ({ pluginId, brainId, design: current?.pluginId === pluginId && current.brainId === brainId ? current.design : undefined, issue }))
+        }
+      } finally {
+        if (!controller.signal.aborted) timer = setTimeout(refresh, 2500)
+      }
+    }
+    void refresh()
+    return () => {
+      controller.abort()
+      clearTimeout(timer)
+    }
+  }, [pluginId, brainId])
+  return current?.pluginId === pluginId && current?.brainId === brainId ? current : undefined
+}