@allbluecn/web-app 0.12.0 → 0.12.3

package/src/components/harness/code/changeset-panel.tsx

@@ -0,0 +1,112 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+"use client"
+
+import { FileDiff, FilePlus2, FileX2 } from "lucide-react"
+import { useState } from "react"
+import { m } from "@/paraglide/messages.js"
+import type { SandboxFileChange } from "../harness-chat-slots"
+
+const MAX_DIFF_LINES = 150
+
+interface ChangesetEntry {
+  path: string
+  type: SandboxFileChange["type"]
+  diff: string
+}
+
+interface ChangesetPanelProps {
+  changes: SandboxFileChange[]
+}
+
+function truncateDiff(diff: string): { text: string; truncated: boolean } {
+  const lines = diff.split("\n")
+  if (lines.length <= MAX_DIFF_LINES) {
+    return { text: diff, truncated: false }
+  }
+  return { text: lines.slice(0, MAX_DIFF_LINES).join("\n"), truncated: true }
+}
+
+export function ChangesetPanel({ changes }: ChangesetPanelProps) {
+  const [expandedKey, setExpandedKey] = useState<string | undefined>(undefined)
+
+  if (changes.length === 0) {
+    return (
+      <div className="px-3 py-6 text-center text-xs text-muted-foreground">
+        {m.chat_code_noChanges()}
+      </div>
+    )
+  }
+
+  // 按文件路径聚合（同一文件多次变更合并展示）
+  const aggregated = new Map<string, ChangesetEntry>()
+  for (const change of changes) {
+    const existing = aggregated.get(change.path)
+    if (!existing || change.type !== "change") {
+      aggregated.set(change.path, {
+        path: change.path,
+        type: change.type,
+        diff: change.diff,
+      })
+    } else {
+      // 多次 change 合并 diff
+      aggregated.set(change.path, {
+        ...existing,
+        diff: existing.diff + "\n..." + change.diff,
+      })
+    }
+  }
+
+  const entries = Array.from(aggregated.values())
+
+  return (
+    <div className="overflow-y-auto">
+      {entries.map((entry) => {
+        const Icon = entry.type === "create" ? FilePlus2 : entry.type === "delete" ? FileX2 : FileDiff
+        const expanded = expandedKey === entry.path
+        return (
+          <div key={entry.path} className="border-b border-border last:border-0">
+            <button
+              type="button"
+              onClick={() => setExpandedKey(expanded ? undefined : entry.path)}
+              className="flex w-full items-center gap-2 px-3 py-2 text-left text-xs hover:bg-accent"
+            >
+              <Icon className="size-3.5 shrink-0 text-muted-foreground" />
+              <span className="truncate flex-1 text-foreground">{entry.path}</span>
+              <span className="shrink-0 text-muted-foreground">
+                {entry.type === "create"
+                  ? m.chat_sandbox_fileCreated()
+                  : entry.type === "delete"
+                  ? m.chat_sandbox_fileDeleted()
+                  : m.chat_sandbox_fileChanged()}
+              </span>
+            </button>
+            {expanded && entry.diff && (
+              <pre className="mx-3 mb-2 overflow-x-auto rounded border border-border bg-background p-2 font-mono text-[11px] leading-4">
+                {truncateDiff(entry.diff).text}
+                {truncateDiff(entry.diff).truncated && (
+                  <span className="text-muted-foreground">... ({m.chat_sandbox_moreChanges({ count: 0 })})</span>
+                )}
+              </pre>
+            )}
+          </div>
+        )
+      })}
+    </div>
+  )
+}

package/src/components/harness/code/code-workspace-sidebar.tsx

@@ -0,0 +1,138 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+"use client"
+
+import { FileText, Terminal as TerminalIcon, GitBranch, Monitor, ImageIcon } from "lucide-react"
+import { useCallback, useState } from "react"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { FileTree } from "./file-tree"
+import { ChangesetPanel } from "./changeset-panel"
+import { TerminalPanel } from "./terminal-panel"
+import { PreviewPanel } from "./preview-panel"
+import { useHarnessSandboxEvents } from "../harness-chat-slots"
+import { useWorkspace } from "./workspace-context"
+import { buildFileUri } from "@/components/harness/dock/resource-uri"
+import { dockRegistry } from "@/components/harness/dock/dock-registry"
+import { GalleryGrid } from "@/components/harness/gallery/gallery-grid"
+import { m } from "@/paraglide/messages.js"
+
+type CodeTab = "files" | "changes" | "terminal" | "preview" | "gallery"
+
+interface CodeWorkspaceSidebarProps {
+  initialTab?: CodeTab
+  mediaRoute?: "code" | "spec"
+  onMediaRouteChange?: (route: "code" | "spec") => void
+  threadId?: string
+}
+
+export function CodeWorkspaceSidebar({ initialTab = "files", mediaRoute = "code", onMediaRouteChange, threadId }: CodeWorkspaceSidebarProps) {
+  const [activeTab, setActiveTab] = useState<CodeTab>(initialTab)
+  const { workspace } = useWorkspace()
+  const { changes } = useHarnessSandboxEvents()
+  const [previewHtml, setPreviewHtml] = useState<string>("")
+  const [previewTitle, setPreviewTitle] = useState<string>("")
+
+  const handleFileOpen = useCallback(
+    (path: string) => {
+      if (!workspace) return
+      if (workspace.type === "cloud") {
+        dockRegistry.openResource(buildFileUri(workspace.id, path))
+      } else if (workspace.type === "local-fsap") {
+        // FSAP 本地文件：直接读取并展示预览
+        ;(async () => {
+          try {
+            const handle = workspace.dirHandle
+            const parts = path.split("/").filter(Boolean)
+            let current: FileSystemHandle = handle
+            for (let i = 0; i < parts.length - 1; i++) {
+              if (current.kind !== "directory") return
+              current = await (current as FileSystemDirectoryHandle).getDirectoryHandle(parts[i])
+            }
+            if (current.kind !== "file") return
+            const file = await (current as FileSystemFileHandle).getFile()
+            const content = await file.text()
+            if (file.name.endsWith(".html") || file.name.endsWith(".htm")) {
+              setPreviewHtml(content)
+              setPreviewTitle(file.name)
+              setActiveTab("preview")
+            }
+          } catch {
+            // 忽略读取失败
+          }
+        })()
+      }
+    },
+    [workspace],
+  )
+
+  const handleClearTerminal = useCallback(() => {
+    // 清除终端行状态由外部管理，此处仅重置 tab 显示
+  }, [])
+
+  return (
+    <div className="flex h-full flex-col">
+      <Tabs
+        value={activeTab}
+        onValueChange={(v) => setActiveTab(v as CodeTab)}
+        className="flex h-full flex-col"
+      >
+        <div className="shrink-0 border-b">
+          <TabsList className="grid w-full grid-cols-5">
+            <TabsTrigger value="files" className="flex items-center gap-1 text-xs">
+              <FileText className="size-3" />
+              {m.chat_code_files()}
+            </TabsTrigger>
+            <TabsTrigger value="changes" className="flex items-center gap-1 text-xs">
+              <GitBranch className="size-3" />
+              {m.chat_code_changeset()}
+            </TabsTrigger>
+            <TabsTrigger value="terminal" className="flex items-center gap-1 text-xs">
+              <TerminalIcon className="size-3" />
+              {m.chat_code_terminal()}
+            </TabsTrigger>
+            <TabsTrigger value="preview" className="flex items-center gap-1 text-xs">
+              <Monitor className="size-3" />
+              {m.chat_code_preview()}
+            </TabsTrigger>
+            <TabsTrigger value="gallery" className="flex items-center gap-1 text-xs">
+              <ImageIcon className="size-3" />
+              {m.gallery_title()}
+            </TabsTrigger>
+          </TabsList>
+        </div>
+        <div className="min-h-0 flex-1 overflow-hidden">
+          <TabsContent value="files" className="h-full data-[state=active]:flex">
+            <FileTree onFileOpen={handleFileOpen} />
+          </TabsContent>
+          <TabsContent value="changes" className="h-full data-[state=active]:flex">
+            <ChangesetPanel changes={changes} />
+          </TabsContent>
+          <TabsContent value="terminal" className="h-full data-[state=active]:flex">
+            <TerminalPanel onClear={handleClearTerminal} />
+          </TabsContent>
+          <TabsContent value="preview" className="h-full data-[state=active]:flex">
+            <PreviewPanel html={previewHtml} title={previewTitle} route={mediaRoute} onRouteChange={onMediaRouteChange} />
+          </TabsContent>
+          <TabsContent value="gallery" className="h-full data-[state=active]:flex">
+            <GalleryGrid compact threadId={threadId} className="w-full overflow-y-auto p-2" />
+          </TabsContent>
+        </div>
+      </Tabs>
+    </div>
+  )
+}

package/src/components/harness/code/file-tree.tsx

@@ -0,0 +1,241 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import { FileCode2, FolderOpen } from "lucide-react"
+import { useCallback, useEffect, useMemo, useState } from "react"
+import { useQuery } from "@tanstack/react-query"
+import { useWorkspace } from "./workspace-context"
+import { listDirEntries } from "@/lib/fsap"
+import { listWorkspaceFilesFn } from "@/server/serverFns/harness/workspace-files"
+import { buildFileUri } from "@/components/harness/dock/resource-uri"
+import { m } from "@/paraglide/messages.js"
+import AIFileUpload from "@/components/hextaui/ai-file-upload"
+import { uploadWorkspaceFileFn } from "@/server/serverFns/harness/workspace-files"
+import { toast } from "@/components/ui/toast"
+
+export interface FileTreeItem {
+  path: string
+  type: "file" | "dir"
+  children?: FileTreeItem[]
+  diff?: string
+  changeType?: "create" | "change" | "delete"
+}
+
+interface FileTreeProps {
+  onFileOpen?: (path: string) => void
+}
+
+function buildTreeFromPaths(paths: string[]): FileTreeItem[] {
+  const root: Record<string, FileTreeItem> = {}
+  const order: FileTreeItem[] = []
+  for (const p of paths) {
+    const parts = p.split("/").filter(Boolean)
+    let current = root
+    let lastItem: FileTreeItem | undefined
+    for (let i = 0; i < parts.length; i++) {
+      const part = parts[i]
+      const isLast = i === parts.length - 1
+      const key = isLast ? `file:${p}` : `dir:${p.slice(0, p.lastIndexOf(part) + part.length)}`
+      const fullPath = p.slice(0, p.lastIndexOf(part) + part.length)
+      if (!current[part]) {
+        const item: FileTreeItem = isLast
+          ? { path: fullPath, type: "file" }
+          : { path: fullPath, type: "dir" }
+        current[part] = item
+        if (isLast) order.push(item)
+      }
+      if (!isLast) {
+        const childNode = current[part]
+        if (!childNode.children) childNode.children = []
+        current = childNode.children as unknown as Record<string, FileTreeItem>
+      }
+      lastItem = current[part]
+    }
+  }
+  // Rebuild with proper structure
+  const rebuild = (nodes: Record<string, FileTreeItem>): FileTreeItem[] =>
+    Object.values(nodes).map((n) => ({
+      ...n,
+      children: n.type === "dir" ? rebuild((n.children ?? {}) as Record<string, FileTreeItem>) : undefined,
+    }))
+  return rebuild(root)
+}
+
+function FileTreeNode({
+  item,
+  depth,
+  onFileOpen,
+}: {
+  item: FileTreeItem
+  depth: number
+  onFileOpen?: (path: string) => void
+}) {
+  const [expanded, setExpanded] = useState(depth < 1)
+  const isDir = item.type === "dir"
+
+  const TypeIcon = isDir ? FolderOpen : FileCode2
+
+  const handleClick = () => {
+    if (isDir) {
+      setExpanded((v) => !v)
+    } else {
+      onFileOpen?.(item.path)
+    }
+  }
+
+  return (
+    <div>
+      <button
+        type="button"
+        onClick={handleClick}
+        className="flex w-full items-center gap-1.5 px-2 py-1 text-left text-xs hover:bg-accent rounded"
+        style={{ paddingLeft: `${8 + depth * 12}px` }}
+      >
+        <TypeIcon className="size-3.5 shrink-0 text-muted-foreground" />
+        <span className="truncate flex-1 text-foreground">{item.path.split("/").pop()}</span>
+        {item.changeType === "create" && (
+          <span className="text-xs text-green-600">+new</span>
+        )}
+        {item.changeType === "delete" && (
+          <span className="text-xs text-red-600">-del</span>
+        )}
+      </button>
+      {isDir && expanded && item.children?.map((child) => (
+        <FileTreeNode key={child.path} item={child} depth={depth + 1} onFileOpen={onFileOpen} />
+      ))}
+    </div>
+  )
+}
+
+export function FileTree({ onFileOpen }: FileTreeProps) {
+  const { workspace } = useWorkspace()
+  const [fsapHandle, setFsapHandle] = useState<FileSystemDirectoryHandle | null>(null)
+
+  // FSAP: persist handle across re-renders
+  useEffect(() => {
+    if (workspace?.type === "local-fsap") {
+      setFsapHandle(workspace.dirHandle)
+    }
+  }, [workspace])
+
+  const cloudFilesQuery = useQuery({
+    queryKey: ["workspace-files", workspace?.type === "cloud" ? workspace.id : null],
+    queryFn: () =>
+      listWorkspaceFilesFn({ data: { workspaceId: (workspace as { type: "cloud"; id: string }).id } }),
+    enabled: workspace?.type === "cloud",
+    staleTime: 30_000,
+  })
+
+  const fsapQuery = useQuery({
+    queryKey: ["fsap-entries", fsapHandle?.name ?? null],
+    queryFn: () => listDirEntries(fsapHandle!),
+    enabled: workspace?.type === "local-fsap" && fsapHandle !== null,
+    staleTime: 30_000,
+  })
+
+  const files = useMemo<FileTreeItem[]>(() => {
+    if (workspace?.type === "cloud" && cloudFilesQuery.data) {
+      const paths = cloudFilesQuery.data.map((f) => f.path)
+      return buildTreeFromPaths(paths)
+    }
+    if (workspace?.type === "local-fsap" && fsapQuery.data) {
+      return fsapQuery.data.map((e) => ({
+        path: e.name,
+        type: e.kind === "directory" ? "dir" : "file",
+      }))
+    }
+    return []
+  }, [workspace, cloudFilesQuery.data, fsapQuery.data])
+
+  const isLoading =
+    (workspace?.type === "cloud" && cloudFilesQuery.isLoading) ||
+    (workspace?.type === "local-fsap" && fsapQuery.isLoading)
+
+  const handleUpload = useCallback(async (files: File[]) => {
+    if (workspace?.type !== "cloud") return
+    for (const file of files) {
+      try {
+        const text = await new Promise<string>((resolve, reject) => {
+          const reader = new FileReader()
+          reader.onload = () => resolve(reader.result as string)
+          reader.onerror = reject
+          reader.readAsText(file)
+        })
+        await uploadWorkspaceFileFn({
+          data: {
+            workspaceId: (workspace as { type: "cloud"; id: string }).id,
+            path: file.name,
+            content: text,
+            mimeType: file.type || "application/octet-stream",
+          },
+        })
+        toast.success(m.chat_code_uploadSuccess({ name: file.name }))
+      } catch (e) {
+        toast.error(m.chat_code_uploadError({ name: file.name, error: e instanceof Error ? e.message : String(e) }))
+      }
+    }
+  }, [workspace])
+
+  if (isLoading) {
+    return (
+      <div className="flex h-full items-center justify-center text-xs text-muted-foreground">
+        {m.chat_code_loadingFiles()}
+      </div>
+    )
+  }
+
+  if (files.length === 0) {
+    return (
+      <div className="px-3 py-6 text-center text-xs text-muted-foreground">
+        {m.chat_code_noFiles()}
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex h-full flex-col">
+      {workspace?.type === "cloud" && (
+        <div className="shrink-0 border-b px-2 py-1.5">
+          <AIFileUpload
+            acceptedTypes={["image/*", ".pdf", ".md", ".txt"]}
+            maxSize={4 * 1024 * 1024}
+            maxFiles={6}
+            showPreview
+            onFilesSelected={handleUpload}
+            className="w-full"
+          />
+        </div>
+      )}
+      <div className="overflow-y-auto py-1">
+        {files.map((file) => (
+          <FileTreeNode
+            key={file.path}
+            item={file}
+            depth={0}
+            onFileOpen={(path) => {
+              if (workspace?.type === "cloud") {
+                onFileOpen?.(path)
+              } else if (workspace?.type === "local-fsap") {
+                onFileOpen?.(path)
+              }
+            }}
+          />
+        ))}
+      </div>
+    </div>
+  )
+}

package/src/components/harness/code/preview-panel.tsx

@@ -0,0 +1,169 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+"use client"
+
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { m } from "@/paraglide/messages.js"
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"
+import { Code, Layout } from "lucide-react"
+
+/**
+ * 路线类型
+ */
+export type PreviewRoute = "code" | "spec"
+
+/**
+ * UI Spec 节点类型（结构化输出路线）
+ */
+export interface UiSpecNode {
+  type: "text" | "button" | "container" | "input" | "image" | "heading"
+  content?: string
+  label?: string
+  onClick?: string
+  children?: UiSpecNode[]
+  style?: {
+    padding?: string
+    margin?: string
+    background?: string
+    color?: string
+    fontSize?: string
+  }
+  direction?: "row" | "col"
+}
+
+interface PreviewPanelProps {
+  html?: string
+  spec?: UiSpecNode | null
+  route: PreviewRoute
+  onRouteChange?: (route: PreviewRoute) => void
+  title?: string
+}
+
+/**
+ * SpecRenderer：递归渲染 UI spec 树为 React 组件
+ */
+function SpecRenderer({ node }: { node: UiSpecNode }) {
+  const { type, content, label, style, children } = node
+
+  const baseStyle: React.CSSProperties = {
+    padding: style?.padding || "0",
+    margin: style?.margin || "0",
+    background: style?.background || "transparent",
+    color: style?.color || "inherit",
+    fontSize: style?.fontSize || "inherit",
+    display: "flex",
+    ...(node.direction === "row" ? { flexDirection: "row" as const } : { flexDirection: "column" as const }),
+  }
+
+  switch (type) {
+    case "text":
+      return <span style={baseStyle}>{content}</span>
+    case "heading":
+      return <h2 style={baseStyle}>{content || label}</h2>
+    case "button":
+      return (
+        <Button style={baseStyle}>
+          {label || content}
+        </Button>
+      )
+    case "input":
+      return (
+        <Input
+          style={{ ...baseStyle, padding: "8px" }}
+          placeholder={content}
+        />
+      )
+    case "image":
+      return (
+        <img
+          src={content}
+          alt={label}
+          style={{ ...baseStyle, objectFit: "cover" }}
+        />
+      )
+    case "container":
+      return (
+        <div style={baseStyle}>
+          {children?.map((child, i) => (
+            <SpecRenderer key={i} node={child} />
+          ))}
+        </div>
+      )
+    default:
+      return null
+  }
+}
+
+/**
+ * 扩展版预览面板：支持双路线（code + spec）
+ */
+export function PreviewPanel({ html, spec, route, onRouteChange, title }: PreviewPanelProps) {
+  const handleRouteChange = (value: string) => {
+    if (value === "code" || value === "spec") onRouteChange?.(value)
+  }
+
+  return (
+    <div className="flex h-full flex-col">
+      {/* 路线切换 */}
+      <div className="border-b border-muted p-2">
+        <Tabs value={route} onValueChange={handleRouteChange}>
+          <TabsList className="grid w-full grid-cols-2">
+            <TabsTrigger value="code" className="flex items-center gap-1">
+              <Code className="size-3" />
+              {m.harness_media_code()}
+            </TabsTrigger>
+            <TabsTrigger value="spec" className="flex items-center gap-1">
+              <Layout className="size-3" />
+              {m.harness_media_spec()}
+            </TabsTrigger>
+          </TabsList>
+        </Tabs>
+      </div>
+
+      {/* 预览内容 */}
+      <Tabs value={route} className="flex-1">
+        <TabsContent value="code" className="h-full m-0">
+          {html ? (
+            <iframe
+              title={title || m.gallery_preview()}
+              srcDoc={html}
+              sandbox="allow-scripts"
+              className="h-full w-full border-0 bg-background"
+            />
+          ) : (
+            <div className="flex h-full items-center justify-center text-muted-foreground">
+              {m.harness_media_noCode()}
+            </div>
+          )}
+        </TabsContent>
+        <TabsContent value="spec" className="h-full m-0">
+          {spec ? (
+            <div className="flex h-full items-center justify-center p-4">
+              <SpecRenderer node={spec} />
+            </div>
+          ) : (
+            <div className="flex h-full items-center justify-center text-muted-foreground">
+              {m.harness_media_noSpec()}
+            </div>
+          )}
+        </TabsContent>
+      </Tabs>
+    </div>
+  )
+}