feat(frontend): restore session progress sidebar

app-instance/frontend/components/chat-workbench/CurrentSessionProgressSidebar.tsx

@@ -0,0 +1,324 @@
+'use client';
+
+import React from 'react';
+import {
+  AlertCircle,
+  CheckCircle2,
+  Circle,
+  FileJson,
+  FileOutput,
+  FileText,
+  Image as ImageIcon,
+  Link2,
+  ListChecks,
+  Loader2,
+  PanelRightOpen,
+  X,
+} from 'lucide-react';
+
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { appStatusLabel } from '@/lib/i18n/common';
+import { pickAppText } from '@/lib/i18n/core';
+import { useAppI18n } from '@/lib/i18n/provider';
+import type {
+  SessionProgressArtifactView,
+  SessionProgressStepView,
+  SessionProgressView,
+} from '@/lib/session-progress';
+import type { ProcessArtifact, ProcessRunStatus } from '@/types';
+
+function formatShortTime(value: string, locale: 'zh-CN' | 'en-US') {
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return value;
+  return new Intl.DateTimeFormat(locale, {
+    hour: '2-digit',
+    minute: '2-digit',
+  }).format(date);
+}
+
+function statusTone(status: ProcessRunStatus) {
+  if (status === 'done') return 'text-[#2F8D50] bg-[#E3F1E7] border-[#B8D9C2]';
+  if (status === 'running') return 'text-[#2F6FCA] bg-[#E7EEF9] border-[#B8CBE8]';
+  if (status === 'error') return 'text-[#8A3A2D] bg-[#F0E5E1] border-[#D9BDB4]';
+  if (status === 'cancelled') return 'text-[#6A5E58] bg-[#ECE8E5] border-[#D8D2CE]';
+  return 'text-[#6A5E58] bg-[#F0ECE9] border-[#D8D2CE]';
+}
+
+function StepMarker({ step, index }: { step: SessionProgressStepView; index: number }) {
+  if (step.status === 'done') {
+    return (
+      <span className="flex h-6 w-6 items-center justify-center rounded-full bg-[#2F8D50] text-white">
+        <CheckCircle2 className="h-4 w-4" />
+      </span>
+    );
+  }
+  if (step.status === 'running') {
+    return (
+      <span className="flex h-6 w-6 items-center justify-center rounded-full bg-[#2F6FCA] text-[11px] font-semibold text-white">
+        {index + 1}
+      </span>
+    );
+  }
+  if (step.status === 'error') {
+    return (
+      <span className="flex h-6 w-6 items-center justify-center rounded-full bg-[#8A3A2D] text-white">
+        <AlertCircle className="h-4 w-4" />
+      </span>
+    );
+  }
+  return (
+    <span className="flex h-6 w-6 items-center justify-center rounded-full bg-[#D8D2CE] text-[#6A5E58]">
+      <Circle className="h-3.5 w-3.5" />
+    </span>
+  );
+}
+
+function artifactIcon(type: ProcessArtifact['artifact_type']) {
+  if (type === 'json') return <FileJson className="h-4 w-4" />;
+  if (type === 'image') return <ImageIcon className="h-4 w-4" />;
+  if (type === 'link') return <Link2 className="h-4 w-4" />;
+  if (type === 'markdown' || type === 'text') return <FileText className="h-4 w-4" />;
+  return <FileOutput className="h-4 w-4" />;
+}
+
+function ProgressHeader({ view }: { view: SessionProgressView }) {
+  const { locale } = useAppI18n();
+  const percent = view.progress.percent;
+
+  return (
+    <section className="rounded-lg border border-[#ECE7E3] bg-white px-4 py-4 shadow-[0_8px_24px_rgba(0,0,0,0.04)]">
+      <div className="flex items-start gap-3">
+        <div className="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-[#E3F1E7] text-[#2F8D50]">
+          <ListChecks className="h-4 w-4" />
+        </div>
+        <div className="min-w-0 flex-1">
+          <div className="line-clamp-2 text-sm font-semibold text-foreground">{view.title}</div>
+          <div className="mt-2 flex items-center gap-2">
+            <span className={`rounded-full border px-2 py-0.5 text-[11px] font-medium ${statusTone(view.status)}`}>
+              {appStatusLabel(view.status, locale)}
+            </span>
+            <span className="text-[11px] text-muted-foreground">
+              {pickAppText(locale, '更新于', 'Updated')} {formatShortTime(view.updatedAt, locale)}
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <div className="mt-4">
+        <div className="mb-2 flex items-center justify-between gap-3 text-xs text-muted-foreground">
+          <span>{view.progress.label}</span>
+          {percent !== null && <span className="font-medium text-foreground">{percent}%</span>}
+        </div>
+        <div className="h-2 overflow-hidden rounded-full bg-[#ECE8E5]">
+          <div
+            className="h-full rounded-full bg-[#5DB56F] transition-all"
+            style={{ width: `${percent ?? 0}%` }}
+          />
+        </div>
+      </div>
+
+      {view.summary && (
+        <p className="mt-3 line-clamp-3 text-xs leading-5 text-muted-foreground">{view.summary}</p>
+      )}
+    </section>
+  );
+}
+
+function StepList({ steps }: { steps: SessionProgressStepView[] }) {
+  const { locale } = useAppI18n();
+
+  return (
+    <section className="rounded-lg border border-[#ECE7E3] bg-white px-4 py-4">
+      <div className="mb-4 flex items-center justify-between">
+        <h3 className="text-sm font-semibold text-foreground">
+          {pickAppText(locale, '运行步骤', 'Run Steps')}
+        </h3>
+        <span className="text-xs text-muted-foreground">
+          {pickAppText(locale, `${steps.length} 步`, `${steps.length} steps`)}
+        </span>
+      </div>
+
+      <div className="space-y-0">
+        {steps.map((step, index) => (
+          <div key={step.runId} className="grid grid-cols-[24px_1fr] gap-3">
+            <div className="flex flex-col items-center">
+              <StepMarker step={step} index={index} />
+              {index < steps.length - 1 && <span className="mt-2 h-full min-h-8 w-px bg-[#E6E1DE]" />}
+            </div>
+            <div className="pb-5">
+              <div className="flex items-start justify-between gap-3">
+                <div className="min-w-0">
+                  <div className="line-clamp-2 text-sm font-medium text-foreground">
+                    {index + 1}. {step.title}
+                  </div>
+                  <div className="mt-1 text-[11px] text-muted-foreground">
+                    {step.actorName} · {formatShortTime(step.updatedAt, locale)}
+                  </div>
+                </div>
+                <span className={`shrink-0 rounded-full border px-2 py-0.5 text-[11px] ${statusTone(step.status)}`}>
+                  {appStatusLabel(step.status, locale)}
+                </span>
+              </div>
+              {step.description && (
+                <p className="mt-2 line-clamp-3 text-xs leading-5 text-muted-foreground">
+                  {step.description}
+                </p>
+              )}
+              {step.status === 'running' && (
+                <div className="mt-2 flex items-center gap-1.5 text-[11px] text-[#2F6FCA]">
+                  <Loader2 className="h-3 w-3 animate-spin" />
+                  <span>{pickAppText(locale, '正在处理', 'In progress')}</span>
+                </div>
+              )}
+            </div>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}
+
+function ArtifactRow({ artifact }: { artifact: SessionProgressArtifactView }) {
+  return (
+    <a
+      href={artifact.url || undefined}
+      target={artifact.url ? '_blank' : undefined}
+      rel={artifact.url ? 'noreferrer' : undefined}
+      className="block rounded-lg border border-[#ECE7E3] bg-[#FDFDFC] px-3 py-3 transition-colors hover:bg-[#F7F6F5]"
+    >
+      <div className="flex items-start gap-3">
+        <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-[#ECE8E5] text-[#5F5550]">
+          {artifactIcon(artifact.type)}
+        </div>
+        <div className="min-w-0 flex-1">
+          <div className="truncate text-sm font-medium text-foreground">{artifact.title}</div>
+          <div className="mt-1 text-[11px] text-muted-foreground">
+            {artifact.actorName} · {artifact.typeLabel}
+          </div>
+          <p className="mt-2 line-clamp-2 text-xs leading-5 text-muted-foreground">{artifact.preview}</p>
+        </div>
+      </div>
+    </a>
+  );
+}
+
+function ArtifactSection({ view }: { view: SessionProgressView }) {
+  const { locale } = useAppI18n();
+
+  return (
+    <section className="rounded-lg border border-[#ECE7E3] bg-white px-4 py-4">
+      <div className="mb-3 flex items-center justify-between">
+        <h3 className="text-sm font-semibold text-foreground">
+          {pickAppText(locale, '生成内容', 'Generated Content')}
+        </h3>
+        <span className="text-xs text-muted-foreground">
+          {pickAppText(locale, `${view.artifacts.length} 个`, `${view.artifacts.length} items`)}
+        </span>
+      </div>
+
+      {view.artifactTypeSummaries.length > 0 ? (
+        <div className="mb-3 flex flex-wrap gap-2">
+          {view.artifactTypeSummaries.map((item) => (
+            <span
+              key={item.type}
+              className="inline-flex items-center gap-1.5 rounded-full border border-[#E6E1DE] bg-[#F7F6F5] px-2.5 py-1 text-xs text-[#4F4642]"
+            >
+              {artifactIcon(item.type)}
+              <span>{item.label}</span>
+              <span className="font-semibold">{item.count}</span>
+            </span>
+          ))}
+        </div>
+      ) : (
+        <p className="mb-3 text-xs text-muted-foreground">
+          {pickAppText(locale, '暂时还没有生成内容。', 'No generated content yet.')}
+        </p>
+      )}
+
+      <div className="space-y-2">
+        {view.artifacts.map((artifact) => (
+          <ArtifactRow key={artifact.artifactId} artifact={artifact} />
+        ))}
+      </div>
+    </section>
+  );
+}
+
+function ProgressPanel({
+  view,
+  onClose,
+}: {
+  view: SessionProgressView;
+  onClose?: () => void;
+}) {
+  const { locale } = useAppI18n();
+
+  return (
+    <div className="flex h-full flex-col bg-[#FBFAF9]">
+      <div className="flex h-16 shrink-0 items-center justify-between border-b border-[#E6E1DE] px-5">
+        <div>
+          <h2 className="text-base font-semibold text-foreground">
+            {pickAppText(locale, '当前会话的运行进度', 'Current Session Progress')}
+          </h2>
+          <p className="text-xs text-muted-foreground">
+            {pickAppText(locale, '任务列表会自动刷新', 'Task updates refresh automatically')}
+          </p>
+        </div>
+        {onClose && (
+          <button
+            type="button"
+            onClick={onClose}
+            className="rounded-full p-2 text-muted-foreground transition-colors hover:bg-[#ECE8E5] hover:text-foreground"
+            aria-label={pickAppText(locale, '关闭进度面板', 'Close progress panel')}
+          >
+            <X className="h-4 w-4" />
+          </button>
+        )}
+      </div>
+
+      <ScrollArea className="min-h-0 flex-1 px-4 py-4">
+        <div className="space-y-4 pb-6">
+          <ProgressHeader view={view} />
+          <StepList steps={view.steps} />
+          <ArtifactSection view={view} />
+        </div>
+      </ScrollArea>
+    </div>
+  );
+}
+
+export function CurrentSessionProgressSidebar({ view }: { view: SessionProgressView }) {
+  const { locale } = useAppI18n();
+  const [mobileOpen, setMobileOpen] = React.useState(false);
+
+  return (
+    <>
+      <aside className="hidden h-full w-[380px] shrink-0 border-l border-[#E6E1DE] xl:flex">
+        <ProgressPanel view={view} />
+      </aside>
+
+      <button
+        type="button"
+        onClick={() => setMobileOpen(true)}
+        className="fixed right-3 top-24 z-40 flex h-11 w-11 items-center justify-center rounded-full border border-[#E6E1DE] bg-white text-[#342E2B] shadow-[0_8px_22px_rgba(0,0,0,0.16)] transition-colors hover:bg-[#F7F6F5] xl:hidden"
+        aria-label={pickAppText(locale, '查看当前会话运行进度', 'View current session progress')}
+      >
+        <PanelRightOpen className="h-5 w-5" />
+      </button>
+
+      {mobileOpen && (
+        <div className="fixed inset-0 z-50 xl:hidden">
+          <button
+            type="button"
+            className="absolute inset-0 bg-black/30"
+            onClick={() => setMobileOpen(false)}
+            aria-label={pickAppText(locale, '关闭进度面板', 'Close progress panel')}
+          />
+          <div className="absolute inset-y-0 right-0 w-[min(92vw,390px)] border-l border-[#E6E1DE] shadow-2xl">
+            <ProgressPanel view={view} onClose={() => setMobileOpen(false)} />
+          </div>
+        </div>
+      )}
+    </>
+  );
+}