dsh-zen-remote 1.0.0

package/src/client/MobileSessionInfo.tsx

@@ -0,0 +1,303 @@
+import { useEffect, useState } from 'react'
+import type { PropsLocale, PropsRuntime } from '@deepseek-ai/dsh-client-ui-slots'
+import {
+  IconArchiveOutline20,
+  IconBranchOutline16,
+  IconCloseOutline16,
+  IconDownloadOutline16,
+  IconEditOutline16,
+} from '@deepseek-ai/dsh-client-ui-primitives'
+import { workspaceTitleOf } from '@deepseek-ai/dsh-client-runtime/client'
+import type { SessionFace, SessionId } from '@deepseek-ai/dsh-client-runtime/client'
+import { NS } from './locales.ts'
+import { GO_HOME_EVENT, SESSION_INFO_EVENT } from './nav-store.ts'
+import { useViewTabs } from './MobileSessionHeader.tsx'
+
+// Type-only: pulls the 'sessionStats' / 'tokenUsage' SessionProjectionMap
+// merges into the program so useProjection('sessionStats' | 'tokenUsage')
+// below type-checks (see appendix D: the official StatsLine, the only other
+// consumer, lives in dsh-client-ui-conversation but never re-exports these
+// merges from a file this package's type graph reaches — devDependencies +
+// tsconfig.client.json path entries added for exactly this).
+import type {} from '@deepseek-ai/dsh-session-stats/client'
+import type {} from '@deepseek-ai/dsh-token-meter/client'
+
+/** Full props for the session-info sheet (header.utilities, second entry). */
+export type MobileSessionInfoProps =
+  & PropsRuntime<'conversation.session.header.utilities'>
+  & PropsLocale<typeof NS>
+  & {
+    /** Bound ctx.sessions.fork({sessionId}). */
+    forkSession: (sessionId: SessionId) => Promise<SessionId>
+    /** Bound ctx.sessions.open(id) — lands on the freshly forked session. */
+    openSession: (id: SessionId) => void
+    /** Bound ctx.sessions.binding(id)?.session.rename(title); undefined when the binding is gone. */
+    renameSession: (sessionId: SessionId, title: string) => ReturnType<SessionFace['rename']> | undefined
+    /** Bound ctx.workspaces.archiveSession(sessionId). */
+    archiveSession: (sessionId: SessionId) => Promise<void>
+    /** Bound ctx.sessionLogDownload.download(sessionId) — owns its own progress/result modal. */
+    downloadSessionLog: (sessionId: SessionId) => Promise<void>
+  }
+
+/* ---- StatsLine-identical formatting -------------------------------------
+ * Ported (not imported — the source functions are module-private to
+ * StatsLine.tsx) from dsh-client-ui-conversation lib/client.js:2755-2787
+ * (verified 2026-08-17). The "口径对齐官方" requirement is digit-for-digit,
+ * not just look-alike, so the algorithm is copied exactly. */
+
+/** Compact token count: 517 / 12.2K / 517K / 1.2M (one decimal under three digits). */
+function formatTokens(n: number): string {
+  const scaled = (v: number) => (v >= 100 ? String(Math.round(v)) : String(Math.round(v * 10) / 10))
+  if (n < 1e3) return String(n)
+  if (n < 1e6) return `${scaled(n / 1e3)}K`
+  return `${scaled(n / 1e6)}M`
+}
+
+/** Compact duration: 45.2s under a minute, 2m42s from there on. */
+function formatDuration(ms: number): string {
+  const s = ms / 1e3
+  if (s < 60) return `${Math.round(s * 10) / 10}s`
+  const whole = Math.round(s)
+  return `${Math.floor(whole / 60)}m${whole % 60}s`
+}
+
+/** Sum of the three disjoint prompt-side billing buckets. */
+function billedInputTokens(usage: { uncachedInputTokens: number; cacheReadTokens: number; cacheWriteTokens: number }): number {
+  return usage.uncachedInputTokens + usage.cacheReadTokens + usage.cacheWriteTokens
+}
+
+/** Cache-hit share of prompt-side input over the whole durable log; null when nothing was billed. */
+function cacheHitPercent(usage: { cacheReadTokens: number; uncachedInputTokens: number; cacheWriteTokens: number }): number | null {
+  const denominator = billedInputTokens(usage)
+  return denominator === 0 ? null : Math.round((usage.cacheReadTokens / denominator) * 100)
+}
+
+/** Data-missing / not-yet-observed placeholder for a stat cell. */
+const NA = '—'
+
+/**
+ * Session-info sheet: the bottom sheet that gathers everything S3 pulled off
+ * the composer (the official stats strip) and everything S2 left out of the
+ * header (Chat/Trajectory as a real control, badges, session actions).
+ *
+ * Registered as a SECOND entry on `conversation.session.header.utilities` —
+ * session scope, sibling to the ⓘ button that opens it
+ * (MobileSessionHeader.tsx dispatches {@link SESSION_INFO_EVENT}).
+ *
+ * Mount-point choice (the plan's own tradeoff to weigh): this needs
+ * `useProjection`/`sessionId` for the stats grid, and those are
+ * session-scope-only standard props — `header.utilities` has them,
+ * `shell.overlay` (S1's other option) does not. `shell.overlay` would have
+ * gained nothing in exchange (GlobalStandardProps — `useSessions` for the
+ * badges/subagent-count — is unconditional on every slot per
+ * `PropsRuntime`, so this component gets it here for free too) while
+ * running into a real problem: shell.overlay content renders inside the
+ * `pI_x6G_overlayLayer`, a z-index:20 stacking context (AGENTS.md), and the
+ * composer's own permission/model bottom sheets sit at z:60 — a
+ * shell.overlay-hosted info sheet would render BEHIND an open composer
+ * menu. Mounting inside the header's own DOM (outside that capped layer)
+ * lets this sheet's z-index clear every other phone-shell float.
+ */
+export function MobileSessionInfo({
+  sessionId,
+  useSessions,
+  useProjection,
+  forkSession,
+  openSession,
+  renameSession,
+  archiveSession,
+  downloadSessionLog,
+  t,
+}: MobileSessionInfoProps) {
+  const [open, setOpen] = useState(false)
+  const [busy, setBusy] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    const onOpen = (): void => {
+      setError(null)
+      setOpen(true)
+    }
+    window.addEventListener(SESSION_INFO_EVENT, onOpen)
+    return () => window.removeEventListener(SESSION_INFO_EVENT, onOpen)
+  }, [])
+
+  const tabs = useViewTabs()
+  const row = useSessions((s) => s.byId[sessionId])
+  const subagentCount = useSessions((s) => s.subagentsByParent[sessionId]?.entries.length ?? 0)
+  const stats = useProjection('sessionStats')
+  const usage = useProjection('tokenUsage')
+
+  if (!open) return null
+
+  const close = (): void => setOpen(false)
+
+  const run = async (action: () => Promise<void>): Promise<void> => {
+    setBusy(true)
+    setError(null)
+    try {
+      await action()
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err))
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  const onRename = (): void => {
+    const next = window.prompt(t('infoRenamePrompt'), row?.displayTitle ?? '')
+    if (next === null) return
+    const title = next.trim()
+    if (title === '') return
+    void run(async () => {
+      const result = await renameSession(sessionId, title)
+      if (result === undefined) throw new Error(t('infoRename'))
+      if (!result.ok) throw new Error(result.error.message)
+    })
+  }
+
+  const onFork = (): void => {
+    void run(async () => {
+      const forkedId = await forkSession(sessionId)
+      openSession(forkedId)
+      close()
+    })
+  }
+
+  const onArchive = (): void => {
+    if (!window.confirm(t('infoArchiveConfirm'))) return
+    void run(async () => {
+      await archiveSession(sessionId)
+      window.dispatchEvent(new CustomEvent(GO_HOME_EVENT))
+      close()
+    })
+  }
+
+  const onExport = (): void => {
+    void downloadSessionLog(sessionId)
+  }
+
+  const cacheHit = usage === undefined ? null : cacheHitPercent(usage)
+  const tokensEmpty = usage === undefined || (billedInputTokens(usage) === 0 && usage.outputTokens === 0)
+  const cwd = row?.cwd === undefined || row.cwd === '' ? undefined : workspaceTitleOf(row.cwd)
+
+  const cells: Array<{ label: string; value: string; sub: string | undefined }> = [
+    { label: t('infoStatTurns'), value: stats === undefined ? NA : String(stats.turns), sub: undefined },
+    { label: t('infoStatSteps'), value: stats === undefined ? NA : String(stats.steps), sub: undefined },
+    {
+      label: t('infoStatTtft'),
+      value: stats === undefined || stats.ttftSteps === 0 ? NA : formatDuration(stats.ttftMs / stats.ttftSteps),
+      sub: undefined,
+    },
+    {
+      label: t('infoStatLlm'),
+      value: stats === undefined || stats.llmMs === 0 ? NA : formatDuration(stats.llmMs),
+      sub: undefined,
+    },
+    {
+      label: t('infoStatTool'),
+      value: stats === undefined || stats.toolMs === 0 ? NA : formatDuration(stats.toolMs),
+      sub: undefined,
+    },
+    {
+      label: t('infoStatTokens'),
+      value: tokensEmpty || usage === undefined
+        ? NA
+        : `${formatTokens(billedInputTokens(usage))}→${formatTokens(usage.outputTokens)}`,
+      sub: cacheHit === null ? undefined : t('infoCacheHit', { percent: cacheHit }),
+    },
+  ]
+
+  return (
+    <div data-mobile-nav="info-layer">
+      <div
+        data-mobile-nav="info-mask"
+        role="button"
+        tabIndex={-1}
+        aria-label={t('infoClose')}
+        onClick={close}
+      />
+      <div data-mobile-nav="info-sheet" role="dialog" aria-modal="true">
+        <div data-mobile-nav="info-head">
+          {tabs.length > 1 && (
+            // Deliberately NOT role="tablist"/role="tab": readViewTabs()
+            // (MobileSessionHeader.tsx) locates the OFFICIAL tablist with
+            // `header [role="tablist"]`, and this control also renders
+            // inside <header> (the header.utilities slot) — reusing that
+            // role here made the query match this control instead of the
+            // real one once the sheet was open, so a tap "switched" this
+            // already-open segmented control rather than the official tabs
+            // underneath (found via HTMLElement.prototype.click patching:
+            // tab.el.click() was recursing into its own button). A plain
+            // button group with aria-pressed avoids the collision entirely.
+            <div data-mobile-nav="info-tabs" role="group" aria-label={t('switchView')}>
+              {tabs.map((tab) => (
+                <button
+                  key={tab.label}
+                  type="button"
+                  aria-pressed={tab.active}
+                  data-mobile-nav="info-tab"
+                  data-selected={tab.active ? '' : undefined}
+                  onClick={() => {
+                    if (!tab.active) tab.el.click()
+                    close()
+                  }}
+                >
+                  {tab.label}
+                </button>
+              ))}
+            </div>
+          )}
+          <button type="button" data-mobile-nav="info-close" aria-label={t('infoClose')} onClick={close}>
+            <IconCloseOutline16 size={16} />
+          </button>
+        </div>
+
+        <div data-mobile-nav="info-badges">
+          {row?.agentPreset !== undefined && <span data-mobile-nav="info-badge">{row.agentPreset}</span>}
+          {subagentCount > 0 && (
+            <span data-mobile-nav="info-badge">{t('infoSubagents', { count: subagentCount })}</span>
+          )}
+          <span data-mobile-nav="info-badge-cwd">{cwd ?? t('infoCwdFallback')}</span>
+        </div>
+
+        <div data-mobile-nav="info-stats">
+          {cells.map((cell) => (
+            <div key={cell.label} data-mobile-nav="info-stat">
+              <span data-mobile-nav="info-stat-value">{cell.value}</span>
+              <span data-mobile-nav="info-stat-label">{cell.label}</span>
+              {cell.sub !== undefined && <span data-mobile-nav="info-stat-sub">{cell.sub}</span>}
+            </div>
+          ))}
+        </div>
+
+        {error !== null && <div data-mobile-nav="info-error">{t('infoActionError', { message: error })}</div>}
+
+        <div data-mobile-nav="info-actions">
+          <button type="button" data-mobile-nav="info-action" disabled={busy} onClick={onExport}>
+            <IconDownloadOutline16 size={16} />
+            <span>{t('infoExport')}</span>
+          </button>
+          <button type="button" data-mobile-nav="info-action" disabled={busy} onClick={onRename}>
+            <IconEditOutline16 size={16} />
+            <span>{t('infoRename')}</span>
+          </button>
+          <button type="button" data-mobile-nav="info-action" disabled={busy} onClick={onFork}>
+            <IconBranchOutline16 size={16} />
+            <span>{t('infoFork')}</span>
+          </button>
+          <button
+            type="button"
+            data-mobile-nav="info-action"
+            data-mobile-nav-danger=""
+            disabled={busy}
+            onClick={onArchive}
+          >
+            <IconArchiveOutline20 size={20} />
+            <span>{t('infoArchive')}</span>
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/client/attach-upload.ts

@@ -0,0 +1,140 @@
+/**
+ * S7 attachment plumbing: the string math plus the thumbnail registry.
+ *
+ * Kept free of React so `scripts/check-attach-upload.mjs` can import it
+ * directly under Node's type stripping.
+ *
+ * The one idea worth stating up front: **the composer draft is the only state
+ * this feature has.** Every attachment is an `@.dsh-uploads/name` token in the
+ * draft text, and the chip row is a pure function of that text. Nothing to
+ * keep in sync — the user deleting the token by hand, or the official send
+ * clearing the draft, makes the chips disappear on their own.
+ */
+
+/** Exact host route registered by the node half (src/index.ts). */
+export const UPLOAD_ROUTE = '/_dsh/mobile-nav/upload'
+
+/** Workspace-relative directory uploads land in; also the `@` mention prefix. */
+export const UPLOAD_DIR = '.dsh-uploads'
+
+/**
+ * One attachment mention in the draft.
+ *
+ * `\S+` is safe as the terminator because {@link safeUploadName} (host side)
+ * folds every whitespace run in a filename into `_` — a path with a space in
+ * it would break the `@` mention for the agent too, not just for this regex.
+ */
+const MENTION = new RegExp(`@(${UPLOAD_DIR.replace('.', '\\.')}/\\S+)`, 'g')
+
+/**
+ * The upload URL for one file. Root-relative on purpose: through the
+ * gateway half the pairing cookie only rides along same-origin.
+ * @param sessionId - target session (its workspace receives the file).
+ * @param name - the browser filename; the host sanitizes it again.
+ * @returns a root-relative URL.
+ */
+export function uploadUrl(sessionId: string, name: string): string {
+  const query = new URLSearchParams({ session: sessionId, name })
+  return `${UPLOAD_ROUTE}?${query.toString()}`
+}
+
+/**
+ * Every attachment mentioned in a draft, in reading order, without repeats.
+ * @param draft - the composer draft text.
+ * @returns workspace-relative paths (no leading `@`).
+ */
+export function mentionsIn(draft: string): string[] {
+  return [...new Set([...draft.matchAll(MENTION)].map((match) => match[1] as string))]
+}
+
+/**
+ * Append one `@path` mention to the draft.
+ *
+ * Separated from whatever came before by a space (or a newline when the draft
+ * already ends in one), and trailed by a space so the next mention does not
+ * fuse onto this one — and so {@link draftWithoutMention} can lift it back out
+ * without leaving a double space behind.
+ * @param draft - the current draft text.
+ * @param relPath - workspace-relative path returned by the upload route.
+ * @returns the next draft.
+ */
+export function draftWithMention(draft: string, relPath: string): string {
+  if (draft === '' || draft.endsWith('\n') || draft.endsWith(' ')) return `${draft}@${relPath} `
+  return `${draft} @${relPath} `
+}
+
+/**
+ * Remove one `@path` mention from the draft — what a chip's × does.
+ *
+ * The file itself stays on disk: it is a few KB in a directory the user can
+ * clear whenever, and deleting it would need a second host route whose only
+ * job is destruction.
+ * @param draft - the current draft text.
+ * @param relPath - the attachment to drop.
+ * @returns the next draft; whitespace-only collapses to empty.
+ */
+export function draftWithoutMention(draft: string, relPath: string): string {
+  const token = `@${relPath}`
+  const next = draft.split(`${token} `).join('').split(token).join('')
+  return next.trim() === '' ? '' : next
+}
+
+/** The filename part of a workspace-relative path. */
+export function leafOf(relPath: string): string {
+  return relPath.slice(relPath.lastIndexOf('/') + 1)
+}
+
+/**
+ * Shorten a filename from the MIDDLE, so both the stem and the extension stay
+ * readable (CSS `text-overflow` can only cut one end).
+ * @param text - the filename.
+ * @param max - budget in characters, including the ellipsis.
+ * @returns the original when it fits, else head + `…` + tail.
+ */
+export function middleEllipsis(text: string, max = 18): string {
+  if (text.length <= max) return text
+  const head = Math.ceil((max - 1) / 2)
+  return `${text.slice(0, head)}…${text.slice(text.length - (max - 1 - head))}`
+}
+
+/**
+ * Preview URLs by attachment path.
+ *
+ * Module-level because the button that creates them and the chip row that
+ * renders them are two different slot entries with no shared React ancestor.
+ * Nothing persists it: after a reload the draft still carries the mentions
+ * (it is persisted) but this map is empty, so those chips render as file
+ * chips. That degradation is correct — the browser-owned blob is gone.
+ */
+const thumbnails = new Map<string, string>()
+
+/**
+ * Register a preview for an uploaded image.
+ * @param relPath - workspace-relative path the file landed on.
+ * @param blob - the browser-owned file.
+ */
+export function rememberThumbnail(relPath: string, blob: Blob): void {
+  if (!blob.type.startsWith('image/')) return
+  const previous = thumbnails.get(relPath)
+  if (previous !== undefined) URL.revokeObjectURL(previous)
+  thumbnails.set(relPath, URL.createObjectURL(blob))
+}
+
+/** The preview URL for one attachment, or undefined when there is none. */
+export function thumbnailFor(relPath: string): string | undefined {
+  return thumbnails.get(relPath)
+}
+
+/**
+ * Revoke and forget every preview whose attachment is no longer in the draft.
+ * Called whenever the chip row re-renders, so a removed chip frees its blob.
+ * @param keep - the attachments still mentioned.
+ */
+export function releaseThumbnailsExcept(keep: readonly string[]): void {
+  const live = new Set(keep)
+  for (const [relPath, url] of thumbnails) {
+    if (live.has(relPath)) continue
+    URL.revokeObjectURL(url)
+    thumbnails.delete(relPath)
+  }
+}

package/src/client/chips-store.ts

@@ -0,0 +1,41 @@
+import { createSnapshotStore } from '@deepseek-ai/dsh-client-runtime/client'
+import { useSyncExternalStore } from 'react'
+
+/**
+ * Home-screen chip visibility, keyed by {@link ChipDef.id} (MobileHomeChips.tsx).
+ * A missing key means "shown" — new chip ids need no migration step, they
+ * just default enabled the first time they exist.
+ */
+export type ChipPrefs = Record<string, boolean>
+
+/**
+ * Plain `createSnapshotStore` (runtime contract/store.d.ts), not a
+ * `defineStore` slot handle: this preference is not tied to any slot's
+ * mount lifecycle (unlike nav-store.ts's page stack, which a session-scope
+ * registration also needs a handle for), so it needs none of that
+ * machinery — a bare persisted store is the whole requirement (design doc
+ * Appendix G lists both as valid `defineStore`/`createSnapshotStore`
+ * options for this exact case). A module-level constant is safe here
+ * (unlike a `defineStore` handle) because this store is not resolved
+ * per-scope by the slot runtime; it is just a persisted value with its own
+ * localStorage-backed identity, so re-importing the module always reaches
+ * the same store.
+ */
+const store = createSnapshotStore<ChipPrefs>({}, { persist: { name: 'dsh-mobile-nav.chips' } })
+
+/** @param prefs - current snapshot. @param id - chip id. @returns whether the chip should render (default true). */
+export function isChipEnabled(prefs: ChipPrefs, id: string): boolean {
+  return prefs[id] !== false
+}
+
+/** Flip one chip's visibility and persist it. @param id - chip id. */
+export function toggleChip(id: string): void {
+  store.update((draft) => {
+    draft[id] = !isChipEnabled(draft, id)
+  })
+}
+
+/** Live chip-prefs mirror (React 18 tearing-safe external store read). */
+export function useChipsPrefs(): ChipPrefs {
+  return useSyncExternalStore(store.subscribe, store.getSnapshot)
+}