@spzxg/cli-ui 0.6.2 → 0.6.5

package/src/operator/node/ProjectLanding.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+import { Icon } from "./icons";
+import { Markdown } from "./Markdown";
+import { relTime } from "./format";
+import { ErrNote } from "./shared";
+import type { ProjectRow, RecapInfo } from "./types";
+
+// Shown in the session pane when a project is open but no task is selected.
+// Surfaces the auto-generated "where you left off" recap when one exists / is
+// brewing; otherwise the plain create-a-task prompt.
+export function ProjectLanding({ project, recap, onNewTask, onRefreshRecap }: {
+  project: ProjectRow; recap?: RecapInfo; onNewTask: () => void; onRefreshRecap: () => void;
+}) {
+  const generating = recap?.generating && !recap?.recap;
+  const hasRecap = !!recap?.recap;
+
+  if (generating) {
+    return (
+      <div className="empty" style={{ margin: "auto" }}>
+        <div className="e-ic">{Icon.clock()}</div>
+        <div className="e-t">正在为你回顾…</div>
+        <div className="e-s">正在整理你在 {project.name} 上次的进度。</div>
+        <span className="typing" style={{ marginTop: 14 }}><i /><i /><i /></span>
+      </div>
+    );
+  }
+
+  // Recap fetch/generation failed and there's nothing older to show — offer a
+  // retry rather than silently falling through to the plain empty state.
+  if (recap?.error && !hasRecap) {
+    return (
+      <div className="empty" style={{ margin: "auto", maxWidth: 340 }}>
+        <div className="e-ic">{Icon.clock()}</div>
+        <div className="e-t">无法生成回顾</div>
+        <div className="e-s">{project.name} 的回顾加载失败：{recap.error}</div>
+        <div style={{ display: "flex", gap: 10, justifyContent: "center", marginTop: 16 }}>
+          <button className="btn btn-line" onClick={onRefreshRecap}>{Icon.restore()} 重试</button>
+          <button className="btn btn-accent" onClick={onNewTask}>{Icon.plus()} New task</button>
+        </div>
+      </div>
+    );
+  }
+
+  if (hasRecap) {
+    return (
+      <div className="transcript">
+        <div className="tw" style={{ maxWidth: 720 }}>
+          <div className="recap-card">
+            <div className="recap-head">
+              <span className="recap-badge">{Icon.clock()} 上次进度</span>
+              <span className="recap-meta">{recap!.recap_at ? `回顾于 ${relTime(recap!.recap_at)}` : ""}</span>
+              <span className="spacer" />
+              <button
+                className="btn btn-line btn-sm"
+                onClick={onRefreshRecap}
+                disabled={recap!.generating}
+                title="根据最新动态重新生成回顾"
+              >
+                {Icon.clear()} {recap!.generating ? "刷新中…" : "刷新"}
+              </button>
+            </div>
+            {recap!.error && !recap!.generating && (
+              <ErrNote style={{ margin: "12px 14px 0" }}>刷新失败：{recap!.error}</ErrNote>
+            )}
+            <div className="recap-body"><Markdown>{recap!.recap ?? ""}</Markdown></div>
+            <div className="recap-foot">
+              <span className="recap-meta">挑一个任务继续，或者新建一个。</span>
+              <span className="spacer" />
+              <button className="btn btn-accent btn-sm" onClick={onNewTask}>{Icon.plus()} New task</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="empty" style={{ margin: "auto" }}>
+      <div className="e-ic">{Icon.bolt()}</div>
+      <div className="e-t">未选择任务</div>
+      <div className="e-s">创建一个任务来启动智能体会话。</div>
+      <button className="btn btn-accent" style={{ marginTop: 16 }} onClick={onNewTask}>{Icon.plus()} New task</button>
+    </div>
+  );
+}

package/src/operator/node/ProjectsColumn.tsx

@@ -0,0 +1,137 @@
+"use client";
+
+import { useState } from "react";
+import { Icon } from "./icons";
+import { fmtCost, relTime } from "./format";
+import { SEARCH_MIN, type AgentInfo, type ProjectRow } from "./types";
+import { SearchBar } from "./shared";
+
+// Footer line under "Your workspace": the real auth state per connected agent,
+// from GET /api/agents (which reports the EFFECTIVE billing credential — an
+// active API key outranks a stored subscription login; see issue #4).
+function agentAuthLine(agents: AgentInfo[]): string {
+  const parts = agents
+    .filter((a) => a.authenticated)
+    .map((a) =>
+      a.account?.method === "bedrock"
+        ? `${a.label} · Amazon Bedrock`
+        : a.account?.method === "compatible" ? `${a.label} · 兼容端点（${a.account.plan ?? "已配置"}）`
+        : a.account?.method === "api_key" ? `${a.label} · API 密钥` : `${a.label} · ${a.account?.plan ? `${a.account.plan} 登录` : "订阅账号"}`,
+    );
+  return parts.length ? parts.join("、") : "未连接任何智能体";
+}
+
+export function ProjectsColumn({ projects, deprecated, agents, selId, running, width, onSelect, onNew, onOpenAppearance, onReorder, onRestore, onCollapse, settingsActive, onOpenSettings, mobile }: {
+  projects: ProjectRow[]; deprecated: ProjectRow[]; agents: AgentInfo[]; selId: string | null; running: Set<string>; width: number;
+  onSelect: (id: string) => void; onNew: () => void; onOpenAppearance: () => void;
+  onReorder: (ids: string[]) => void; onRestore: (id: string) => void; onCollapse: () => void;
+  settingsActive: boolean; onOpenSettings: () => void; mobile?: boolean;
+}) {
+  const [dragId, setDragId] = useState<string | null>(null);
+  const [overId, setOverId] = useState<string | null>(null);
+  const [showDeprecated, setShowDeprecated] = useState(false);
+  const [query, setQuery] = useState("");
+  const q = query.trim().toLowerCase();
+  const shown = q ? projects.filter((p) => p.name.toLowerCase().includes(q) || (p.sub ?? "").toLowerCase().includes(q)) : projects;
+
+  const drop = (targetId: string) => {
+    if (dragId && dragId !== targetId) {
+      const ids = projects.map((p) => p.id);
+      const from = ids.indexOf(dragId);
+      const to = ids.indexOf(targetId);
+      if (from !== -1 && to !== -1) {
+        ids.splice(to, 0, ids.splice(from, 1)[0]);
+        onReorder(ids);
+      }
+    }
+    setDragId(null);
+    setOverId(null);
+  };
+
+  return (
+    <div className="col col-projects" style={{ flexBasis: width }}>
+      <div className="col-head">
+        <span className="ch-title">项目</span>
+        <span className="spacer" />
+        <button className="icon-btn" title="外观" onClick={onOpenAppearance}>{Icon.sliders()}</button>
+        <button className="icon-btn" title="新建项目" onClick={onNew}>{Icon.plus()}</button>
+        {!mobile && <button className="icon-btn" title="隐藏项目面板" onClick={onCollapse}>{Icon.chevRight({ style: { transform: "rotate(180deg)" } })}</button>}
+      </div>
+      {projects.length >= SEARCH_MIN && <SearchBar value={query} onChange={setQuery} placeholder="搜索项目…" />}
+      <div className="scroll">
+        <div className="proj-list">
+          {shown.map((p) => (
+            <button
+              key={p.id}
+              className={`proj ${p.id === selId ? "sel" : ""} ${dragId === p.id ? "dragging" : ""} ${overId === p.id && dragId && dragId !== p.id ? "drag-over" : ""}`}
+              onClick={() => onSelect(p.id)}
+              draggable
+              onDragStart={(e) => { setDragId(p.id); e.dataTransfer.effectAllowed = "move"; }}
+              onDragOver={(e) => { e.preventDefault(); e.dataTransfer.dropEffect = "move"; if (dragId) setOverId(p.id); }}
+              onDrop={(e) => { e.preventDefault(); drop(p.id); }}
+              onDragEnd={() => { setDragId(null); setOverId(null); }}
+              title="拖动可排序"
+            >
+              <div className="pic" style={{ background: p.color }}>
+                {p.name[0]}
+                {p.awaiting_count > 0 && (
+                  <span className="proj-await" title={`${p.awaiting_count} 个任务在等你处理`}>{p.awaiting_count}</span>
+                )}
+              </div>
+              <div className="pmeta">
+                <div className="pname">{p.name}</div>
+                <div className="psub">
+                  {p.task_count} 个任务{p.sub ? ` · ${p.sub}` : ""}
+                  {p.cost_usd > 0 && <span className="psub-cost" title="该项目所有任务的累计花费"> · {fmtCost(p.cost_usd)}</span>}
+                </div>
+              </div>
+              <div className="pcount" title={p.last_activity ? `最近活动于 ${relTime(p.last_activity)}` : "从未活动"}>
+                {p.last_activity ? relTime(p.last_activity) : "从未"}
+              </div>
+            </button>
+          ))}
+          {q && shown.length === 0 && <div className="search-empty">没有匹配“{query.trim()}”的项目。</div>}
+          {!q && (
+          <button className="proj" style={{ color: "var(--ink-3)" }} onClick={onNew}>
+            <div className="pic" style={{ background: "var(--surface-2)", color: "var(--ink-3)", boxShadow: "inset 0 0 0 1px var(--line-2)" }}>{Icon.plus()}</div>
+            <div className="pmeta"><div className="pname" style={{ fontWeight: 600, color: "var(--ink-3)" }}>新建项目</div></div>
+          </button>
+          )}
+
+          {!q && deprecated.length > 0 && (
+            <div className="dep-area">
+              <button className="dep-head" onClick={() => setShowDeprecated((s) => !s)} title="你暂时搁置的项目。恢复后可以继续在其上开发。">
+                <span className={`dep-chev ${showDeprecated ? "open" : ""}`}>{Icon.chevRight()}</span>
+                {Icon.archive()}
+                <span className="dep-title">已归档</span>
+                <span className="dep-count">{deprecated.length}</span>
+              </button>
+              {showDeprecated && deprecated.map((p) => (
+                <div key={p.id} className="proj dep" title={`${p.name} — 已归档。恢复后可继续开发。`}>
+                  <div className="pic" style={{ background: p.color }}>{p.name[0]}</div>
+                  <div className="pmeta">
+                    <div className="pname">{p.name}</div>
+                    <div className="psub">{p.task_count} 个任务{p.sub ? ` · ${p.sub}` : ""}</div>
+                  </div>
+                  <button className="icon-btn" title={`恢复 ${p.name}`} onClick={() => onRestore(p.id)}>{Icon.restore()}</button>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+      <div className="proj-foot">
+        <button className={`nav-item${settingsActive ? " active" : ""}`} onClick={onOpenSettings} title="应用设置">
+          {Icon.gear()} 设置
+        </button>
+        <div className="user-chip">
+          <div className="av">{Icon.bolt()}</div>
+          <div style={{ flex: 1, minWidth: 0 }}>
+            <div className="un">你的工作区</div>
+            <div className="ue">{agentAuthLine(agents)}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}