dsh-multi-chat 0.6.7 → 1.0.0

package/src/client/WallView.tsx

@@ -0,0 +1,406 @@
+/**
+ * WallView: the multi-window wall as a `conversation.view` ring entry. When
+ * the header's "多窗口" tab is selected, the right panel swaps from the
+ * chat to this view — a toolbar plus a grid of iframes, one pane per running
+ * DSH instance (127.0.0.1:<port>). Pure additive UI; no existing slot is
+ * replaced.
+ *
+ * Recursion guard: panes embed `?multi-wall=embed` (the embedded page
+ * registers no wall UI). The serving instance is itself a pane, so the user
+ * can watch — or stop — the very instance they are in.
+ *
+ * Live data channels: the store owns ports/columns; discovery writes
+ * `setPorts` from /multi/api/ports (same-origin, served by the node half);
+ * per-pane liveness arrives from /multi/api/status polls. Components never
+ * see ctx — the fetch helpers are injected through the registration.
+ */
+import { useEffect, useRef, useState } from 'react'
+import clsx from 'clsx'
+import {
+  IconCloseOutline16, IconFullscreenOutline16, IconGlobeOutline14, IconPlusOutline16,
+  IconRefreshOutline14, IconRefreshOutline16, IconRightUpOutline16, IconStopFill16,
+  Button, Input, Menu, StateDot,
+} from '@deepseek-ai/dsh-client-ui-primitives'
+import type { PropsLocale, PropsStore, TranslateNS } from '@deepseek-ai/dsh-client-ui-slots'
+import type { HandleOf } from '@deepseek-ai/dsh-client-ui-slots'
+import type { ConvViewProps } from '@deepseek-ai/dsh-client-ui-conversation/client'
+import type { createWallStore } from './store.ts'
+import type { WallInjected } from './wall-injected.ts'
+import css from './WallView.module.css'
+
+/** Composed props: the view-ring runtime share, the store, the probe face, and locale. */
+export type WallViewProps =
+  & ConvViewProps
+  & PropsStore<HandleOf<typeof createWallStore>>
+  & WallInjected
+  & PropsLocale<'multiWall'>
+
+/** Grid column presets, driven by the toolbar menu. 'auto' fills the row. */
+const COLUMN_PRESETS = ['auto', '1', '2', '3', '4', '6'] as const
+
+/** Embed flag appended to every pane URL; such pages register no wall UI. */
+const EMBED_FLAG = 'multi-wall=embed'
+
+/**
+ * Whether this wall is being viewed through the phone gateway (a non-loopback
+ * host) rather than on the machine running DSH. When remote, pane iframes must
+ * load through the gateway's `/gw/<port>` route — a phone's `127.0.0.1` points
+ * at the phone itself, not the host.
+ */
+function isRemoteViewer(): boolean {
+  const host = typeof window !== 'undefined' ? window.location.hostname : ''
+  return host !== 'localhost' && host !== '127.0.0.1' && host !== '::1'
+}
+
+/**
+ * The iframe URL for a pane. Local viewers embed the loopback instance
+ * directly; remote (phone) viewers route through the gateway that is already
+ * serving this page, appending the port so the gateway proxies to it.
+ * @param port - target DSH instance port.
+ * @returns the pane URL.
+ */
+function paneUrl(port: number): string {
+  if (isRemoteViewer()) {
+    return `${window.location.origin}/gw/${port}/?${EMBED_FLAG}`
+  }
+  return `http://127.0.0.1:${port}/?${EMBED_FLAG}`
+}
+
+/**
+ * One pane: header (port, liveness dot, zoom/refresh/open/stop/remove) plus
+ * the embedded original DSH UI.
+ */
+function WallPane(props: {
+  port: number
+  alive: boolean
+  zoomed: boolean
+  stopping: boolean
+  onZoom: () => void
+  onStop: () => void
+  onRemove: () => void
+  t: TranslateNS<'multiWall'>
+}) {
+  const { port, alive, zoomed, stopping, onZoom, onStop, onRemove, t } = props
+  return (
+    <section className={clsx(css.pane, zoomed && css.zoomed)} data-port={port}>
+      <div className={css.paneHead}>
+        <StateDot state={alive ? 'done' : 'warning'} size={8} className={css.dot} />
+        <span className={css.paneTitle}>127.0.0.1:{port}</span>
+        <div className={css.paneActions}>
+          <button type="button" className={css.action} title={t('zoom')} onClick={onZoom}>
+            <IconFullscreenOutline16 size={14} />
+          </button>
+          <button type="button" className={css.action} title={t('reload')} onClick={(e) => {
+            e.currentTarget.closest('section')?.querySelector('iframe')?.contentWindow?.location.reload()
+          }}>
+            <IconRefreshOutline16 size={14} />
+          </button>
+          <button type="button" className={css.action} title={t('openTab')} onClick={() => {
+            window.open(paneUrl(port), '_blank')
+          }}>
+            <IconRightUpOutline16 size={14} />
+          </button>
+          <button
+            type="button"
+            className={clsx(css.action, css.danger, stopping && css.confirm)}
+            title={t('stop')}
+            onClick={onStop}
+          >
+            {stopping ? t('stop.confirm') : <IconStopFill16 size={14} />}
+          </button>
+          <button type="button" className={css.action} title={t('remove')} onClick={onRemove}>
+            <IconCloseOutline16 size={14} />
+          </button>
+        </div>
+      </div>
+      <div className={css.paneBody}>
+        <iframe
+          title={`DSH :${port}`}
+          src={paneUrl(port)}
+          loading="lazy"
+        />
+      </div>
+    </section>
+  )
+}
+
+/**
+ * Render the wall: toolbar plus the horizontally-filled pane grid. Discovery
+ * runs on mount and liveness polls every 5s; the store's persisted ports
+ * survive view switches and reloads.
+ * @param props - composed slot props.
+ * @returns the wall surface.
+ */
+export function WallView({ useStore, actions, discover, probe, stop, create, link, t }: WallViewProps) {
+  const ports = useStore(s => s.ports)
+  const columns = useStore(s => s.columns)
+  const [alive, setAlive] = useState<Record<number, boolean>>({})
+  const [zoomedPort, setZoomedPort] = useState<number | null>(null)
+  const [confirmingStop, setConfirmingStop] = useState<number | null>(null)
+  const [scanFrom, setScanFrom] = useState(3070)
+  const [scanTo, setScanTo] = useState(3110)
+  const [colsMenuOpen, setColsMenuOpen] = useState(false)
+  const [creating, setCreating] = useState(false)
+  const [linkOpen, setLinkOpen] = useState(false)
+  const [linkInfo, setLinkInfo] = useState<Awaited<ReturnType<WallViewProps['link']>> | null>(null)
+  const [linkCopied, setLinkCopied] = useState(false)
+  const [status, setStatus] = useState('')
+  const aliveRef = useRef<Record<number, boolean>>({})
+  aliveRef.current = alive
+
+  // Discover on mount (the view renders only while selected), then poll
+  // liveness while the view stays mounted.
+  useEffect(() => {
+    void discover().then(found => {
+      if (found.length > 0) actions.setPorts(found)
+      setStatus(found.length > 0 ? t('status.found').replace('{count}', String(found.length)).replace('{ports}', found.join(', ')) : '')
+    })
+    const timer = setInterval(() => {
+      if (ports.length === 0) return
+      void probe(ports).then(rows => {
+        const next: Record<number, boolean> = {}
+        for (const row of rows) next[row.port] = row.alive
+        setAlive(next)
+      })
+    }, 5000)
+    return () => { clearInterval(timer) }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  // Stop is destructive: the first click arms a per-pane confirm, the second
+  // executes it. Any other interaction clears the arm. The serving instance
+  // itself may be stopped too (the user may want to take this port down).
+  const handleStop = async (port: number) => {
+    if (confirmingStop !== port) {
+      setConfirmingStop(port)
+      return
+    }
+    setConfirmingStop(null)
+    const result = await stop(port)
+    if (result.ok) {
+      actions.removePort(port)
+      setAlive(current => ({ ...current, [port]: false }))
+      setStatus(t('stop.done').replace('{port}', String(port)))
+    } else {
+      setStatus(t('stop.failed').replace('{port}', String(port)).replace('{error}', result.error ?? ''))
+    }
+  }
+
+  const runDiscovery = async () => {
+    setStatus(t('status.scanning').replace('{from}', String(scanFrom)).replace('{to}', String(scanTo)))
+    const found = await discover()
+    if (found.length === 0) {
+      setStatus(t('status.none').replace('{from}', String(scanFrom)).replace('{to}', String(scanTo)))
+      return
+    }
+    actions.setPorts(found)
+    setStatus(t('status.found').replace('{count}', String(found.length)).replace('{ports}', found.join(', ')))
+  }
+
+  // Start a brand-new DSH instance and add it to the wall. Failures always
+  // surface a concrete reason: the injected face reports HTTP status / body
+  // problems, and a thrown fetch surfaces its message — never a silent stall.
+  const handleCreate = async () => {
+    setCreating(true)
+    setStatus('')
+    try {
+      const result = await create()
+      if (result.ok && result.port !== undefined) {
+        actions.addPort(result.port)
+        setAlive(current => ({ ...current, [result.port!]: true }))
+        setStatus(t('create.done').replace('{port}', String(result.port)))
+      } else {
+        setStatus(t('create.failed').replace('{error}', result.error ?? t('create.unknown')))
+      }
+    } catch (error) {
+      setStatus(t('create.failed').replace('{error}', error instanceof Error ? error.message : String(error)))
+    } finally {
+      setCreating(false)
+    }
+  }
+
+  // Leave the wall: switch the view ring back to the default chat view. The
+  // ring's active view lives in the chat store and only the header tab's
+  // click handler mutates it, so exit reuses that sanctioned path — the chat
+  // entry is always the first tab (order 0), which makes the click
+  // locale-independent. No tab (blank session) is a no-op.
+  const exitWall = () => {
+    const tab = document.querySelector<HTMLButtonElement>('[role="tablist"] [role="tab"]')
+    tab?.click()
+  }
+
+  // Fetch the phone-reachable link(s) for this instance and open the sheet.
+  const handleLink = async () => {
+    if (linkInfo === null) {
+      setStatus(t('link.fetching'))
+      const info = await link()
+      setLinkInfo(info)
+    }
+    setLinkOpen(true)
+    setLinkCopied(false)
+    setStatus('')
+  }
+
+  // Copy the first phone-reachable link to the clipboard. When the gateway
+  // issued a token it is appended as `?token=` so the phone bypasses the login
+  // form entirely (the gateway accepts a matching `?token=` query); the URL is
+  // otherwise the bare link. The standalone token line is still shown above so
+  // users who prefer typing it can.
+  const copyFirstLink = async () => {
+    if (linkInfo === null || linkInfo.lan.length === 0) return
+    try {
+      const base = linkInfo.lan[0] ?? ''
+      const token = linkInfo.token ?? ''
+      const url = token !== '' ? `${base}?token=${encodeURIComponent(token)}` : base
+      await navigator.clipboard.writeText(url)
+      setLinkCopied(true)
+    } catch {
+      setLinkCopied(false)
+    }
+  }
+
+  // Every discovered port renders, including the one serving this wall: the
+  // user may want to watch (or stop) the instance they are in. Recursion is
+  // prevented by the embed flag, not by hiding the self pane.
+  const shown = ports
+
+  return (
+    <div className={css.wall} role="region" aria-label={t('overlay.title')} data-wall-view="">
+      <div className={css.toolbar}>
+        <span className={css.title}>{t('overlay.title')}</span>
+        <span className={css.status}>{status}</span>
+        <div className={css.controls}>
+          <label className={css.field}>{t('scan.from')}
+            <Input
+              type="number"
+              value={scanFrom}
+              onChange={e => setScanFrom(Number(e.target.value))}
+            />
+          </label>
+          <label className={css.field}>{t('scan.to')}
+            <Input
+              type="number"
+              value={scanTo}
+              onChange={e => setScanTo(Number(e.target.value))}
+            />
+          </label>
+          <Button variant="toolbar" size="sm" onClick={() => { void runDiscovery() }}>{t('scan')}</Button>
+          <Button
+            variant="toolbar"
+            size="sm"
+            icon={<IconPlusOutline16 size={14} />}
+            disabled={creating}
+            onClick={() => { void handleCreate() }}
+          >
+            {creating ? t('create.pending') : t('create')}
+          </Button>
+          <Menu
+            open={colsMenuOpen}
+            anchor={
+              <Button
+                variant="toolbar"
+                size="sm"
+                icon={<IconRightUpOutline16 size={14} />}
+                onClick={() => { setColsMenuOpen(true) }}
+              >
+                {columns === 'auto' ? t('columns.auto') : columns}
+              </Button>
+            }
+            items={COLUMN_PRESETS.map(c => ({
+              id: c,
+              label: c === 'auto' ? t('columns.auto') : c,
+            }))}
+            selectedId={columns}
+            onSelect={(id) => {
+              actions.setColumns(id)
+              setColsMenuOpen(false)
+            }}
+            onClose={() => { setColsMenuOpen(false) }}
+            compact
+          />
+          <Button
+            variant="toolbar"
+            size="sm"
+            icon={<IconRefreshOutline14 size={14} />}
+            onClick={() => {
+              document.querySelectorAll(`.${css.paneBody} iframe`).forEach(f => {
+                (f as HTMLIFrameElement).contentWindow?.location.reload()
+              })
+              setStatus(t('status.refreshed'))
+            }}
+          >
+            {t('refresh')}
+          </Button>
+          <Button
+            variant="toolbar"
+            size="sm"
+            icon={<IconGlobeOutline14 size={14} />}
+            aria-label={t('link.aria')}
+            onClick={() => { void handleLink() }}
+          >
+            {t('link')}
+          </Button>
+          <Button
+            variant="toolbar"
+            size="sm"
+            icon={<IconCloseOutline16 size={14} />}
+            aria-label={t('exit.aria')}
+            title={t('exit')}
+            onClick={() => { exitWall() }}
+          >
+            {t('exit')}
+          </Button>
+        </div>
+      </div>
+      {linkOpen && linkInfo !== null && (
+        <div className={css.linkBar}>
+          {linkInfo.reachable
+            ? (
+              <>
+                <span className={css.linkText}>
+                  {t('link.reachable').replace('{urls}', linkInfo.lan.join('  '))}
+                  {linkInfo.token !== undefined && linkInfo.token !== ''
+                    ? `  ${t('link.token').replace('{token}', linkInfo.token)}`
+                    : ''}
+                </span>
+                {linkInfo.lan.length > 0 && (
+                  <Button variant="outline" size="sm" onClick={() => { void copyFirstLink() }}>
+                    {linkCopied ? t('link.copied') : t('link.copy')}
+                  </Button>
+                )}
+              </>
+            )
+            : (
+              <span className={css.linkText}>
+                {t('link.unreachable').replace('{hint}', linkInfo.hint ?? '')}
+              </span>
+            )}
+          <Button variant="ghost" size="sm" icon={<IconCloseOutline16 size={14} />} onClick={() => { setLinkOpen(false) }}>
+            {t('overlay.close')}
+          </Button>
+        </div>
+      )}
+      <div className={css.grid} data-cols={columns}>
+        {shown.map(port => (
+          <WallPane
+            key={port}
+            port={port}
+            alive={aliveRef.current[port] ?? true}
+            zoomed={zoomedPort === port}
+            stopping={confirmingStop === port}
+            onZoom={() => setZoomedPort(zoomedPort === port ? null : port)}
+            onStop={() => { void handleStop(port) }}
+            onRemove={() => { setConfirmingStop(null); actions.removePort(port) }}
+            t={t}
+          />
+        ))}
+        {shown.length === 0 && (
+          <div className={css.empty}>
+            <p>{t('empty')}</p>
+            <p className={css.hint}>{t('empty.hint')}</p>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/client/index.ts

@@ -0,0 +1,103 @@
+/**
+ * Multi-window wall plugin, browser half: contributes the wall as a
+ * `conversation.view` ring entry (the official replace-the-chat-surface
+ * mechanism — the header grows a "多窗口墙" tab and the right panel swaps to
+ * the wall) plus a sidebar footer shortcut that jumps to that view. No
+ * existing slot is replaced and no original interaction logic changes; the
+ * wall is pure UI over the node half's /multi/api probe routes.
+ *
+ * Recursion guard: a wall pane embeds each instance as
+ * `http://127.0.0.1:<port>/?multi-wall=embed`; the embedded page sees the
+ * query flag and registers nothing, so a pane can never grow a wall of its
+ * own. The wall also never renders the port it is served on (SELF_PORT is
+ * filtered at render time and by the node half's discovery).
+ */
+import type { ClientContext } from '@deepseek-ai/dsh-client-runtime/client'
+// Type-only: pulls the layout-owned slot declarations (sidebar footer,
+// shell.overlay) into this program.
+import type {} from '@deepseek-ai/dsh-client-ui-layout/client'
+// Type-only: pulls the conversation package's view-ring declaration
+// ('conversation.view') into this program.
+import type {} from '@deepseek-ai/dsh-client-ui-conversation/client'
+// Type-only: pulls the sidebar footer action owner props into this program.
+import type {} from '@deepseek-ai/dsh-client-ui-sidebar/client'
+// Type-only: pulls ctx.locale into this program.
+import type {} from '@deepseek-ai/dsh-client-locale/client'
+import { en, zh, type MultiWallKey } from './locales.ts'
+import { createWallStore } from './store.ts'
+import { createWallInjected } from './wall-injected.ts'
+import { WallView } from './WallView.tsx'
+import { WallToggle } from './WallToggle.tsx'
+
+export { WallView } from './WallView.tsx'
+export type { WallViewProps } from './WallView.tsx'
+export { WallToggle } from './WallToggle.tsx'
+export type { WallToggleProps } from './WallToggle.tsx'
+export type { MultiWallKey } from './locales.ts'
+export { createWallStore } from './store.ts'
+export type { WallState, WallActions } from './store.ts'
+export type { ProbeRow, StopRow, WallInjected } from './wall-injected.ts'
+
+declare module '@deepseek-ai/dsh-client-ui-slots' {
+  interface LocaleNamespaceMap {
+    /** Multi-window wall copy. */
+    multiWall: MultiWallKey
+  }
+}
+
+/** Dictionary namespace owned by this plugin. */
+const NS = 'multiWall'
+
+/** Required services: slots for both registrations, locale for copy. */
+export const inject = ['slots', 'locale']
+
+/**
+ * Whether this page is an embedded wall pane. Panes load
+ * `?multi-wall=embed`; such pages register no wall UI at all, which stops a
+ * wall inside a wall (the pane would otherwise recursively embed the
+ * serving instance).
+ * @returns true when the query flag is present.
+ */
+function isEmbeddedPane(): boolean {
+  return new URLSearchParams(window.location.search).has('multi-wall')
+}
+
+/**
+ * Client plugin body: register the dictionaries, the view-ring entry (the
+ * wall), and the sidebar footer shortcut. Embedded panes register nothing.
+ * @param ctx - client root context.
+ */
+export function apply(ctx: ClientContext): void {
+  if (isEmbeddedPane()) return
+  ctx.effect(() => ctx.locale.register(NS, { zh, en }), 'ui-multi-wall: dictionaries')
+
+  // Registration-time text (the view tab label) reads through the bound
+  // translate as a thunk, so it follows the active locale without
+  // re-registration.
+  const t = ctx.locale.bind(NS)
+
+  // One wall store handle rides both registrations (ports, columns).
+  const wallStore = createWallStore()
+
+  // The wall itself: a 'conversation.view' ring entry. The header projects
+  // the tab from the registration options; selecting it swaps the right
+  // panel from the chat to the wall (official view-ring behavior).
+  ctx.slots.inject('conversation.view', () => ctx.slots.register({
+    name: 'conversation.view',
+    id: 'multi-wall',
+    order: 20,
+    label: () => t('view.multiWall'),
+    locale: NS,
+    store: wallStore,
+    inject: () => createWallInjected(),
+  }, WallView))
+
+  // The sidebar footer shortcut: jumps to the wall view. It owns no state —
+  // the view ring decides what renders — so it is a plain action row.
+  ctx.slots.inject('sidebar.footer.action', () => ctx.slots.register({
+    name: 'sidebar.footer.action',
+    id: 'multi-wall',
+    order: 10,
+    locale: NS,
+  }, WallToggle))
+}

package/src/client/locales.ts

@@ -0,0 +1,100 @@
+/** `multiWall` namespace dictionaries. */
+
+/** Simplified Chinese dictionary (the key-set source of truth). */
+export const zh = {
+  'toggle': '多窗口',
+  'toggle.aria': '打开或关闭多窗口',
+  'view.multiWall': '多窗口',
+  'overlay.title': '多窗口',
+  'overlay.close': '关闭',
+  'scan': '发现实例',
+  'scan.from': '起始端口',
+  'scan.to': '结束端口',
+  'create': '新建窗口',
+  'create.pending': '启动中…',
+  'create.done': '已创建窗口 :{port}',
+  'create.failed': '创建失败：{error}',
+  'create.unknown': '未知原因',
+  'exit': '退出',
+  'exit.aria': '退出多窗口，返回对话',
+  'link': '手机访问',
+  'link.aria': '获取手机访问链接',
+  'link.fetching': '正在获取链接…',
+  'link.none': '未检测到局域网地址',
+  'link.copy': '复制链接',
+  'link.copied': '已复制',
+  'link.hint': '提示：{hint}',
+  'link.reachable': '手机在同一网络时可用：{urls}',
+  'link.unreachable': '当前实例仅绑定本机，手机无法访问。{hint}',
+  'link.token': '口令：{token}',
+  'columns': '列数',
+  'columns.auto': '自动',
+  'refresh': '全部刷新',
+  'openTab': '新标签页打开',
+  'reload': '重新加载',
+  'remove': '从视图移除',
+  'stop': '关闭实例',
+  'stop.confirm': '确定关闭？',
+  'stop.self': '即将关闭当前实例（本页面将断开）',
+  'stop.done': '已关闭 :{port}',
+  'stop.failed': '关闭 :{port} 失败：{error}',
+  'zoom': '放大',
+  'loading': '加载中',
+  'empty': '没有检测到 DSH 实例',
+  'empty.hint': '先启动若干 dsh web --port <n> 实例，再点击「发现实例」或手动添加端口。',
+  'status.scanning': '扫描 {from}–{to} …',
+  'status.found': '发现 {count} 个实例：{ports}',
+  'status.none': '区间 {from}–{to} 未发现 DSH 实例',
+  'status.refreshed': '已刷新全部窗口',
+} satisfies Record<string, string>
+
+/** The multi-wall namespace key union. */
+export type MultiWallKey = keyof typeof zh
+
+/** English dictionary, checked complete against the zh key set. */
+export const en = {
+  'toggle': 'Multi-Window',
+  'toggle.aria': 'Toggle multi-window',
+  'view.multiWall': 'Multi-Window',
+  'overlay.title': 'Multi-Window',
+  'overlay.close': 'Close',
+  'scan': 'Discover',
+  'scan.from': 'Start port',
+  'scan.to': 'End port',
+  'create': 'New window',
+  'create.pending': 'Starting…',
+  'create.done': 'Created window :{port}',
+  'create.failed': 'Create failed: {error}',
+  'create.unknown': 'unknown reason',
+  'exit': 'Exit',
+  'exit.aria': 'Exit multi-window and return to chat',
+  'link': 'Phone access',
+  'link.aria': 'Get phone access link',
+  'link.fetching': 'Fetching link…',
+  'link.none': 'No LAN address detected',
+  'link.copy': 'Copy link',
+  'link.copied': 'Copied',
+  'link.hint': 'Hint: {hint}',
+  'link.reachable': 'Reachable on the same network: {urls}',
+  'link.unreachable': 'This instance binds loopback only; phones cannot reach it. {hint}',
+  'link.token': 'Token: {token}',
+  'columns': 'Columns',
+  'columns.auto': 'Auto',
+  'refresh': 'Refresh all',
+  'openTab': 'Open in new tab',
+  'reload': 'Reload',
+  'remove': 'Remove from view',
+  'stop': 'Stop instance',
+  'stop.confirm': 'Confirm stop?',
+  'stop.self': 'Stopping the current instance (this page will disconnect)',
+  'stop.done': 'Stopped :{port}',
+  'stop.failed': 'Failed to stop :{port}: {error}',
+  'zoom': 'Zoom',
+  'loading': 'Loading',
+  'empty': 'No DSH instances found',
+  'empty.hint': 'Start a few `dsh web --port <n>` instances first, then click "Discover" or add a port manually.',
+  'status.scanning': 'Scanning {from}–{to} …',
+  'status.found': 'Found {count} instance(s): {ports}',
+  'status.none': 'No DSH instances in {from}–{to}',
+  'status.refreshed': 'Refreshed all windows',
+} satisfies Record<MultiWallKey, string>

package/src/client/store.ts

@@ -0,0 +1,40 @@
+/**
+ * Wall store: which instances are shown and the grid columns. The ports list
+ * is the wall's whole business state — discovery writes it, removal filters
+ * it, and the grid renders from it. Open/closed is NOT stored here: the wall
+ * is a `conversation.view` ring entry, so the active view (chat store's
+ * `view` field) decides whether it renders.
+ */
+import { defineStore, type EngineStoreHandle } from '@deepseek-ai/dsh-client-runtime/client'
+
+/** Wall viewing state: displayed ports and grid columns. */
+export type WallState = {
+  ports: number[]
+  columns: string
+}
+
+/** The wall store's complete write set. */
+export type WallActions = {
+  setPorts: (draft: WallState, ports: number[]) => void
+  addPort: (draft: WallState, port: number) => void
+  removePort: (draft: WallState, port: number) => void
+  setColumns: (draft: WallState, columns: string) => void
+}
+
+/**
+ * Create the wall store handle. Persisted under `dsh.multi-wall` so the port
+ * set and column choice survive view switches and reloads.
+ * @returns the store handle (spec + type + identity + factory in one).
+ */
+export function createWallStore(): EngineStoreHandle<WallState, WallActions> {
+  return defineStore({
+    init: (): WallState => ({ ports: [], columns: 'auto' }),
+    persist: 'dsh.multi-wall',
+    actions: {
+      setPorts: (d, ports: number[]) => { d.ports = ports },
+      addPort: (d, port: number) => { if (!d.ports.includes(port)) d.ports = [...d.ports, port] },
+      removePort: (d, port: number) => { d.ports = d.ports.filter(p => p !== port) },
+      setColumns: (d, columns: string) => { d.columns = columns },
+    },
+  })
+}