@orbit-work/ui 0.1.0

package/src/components/domain/desktop/DesktopWorkbenchShell/index.tsx

@@ -0,0 +1,167 @@
+"use client"
+
+import { type ReactNode, useEffect, useState } from "react"
+import { AppLayout } from "../../../Layout"
+import { WindowBand, type WindowBandPlatform, WindowChrome, type WindowChromeProps } from "../../../composite/TitleBar"
+
+export type DesktopWorkbenchView = "chat" | "skills" | "sites" | "scheduled-tasks" | "workspace" | "library"
+
+const WORKBENCH_VIEWS: DesktopWorkbenchView[] = ["chat", "skills", "sites", "scheduled-tasks", "workspace", "library"]
+
+export interface DesktopWorkbenchShellProps {
+  view: DesktopWorkbenchView
+  sidebar: ReactNode
+  chat: ReactNode
+  skills: ReactNode
+  sites?: ReactNode
+  scheduledTasks: ReactNode
+  workspace: ReactNode
+  /**
+   * 素材库槽（研发 origin/main 新增的 `library` 视图）。研发那版是必填；这里降为可选，
+   * 与同样可选的 `sites` 同口径——库内 23 处 story 壳都只喂自己那一屏，缺省 `null`
+   * 即「这一屏没接」。宿主 App.tsx 照常传 `<LibraryPage />`，行为不变。
+   */
+  library?: ReactNode
+  /**
+   * 窗口带槽。**只有 windows 缺省补带**（R2 · Terry 2026-09-03 第 1 条）：windows 是
+   * `frame:false`，三键必须由 App 自绘，那条 48 通栏带留着、折叠钮在带里；mac 有系统红绿灯、
+   * linux 有系统边框、web 根本没有窗口条 —— 三者缺省都**不出带**，折叠钮住进侧栏顶行
+   * （`Layout/SidebarShell` 的 `data-slot="sidebar-toprow"`）。`contained`（嵌在画框或文档里、
+   * 本件不是窗口根）缺省同样不出带。传 `null` 显式取消，传自定义节点即覆盖。
+   */
+  header?: ReactNode
+  footer?: ReactNode
+  /**
+   * 平台（受控，权威值由主进程注入）：决定**要不要**默认带（仅 windows 要）与带里的三键。
+   * 侧栏是 `ReactNode` 槽，本件注不进去——同一个值宿主要再传给 `DesktopSidebarView.platform`
+   * 一次（顶行归侧栏自己出）。
+   */
+  platform?: WindowBandPlatform
+  /** mac 全屏：红绿灯隐藏，默认带的让位块收 0，折叠钮回到左内距。 */
+  fullscreen?: boolean
+  /** 侧栏是否折叠（受控）：只改默认带里折叠钮的语义，不改其坐标。仅 windows 用得上。 */
+  sidebarCollapsed?: boolean
+  /** 折叠钮回调，透传给默认带里的折叠钮（仅 windows；其余平台的钮在侧栏顶行里）。 */
+  onToggleSidebar?: () => void
+  /** windows 的窗口三键回调（最小化 / 最大化-还原 / 关闭）；mac 走系统红绿灯，linux 走系统边框。 */
+  windowControls?: WindowChromeProps
+  /**
+   * 会话侧开栏槽（`WorkbenchSidePanel`，原型 2246–2250）：渲染成 `.owcenter`
+   * **同级的行方向兄弟**，两档宽 38% / 68% 内联挤压会话列（裁决 9）。
+   * 缺省不出栏，折叠态不留痕迹；不要塞进 `AppLayout.aside`（那是三栏第三栏，
+   * 320 定宽、窄屏整栏收起，语义不同）。
+   */
+  sidePanel?: ReactNode
+  settings?: ReactNode
+  taskDetail?: ReactNode
+  overlays?: ReactNode
+  contained?: boolean
+  className?: string
+}
+
+/**
+ * Desktop 与文档工作台共用的页面树。宿主负责数据、状态和能力适配，
+ * 这里仅维护稳定的布局、页面顺序和覆盖层挂载位置。
+ *
+ * 立面（DS2 P6 · §5）：整屏骨架落在基座件上——`AppLayout` 出三栏，`header` 槽收窗口带
+ * `composite/TitleBar` / `WindowBand`（48 高 `--ow-titlebar-h`、与地同色 `--ow-bg`、无分隔线、
+ * 贴地零影，§7）。**带只属 windows**（R2）：那边 `frame:false`、三键得自绘，所以 `header` 缺省时
+ * 本件只在 `platform === "windows"` 且非 `contained` 时按 `sidebarCollapsed` / `onToggleSidebar` /
+ * `windowControls` 补一条默认带；mac/linux/web 缺省无带，折叠钮住进侧栏顶行。
+ * `sidebar` 槽收 `Layout/SidebarShell`
+ * （240 宽、自带折叠与 1px 右边线），中栏 `.owcenter` 是唯一自适应栏：贴地立面
+ * ＝0 影 ＋ 1px `--ow-border-strong`，圆角 `--ow-radius-xl`。本件自身不画影、
+ * 不加渐变、不自造边框，页面切换只切 `hidden`，无位移缩放（§9）。
+ *
+ * A8-B1（裁决 9 · 原型 815 + 2246–2250）：内容区那一层现在是一**行**
+ * （`.desktop-workbench-row`）——会话列 `.owcenter` 与 `sidePanel` 槽是行方向兄弟，
+ * 侧开栏两档宽 38% / 68% 内联挤压会话列（会话列 360 保底），槽空着时这一行只有会话列
+ * 一个孩子，几何与开栏前逐像素相同。
+ * R3 中性件——不含信标元素。
+ */
+export function DesktopWorkbenchShell({
+  view,
+  sidebar,
+  chat,
+  skills,
+  sites,
+  scheduledTasks,
+  workspace,
+  library,
+  header,
+  footer,
+  platform = "web",
+  fullscreen = false,
+  sidebarCollapsed = false,
+  onToggleSidebar,
+  windowControls,
+  sidePanel,
+  settings,
+  taskDetail,
+  overlays,
+  contained = false,
+  className = "",
+}: DesktopWorkbenchShellProps) {
+  const [visitedViews, setVisitedViews] = useState<ReadonlySet<DesktopWorkbenchView>>(() => new Set([view]))
+
+  useEffect(() => {
+    setVisitedViews((current) => {
+      if (current.has(view)) return current
+      const next = new Set(current)
+      next.add(view)
+      return next
+    })
+  }, [view])
+
+  /*
+   * 窗口带（R2）：`header` 显式给了就用给的（含显式 null＝不出带）；缺省时**只有 windows**
+   * 补默认带——mac 有系统红绿灯、linux 有系统边框、web 无窗口条，三者的折叠钮住在侧栏顶行。
+   * `contained`（不是窗口根）缺省一律不出带。三键随带走，也只在 windows 挂。
+   */
+  const chrome = platform === "windows" ? <WindowChrome {...windowControls} /> : undefined
+  const defaultBand =
+    contained || platform !== "windows" ? null : (
+      <WindowBand
+        platform={platform}
+        fullscreen={fullscreen}
+        collapsed={sidebarCollapsed}
+        onToggle={onToggleSidebar}
+        chrome={chrome}
+      />
+    )
+  const resolvedHeader = header === undefined ? defaultBand : header
+
+  const pages: Record<DesktopWorkbenchView, ReactNode> = {
+    chat,
+    skills,
+    sites: sites ?? null,
+    "scheduled-tasks": scheduledTasks,
+    workspace,
+    library: library ?? null,
+  }
+
+  return (
+    <>
+      <AppLayout header={resolvedHeader} footer={footer} sidebar={sidebar} contained={contained} className={className}>
+        <div className="desktop-workbench-row" data-side-panel={sidePanel ? "on" : "off"}>
+          <div className="owcenter" data-view={view}>
+            {WORKBENCH_VIEWS.map((pageView) => {
+              if (pageView !== view && !visitedViews.has(pageView)) return null
+              const active = pageView === view
+
+              return (
+                <div key={pageView} className="desktop-workbench-page" hidden={!active} aria-hidden={!active}>
+                  {pages[pageView]}
+                </div>
+              )
+            })}
+          </div>
+          {sidePanel}
+        </div>
+      </AppLayout>
+      {taskDetail}
+      {settings}
+      {overlays}
+    </>
+  )
+}

package/src/components/domain/desktop/DesktopWorkspacePageView/DesktopWorkspacePageView.stories.tsx

@@ -0,0 +1,135 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { SearchInput } from "../../../composite/SearchInput"
+import { EmptyState } from "../../../primitives/EmptyState"
+import { DesktopWorkspaceProjectRowView } from "../DesktopWorkspaceView"
+import { DesktopWorkspacePageView } from "./index"
+
+const meta = {
+  title: "Desktop/DesktopWorkspacePageView",
+  component: DesktopWorkspacePageView,
+  parameters: {
+    layout: "fullscreen",
+  },
+} satisfies Meta<typeof DesktopWorkspacePageView>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const ProjectsTab: Story = {
+  args: {
+    tab: "projects",
+    onTabChange: (tab) => console.log("Tab changed", tab),
+    sortAsc: false,
+    onSort: () => console.log("Sort"),
+    children: (
+      <>
+        <DesktopWorkspaceProjectRowView
+          name="orbit-fe"
+          path="/Users/zhangying/projects/orbit-fe"
+          onEnter={() => console.log("Enter")}
+          onOpenDirectory={() => console.log("Open")}
+        />
+        <DesktopWorkspaceProjectRowView
+          name="backend"
+          path="/Users/zhangying/projects/backend"
+          onEnter={() => console.log("Enter")}
+          onOpenDirectory={() => console.log("Open")}
+        />
+      </>
+    ),
+  },
+}
+
+export const MemoryTab: Story = {
+  args: {
+    tab: "memory",
+    onTabChange: (tab) => console.log("Tab changed", tab),
+    sortAsc: true,
+    onSort: () => console.log("Sort"),
+    children: (
+      <div style={{ padding: 20 }}>
+        <p>记忆列表内容</p>
+      </div>
+    ),
+  },
+}
+
+export const MemoryWithSearch: Story = {
+  args: {
+    tab: "memory",
+    onTabChange: (tab) => console.log("Tab changed", tab),
+    showMemorySearchAction: true,
+    memorySearchOpen: true,
+    onToggleMemorySearch: () => console.log("Toggle search"),
+    memorySearch: <SearchInput placeholder="搜索记忆内容…" onChange={() => {}} />,
+    sortAsc: false,
+    onSort: () => console.log("Sort"),
+    children: (
+      <div style={{ padding: 20 }}>
+        <p>搜索结果</p>
+      </div>
+    ),
+  },
+}
+
+export const WithOverlays: Story = {
+  args: {
+    tab: "projects",
+    onTabChange: (tab) => console.log("Tab changed", tab),
+    sortAsc: false,
+    onSort: () => console.log("Sort"),
+    children: (
+      <DesktopWorkspaceProjectRowView
+        name="my-project"
+        path="/path/to/project"
+        onEnter={() => console.log("Enter")}
+        onOpenDirectory={() => console.log("Open")}
+      />
+    ),
+    overlays: (
+      <div
+        style={{
+          position: "fixed",
+          inset: 0,
+          background: "rgba(0, 0, 0, 0.5)",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          color: "white",
+        }}
+      >
+        模态对话框
+      </div>
+    ),
+  },
+}
+
+/** 空态 G5（§6）：children 为空时页壳自动落 `primitives/EmptyState`——信标母题 ＋ 一句 text-2。 */
+export const EmptyProjects: Story = {
+  args: {
+    tab: "projects",
+    onTabChange: (tab) => console.log("Tab changed", tab),
+    sortAsc: false,
+    onSort: () => console.log("Sort"),
+    children: null,
+  },
+}
+
+/** 宿主自带动作钮的空态：传一枚自己的 `EmptyState` 覆盖缺省文案。 */
+export const EmptyProjectsWithAction: Story = {
+  args: {
+    tab: "projects",
+    onTabChange: (tab) => console.log("Tab changed", tab),
+    sortAsc: false,
+    onSort: () => console.log("Sort"),
+    children: null,
+    empty: (
+      <EmptyState
+        className="ws-page__empty"
+        message="还没有项目。添加一个本地目录，就能从这里进出。"
+        actionLabel="添加项目"
+        onAction={() => console.log("Add project")}
+      />
+    ),
+  },
+}

package/src/components/domain/desktop/DesktopWorkspacePageView/DesktopWorkspacePageViewSource.test.mjs

@@ -0,0 +1,57 @@
+import assert from "node:assert/strict"
+import { readFile } from "node:fs/promises"
+import test from "node:test"
+
+const source = await readFile(new URL("./index.tsx", import.meta.url), "utf8")
+const styles = await readFile(new URL("../../../../../styles/desktop-surfaces.css", import.meta.url), "utf8")
+
+test("workspace exposes only project and memory tabs", () => {
+  assert.match(source, /DesktopWorkspaceTab\s*=\s*['"]projects['"]\s*\|\s*['"]memory['"]/)
+  assert.match(source, /key:\s*['"]projects['"]\s*,\s*label:\s*['"]项目['"]/)
+  assert.match(source, /key:\s*['"]memory['"]\s*,\s*label:\s*['"]记忆['"]/)
+  assert.doesNotMatch(source, /key:\s*['"](?:agents|skills|connectors)['"]/)
+  assert.doesNotMatch(source, /onAddMcp/)
+})
+
+test("workspace head follows the DS2 screen table (48 band · underline tabs · 8px icon buttons)", () => {
+  // 48 带：取 --ow-titlebar-h、与地同色、无分隔线（不画 background / border-bottom）。
+  const head = styles.match(/\.ws-page__head \{[^}]*\}/s)?.[0] ?? ""
+  assert.match(head, /padding: var\(--ow-titlebar-h, 48px\) 28px 0;/)
+  assert.match(head, /align-items: flex-end/)
+  assert.doesNotMatch(head, /background:/)
+  assert.doesNotMatch(head, /border-bottom/)
+  assert.doesNotMatch(styles, /\.ws-page__head[^{]*\{[^}]*44px/s)
+  // 页签一套底线式；不换行、超出横向滚动（窄幅逐字竖排的断版在消费侧钉死）。
+  assert.match(source, /variant="underline"/)
+  assert.match(styles, /\.ws-page__tabs \[data-ow-part="tab"\] \{[^}]*white-space: nowrap/)
+  // 页头图标钮 8px 非圆、32 高、状态全集：全部由 Button 正规变体承担，不再手搓。
+  assert.match(source, /variant=\{memorySearchOpen \? "secondary" : "ghost"\}/)
+  assert.match(source, /<Button variant="ghost" size="md" icon=\{<Sort \/>\}/)
+  assert.doesNotMatch(source, /variant="unstyled"/)
+  assert.doesNotMatch(source, /className=\{?`?\.?fbtn/)
+  // §6 无彩选中：搜索开关不再用 info tint 上色，改 secondary 中性面 ＋ aria-pressed。
+  assert.match(source, /aria-pressed=\{memorySearchOpen\}/)
+  // 退役的两族不得复活。
+  assert.doesNotMatch(styles, /^\.fbtn[ .:{]/m)
+  assert.doesNotMatch(styles, /^\.files__tools[ .:{]/m)
+})
+
+test("workspace list sits in a bg-2 well and the empty state is G5", () => {
+  // 判断表「列表地 bg-2」：surface-2 井 ＋ 1px border ＋ 圆角 12 ＋ §5 贴地零影。
+  const list = styles.match(/\.ws-page__list \{[^}]*\}/s)?.[0] ?? ""
+  assert.match(list, /background: var\(--ow-surface-2\)/)
+  assert.match(list, /solid var\(--ow-border\)/)
+  assert.match(list, /border-radius: var\(--ow-radius-card\)/)
+  assert.doesNotMatch(list, /box-shadow/)
+  // 井里的行 hover 必须仍是「按所在表面递进」，不许比井还暗。
+  assert.match(styles, /\.ws-page__list \.fs-row:hover \{ background: var\(--ow-press\)/)
+  // 空态 G5：走 primitives/EmptyState（信标母题 ＋ 一句 text-2 ＋ 可选动作），禁灰字居中。
+  assert.match(source, /import \{ EmptyState \} from "\.\.\/\.\.\/\.\.\/primitives\/EmptyState"/)
+  assert.match(source, /<EmptyState className="ws-page__empty"/)
+  assert.match(styles, /\.ws-page__empty \{/)
+  // 记忆搜索条外壳只留排布，面归注入控件；不得再套第二层框。
+  const search = styles.match(/\.ws-page__search \{[^}]*\}/s)?.[0] ?? ""
+  assert.doesNotMatch(search, /border:/)
+  assert.doesNotMatch(search, /background:/)
+  assert.doesNotMatch(search, /height:/)
+})

package/src/components/domain/desktop/DesktopWorkspacePageView/index.tsx

@@ -0,0 +1,114 @@
+import { Children, type ReactNode } from "react"
+import { Search, Sort } from "../../../composite/Icons"
+import { Button } from "../../../primitives"
+import { EmptyState } from "../../../primitives/EmptyState"
+import { Tabs } from "../../../primitives/Tabs"
+
+export type DesktopWorkspaceTab = "projects" | "memory"
+
+export interface DesktopWorkspacePageViewProps {
+  tab: DesktopWorkspaceTab
+  onTabChange: (tab: DesktopWorkspaceTab) => void
+  showMemorySearchAction?: boolean
+  memorySearchOpen?: boolean
+  onToggleMemorySearch?: () => void
+  memorySearch?: ReactNode
+  sortAsc?: boolean
+  onSort: () => void
+  children: ReactNode
+  overlays?: ReactNode
+  /**
+   * 列表为空时占位的空态节点（§6 容器空态，G5）。不传时按当前页签落一枚
+   * `primitives/EmptyState` 缺省文案；宿主想自带动作钮就传一枚自己的 `EmptyState`。
+   * 只在 `children` 压根没有子节点（null / false / 空数组）时出现，既有宿主不受影响。
+   */
+  empty?: ReactNode
+}
+
+const WORKSPACE_ITEMS = [
+  { key: "projects", label: "项目" },
+  { key: "memory", label: "记忆" },
+]
+
+const EMPTY_MESSAGE: Record<DesktopWorkspaceTab, string> = {
+  projects: "还没有项目。添加一个本地目录，就能从这里进出。",
+  memory: "还没有任何记忆。",
+}
+
+/**
+ * Stable Desktop workspace layout shared by the real app and documentation mocks.
+ *
+ * DS2 W2 页首重铸（屏级判断表，与 `DesktopSkillsPageView` 同口径）：
+ * - 顶带 = `--ow-titlebar-h`(48)，与地同色、无分隔线；V1 的 `44px` 魔数下推撤除。
+ * - 页签一套底线式（`Tabs variant="underline"`；`Tabs` 已在原语层收敛为唯一底线式，
+ *   `variant` 只剩兼容出口，这里显式写出来是为读码时一眼看见形状口径）。页签贴在带的
+ *   下缘，页首唯一那条横线就是选中页签脚下的 2px 底线——页首自己不画分隔线。
+ *   页签不换行、超出横向滚动（窄幅被工具组挤成逐字竖排的断版在此钉死）。
+ * - 页头图标钮归 `Button` 正规变体：`ghost` / `secondary` × `size="md"` ＝ 32 高、
+ *   `--ow-radius-action`(8) 非圆（判断表「页头图标钮 8px 不是圆」），hover / press /
+ *   focus-visible / disabled 全集由原语自带——原先走 Button 的 unstyled 逃逸口 ＋ 手搓的
+ *   `.fbtn` / `.files__tools button` 两族随之退役。
+ * - 搜索开关的选中态走 `secondary` ＋ `aria-pressed`（§6 无彩选中，不用 info tint 上色）。
+ * - 记忆搜索条外壳只留排布（`.ws-page__search`）：面归注入的 `SearchInput`→`Field`
+ *   （surface-2 井 / 1px 边 / 8 圆角 / 高 32 / 三态边框 / 零影），不再套 V1 的第二层 40 高白框。
+ * - 列表地 `--ow-surface-2` 井（1px `--ow-border` ＋ 圆角 12 ＋ §5 零影），行落在井里。
+ * - 空态 G5：`primitives/EmptyState`（信标母题 ＋ 一句 text-2 ＋ 可选动作），禁灰字居中。
+ *
+ * @deprecated A11-B4（裁决 16）：原型里没有「我的空间」这一屏，这套「项目 / 记忆」双页签的
+ * 页壳因此整件退役——项目文件归右栏「文件」页签（`FileBrowser`，原型 template.dc.html
+ * 2313–2338），记忆归设置二级页第八段（`DesktopSettingsMemorySection`，原型 2635–2673）。
+ * 保留导出只为让宿主路由改完之前不炸；删除条件与顺序见
+ * `components/domain/desktop/index.ts` 段尾的退役清单。
+ */
+export function DesktopWorkspacePageView({
+  tab,
+  onTabChange,
+  showMemorySearchAction = false,
+  memorySearchOpen = false,
+  onToggleMemorySearch,
+  memorySearch,
+  sortAsc = false,
+  onSort,
+  children,
+  overlays,
+  empty,
+}: DesktopWorkspacePageViewProps) {
+  const sortLabel = sortAsc ? "降序排列" : "升序排列"
+  /* 只认「压根没有子节点」这一种空：宿主既有的自渲染列表一律走 children 原路。 */
+  const isEmpty = Children.count(children) === 0
+
+  return (
+    <div className="page filespace ws-page">
+      <div className="files__head ws-page__head">
+        <Tabs
+          className="ws-page__tabs"
+          items={WORKSPACE_ITEMS}
+          activeKey={tab}
+          variant="underline"
+          size="md"
+          onChange={(key) => onTabChange(key as DesktopWorkspaceTab)}
+        />
+        <div className="ws-page__tools">
+          {tab === "memory" && showMemorySearchAction && onToggleMemorySearch && (
+            <Button
+              /* §6 无彩选中：开着＝secondary 中性面 ＋ aria-pressed，不借 info tint 上色。 */
+              variant={memorySearchOpen ? "secondary" : "ghost"}
+              size="md"
+              icon={<Search />}
+              title="搜索记忆"
+              aria-label="搜索记忆"
+              aria-pressed={memorySearchOpen}
+              onClick={onToggleMemorySearch}
+            />
+          )}
+          <Button variant="ghost" size="md" icon={<Sort />} title={sortLabel} aria-label={sortLabel} onClick={onSort} />
+        </div>
+      </div>
+      {tab === "memory" && memorySearchOpen && memorySearch && <div className="ws-page__search">{memorySearch}</div>}
+      <div className="fs-list ws-page__list">
+        {isEmpty ? (empty ?? <EmptyState className="ws-page__empty" message={EMPTY_MESSAGE[tab]} />) : children}
+      </div>
+      {overlays}
+    </div>
+  )
+}