@zwbigi/ink-xy 0.1.2 → 0.1.4

package/inkos/packages/studio/src/components/chat/ToolExecutionSteps.tsx

@@ -0,0 +1,320 @@
+import { useMemo, useState, useEffect } from "react";
+import type { ToolExecution, PipelineStage } from "../../store/chat/types";
+import {
+  Collapsible,
+  CollapsibleTrigger,
+  CollapsibleContent,
+} from "../ui/collapsible";
+import {
+  Loader2,
+  CheckCircle2,
+  XCircle,
+  ChevronDown,
+  Wrench,
+} from "lucide-react";
+import { buildApiUrl } from "../../hooks/use-api";
+
+// -- Status rendering helpers --
+
+function ExecStatusBadge({ status }: { status: ToolExecution["status"] }) {
+  switch (status) {
+    case "running":
+      return (
+        <span className="inline-flex items-center gap-1 text-xs text-primary">
+          <Loader2 size={12} className="animate-spin" />
+          <span>执行中</span>
+        </span>
+      );
+    case "processing":
+      return (
+        <span className="inline-flex items-center gap-1 text-xs text-muted-foreground">
+          <Loader2 size={12} className="animate-spin" style={{ animationDuration: "2s" }} />
+          <span>处理结果</span>
+        </span>
+      );
+    case "completed":
+      return (
+        <span className="inline-flex items-center gap-1 text-xs text-green-600 dark:text-green-400">
+          <CheckCircle2 size={12} />
+          <span>已完成</span>
+        </span>
+      );
+    case "error":
+      return (
+        <span className="inline-flex items-center gap-1 text-xs text-destructive">
+          <XCircle size={12} />
+          <span>失败</span>
+        </span>
+      );
+  }
+}
+
+function StageIcon({ status }: { status: PipelineStage["status"] }) {
+  switch (status) {
+    case "pending":
+      return <span className="w-4 h-4 rounded-full border border-border/60 flex items-center justify-center shrink-0 text-[8px] text-muted-foreground/40">○</span>;
+    case "active":
+      return <Loader2 size={14} className="text-primary animate-spin shrink-0" />;
+    case "completed":
+      return <CheckCircle2 size={14} className="text-green-600 dark:text-green-400 shrink-0" />;
+  }
+}
+
+function formatProgress(progress: NonNullable<PipelineStage["progress"]>): string {
+  const secs = Math.round(progress.elapsedMs / 1000);
+  const statusLabel = progress.status === "thinking" ? "思考中" : "";
+  const chars = progress.totalChars > 0
+    ? progress.chineseChars > 0 ? `${progress.totalChars}字` : `${progress.totalChars} chars`
+    : "";
+  const parts = [statusLabel, `${secs}s`, chars].filter(Boolean);
+  return parts.join(" · ");
+}
+
+function formatDuration(startedAt: number, completedAt?: number): string {
+  const ms = (completedAt ?? Date.now()) - startedAt;
+  const secs = Math.round(ms / 1000);
+  return secs < 60 ? `${secs}s` : `${Math.floor(secs / 60)}m ${secs % 60}s`;
+}
+
+function encodeProjectPath(path: string): string {
+  return path.split("/").map((part) => encodeURIComponent(part)).join("/");
+}
+
+function extractResultPath(result: string | undefined, label: string): string | null {
+  if (!result) return null;
+  const escaped = label.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  const match = result.match(new RegExp(`^${escaped}:\\s*(.+)$`, "im"));
+  const path = match?.[1]?.trim();
+  return path || null;
+}
+
+export interface GeneratedArtifactDetails {
+  readonly kind: "short_fiction_created" | "cover_generated";
+  readonly title?: string;
+  readonly storyId?: string;
+  readonly finalMarkdownPath?: string;
+  readonly salesPackagePath?: string;
+  readonly coverPromptPath?: string;
+  readonly coverImagePath?: string;
+  readonly coverError?: string;
+}
+
+function stringField(record: Record<string, unknown>, key: string): string | undefined {
+  const value = record[key];
+  return typeof value === "string" && value.trim() ? value : undefined;
+}
+
+export function getGeneratedArtifactDetails(exec: ToolExecution): GeneratedArtifactDetails | null {
+  if (!["short_fiction_run", "generate_cover"].includes(exec.tool)) return null;
+  if (!exec.details || typeof exec.details !== "object") return null;
+  const record = exec.details as Record<string, unknown>;
+  if (record.kind !== "short_fiction_created" && record.kind !== "cover_generated") return null;
+  return {
+    kind: record.kind,
+    title: stringField(record, "title"),
+    storyId: stringField(record, "storyId"),
+    finalMarkdownPath: stringField(record, "finalMarkdownPath"),
+    salesPackagePath: stringField(record, "salesPackagePath"),
+    coverPromptPath: stringField(record, "coverPromptPath"),
+    coverImagePath: stringField(record, "coverImagePath"),
+    coverError: stringField(record, "coverError"),
+  };
+}
+
+function ShortFictionResultPreview({ exec }: { exec: ToolExecution }) {
+  if (!["short_fiction_run", "generate_cover"].includes(exec.tool) || exec.status !== "completed") return null;
+  const details = getGeneratedArtifactDetails(exec);
+  const coverPath = details?.coverImagePath ?? extractResultPath(exec.result, "Cover image");
+  const coverError = details?.coverError ?? extractResultPath(exec.result, "Cover image reason");
+  if (!coverPath || !/\.(png|jpe?g|webp)$/iu.test(coverPath)) {
+    if (!coverError) return null;
+    return (
+      <div className="mx-3 mb-3 mt-1 rounded-xl border border-destructive/20 bg-destructive/5 px-3 py-2 text-xs text-destructive">
+        封面未生成：{coverError}
+      </div>
+    );
+  }
+
+  const coverUrl = buildApiUrl(`/project/files/${encodeProjectPath(coverPath)}`);
+  if (!coverUrl) return null;
+  const title = details?.title ?? details?.storyId ?? "短篇封面";
+
+  return (
+    <div className="mx-3 mb-3 mt-1 overflow-hidden rounded-xl border border-border/40 bg-background/70">
+      <img
+        src={coverUrl}
+        alt={title}
+        className="block max-h-[360px] w-full object-contain bg-muted/20"
+        loading="lazy"
+      />
+      <div className="border-t border-border/40 px-3 py-2 text-[11px] text-muted-foreground break-all">
+        {coverPath}
+      </div>
+    </div>
+  );
+}
+
+function isPipelineTool(tool: string): boolean {
+  return tool === "sub_agent" || tool === "short_fiction_run" || tool === "generate_cover";
+}
+
+// -- Live elapsed timer hook --
+
+function useElapsedTimer(startedAt: number, active: boolean): number {
+  const [elapsed, setElapsed] = useState(() => active ? Date.now() - startedAt : 0);
+  useEffect(() => {
+    if (!active) return;
+    setElapsed(Date.now() - startedAt);
+    const id = setInterval(() => setElapsed(Date.now() - startedAt), 1000);
+    return () => clearInterval(id);
+  }, [startedAt, active]);
+  return elapsed;
+}
+
+// -- Pipeline operation (sub_agent) --
+
+function PipelineExecution({ exec }: { exec: ToolExecution }) {
+  const isActive = exec.status === "running" || exec.status === "processing";
+  const [open, setOpen] = useState(isActive);
+  const elapsedMs = useElapsedTimer(exec.startedAt, isActive);
+
+  useEffect(() => {
+    if (exec.status === "running") setOpen(true);
+    if (exec.status === "completed") {
+      const timer = setTimeout(() => setOpen(false), 500);
+      return () => clearTimeout(timer);
+    }
+  }, [exec.status]);
+
+  const bookId = exec.args?.bookId as string | undefined;
+
+  return (
+    <Collapsible open={open} onOpenChange={setOpen} className="rounded-xl border border-border/40 bg-card/60">
+      <CollapsibleTrigger className="w-full flex items-center justify-between gap-2 px-3 py-2.5 rounded-xl hover:bg-card/80 transition-colors cursor-pointer">
+        <div className="flex items-center gap-2 min-w-0">
+          <span className="text-sm font-medium text-foreground truncate">
+            {exec.label}
+            {bookId && <span className="text-muted-foreground font-normal"> · {bookId}</span>}
+          </span>
+        </div>
+        <div className="flex items-center gap-2 shrink-0">
+          <span className="text-[10px] text-muted-foreground/60">
+            {isActive
+              ? formatDuration(exec.startedAt, exec.startedAt + elapsedMs)
+              : exec.completedAt ? formatDuration(exec.startedAt, exec.completedAt) : ""}
+          </span>
+          <ExecStatusBadge status={exec.status} />
+          <ChevronDown size={14} className={`text-muted-foreground transition-transform ${open ? "rotate-180" : ""}`} />
+        </div>
+      </CollapsibleTrigger>
+      <ShortFictionResultPreview exec={exec} />
+      <CollapsibleContent>
+        <div className="px-3 pb-3 pt-1">
+          {/* Real-time execution logs */}
+          {exec.logs && exec.logs.length > 0 && (
+            <ul className="space-y-0.5">
+              {exec.logs.map((log, i) => {
+                const isError = log.startsWith("[error]") || /error/i.test(log);
+                const isWarn = log.startsWith("[warning]") || /warning|警告/i.test(log);
+                return (
+                  <li key={i} className={`text-xs font-mono break-words ${isError ? "text-destructive" : isWarn ? "text-yellow-600 dark:text-yellow-400" : "text-muted-foreground"}`}>
+                    {log}
+                  </li>
+                );
+              })}
+            </ul>
+          )}
+          {exec.status === "error" && exec.error && (
+            <div className="mt-2 text-xs text-destructive bg-destructive/5 rounded-lg px-2.5 py-2">
+              {exec.error}
+            </div>
+          )}
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}
+
+// -- Utility tools (read/edit/grep/ls) grouped --
+
+function UtilityToolsGroup({ execs }: { execs: ToolExecution[] }) {
+  const [open, setOpen] = useState(false);
+  const allDone = execs.every(e => e.status === "completed" || e.status === "error");
+  const hasError = execs.some(e => e.status === "error");
+
+  return (
+    <Collapsible open={open} onOpenChange={setOpen}>
+      <CollapsibleTrigger className="flex items-center gap-2 px-2 py-1 rounded-lg hover:bg-muted/50 transition-colors cursor-pointer text-xs text-muted-foreground">
+        <Wrench size={12} />
+        <span>{execs.length} 个文件操作</span>
+        {allDone && !hasError && <CheckCircle2 size={10} className="text-green-600 dark:text-green-400" />}
+        {hasError && <XCircle size={10} className="text-destructive" />}
+        {!allDone && <Loader2 size={10} className="animate-spin text-primary" />}
+        <ChevronDown size={10} className={`transition-transform ${open ? "rotate-180" : ""}`} />
+      </CollapsibleTrigger>
+      <CollapsibleContent>
+        <ul className="pl-6 space-y-0.5 py-1">
+          {execs.map((exec) => (
+            <li key={exec.id} className="flex items-center gap-2 text-xs text-muted-foreground">
+              <span className="font-mono truncate">{exec.tool} {String(exec.args?.path ?? exec.args?.pattern ?? "")}</span>
+              {exec.status === "completed" && <CheckCircle2 size={10} className="text-green-600 dark:text-green-400 shrink-0" />}
+              {exec.status === "error" && <XCircle size={10} className="text-destructive shrink-0" />}
+              {(exec.status === "running" || exec.status === "processing") && <Loader2 size={10} className="animate-spin text-primary shrink-0" />}
+            </li>
+          ))}
+        </ul>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}
+
+// -- Main component --
+
+export interface ToolExecutionStepsProps {
+  executions: ToolExecution[];
+}
+
+/**
+ * Group executions chronologically: pipeline ops render individually,
+ * consecutive utility tools are merged into a single collapsed group.
+ */
+type RenderGroup =
+  | { type: "pipeline"; exec: ToolExecution }
+  | { type: "utilities"; execs: ToolExecution[] };
+
+export function groupToolExecutionsChronologically(executions: ToolExecution[]): RenderGroup[] {
+  const groups: RenderGroup[] = [];
+  let utilBuf: ToolExecution[] = [];
+
+  const flushUtils = () => {
+    if (utilBuf.length > 0) {
+      groups.push({ type: "utilities", execs: utilBuf });
+      utilBuf = [];
+    }
+  };
+
+  for (const exec of executions) {
+    if (isPipelineTool(exec.tool)) {
+      flushUtils();
+      groups.push({ type: "pipeline", exec });
+    } else {
+      utilBuf.push(exec);
+    }
+  }
+  flushUtils();
+  return groups;
+}
+
+export function ToolExecutionSteps({ executions }: ToolExecutionStepsProps) {
+  const groups = useMemo(() => groupToolExecutionsChronologically(executions), [executions]);
+
+  return (
+    <div className="space-y-2 mt-2">
+      {groups.map((g, i) =>
+        g.type === "pipeline"
+          ? <PipelineExecution key={g.exec.id} exec={g.exec} />
+          : <UtilityToolsGroup key={`utils-${i}`} execs={g.execs} />
+      )}
+    </div>
+  );
+}

package/inkos/packages/studio/src/components/chat/__tests__/ToolExecutionSteps.test.ts

@@ -0,0 +1,114 @@
+import { describe, it, expect } from "vitest";
+import type { ToolExecution } from "../../../store/chat/types";
+import { getGeneratedArtifactDetails, groupToolExecutionsChronologically } from "../ToolExecutionSteps";
+
+const makeExec = (overrides: Partial<ToolExecution> & { id: string; tool: string }): ToolExecution => ({
+  label: "test",
+  status: "completed",
+  startedAt: Date.now(),
+  ...overrides,
+});
+
+describe("groupChronologically", () => {
+  it("keeps read before pipeline when read happened first", () => {
+    const execs: ToolExecution[] = [
+      makeExec({ id: "1", tool: "read", label: "读取文件" }),
+      makeExec({ id: "2", tool: "sub_agent", agent: "writer", label: "写作" }),
+    ];
+
+    const groups = groupToolExecutionsChronologically(execs);
+
+    expect(groups).toHaveLength(2);
+    expect(groups[0].type).toBe("utilities");
+    expect(groups[1].type).toBe("pipeline");
+  });
+
+  it("groups consecutive utility tools together", () => {
+    const execs: ToolExecution[] = [
+      makeExec({ id: "1", tool: "read", label: "读取文件" }),
+      makeExec({ id: "2", tool: "grep", label: "搜索" }),
+      makeExec({ id: "3", tool: "read", label: "读取文件" }),
+    ];
+
+    const groups = groupToolExecutionsChronologically(execs);
+
+    expect(groups).toHaveLength(1);
+    expect(groups[0].type).toBe("utilities");
+    if (groups[0].type === "utilities") {
+      expect(groups[0].execs).toHaveLength(3);
+    }
+  });
+
+  it("interleaves utility groups around pipeline ops", () => {
+    const execs: ToolExecution[] = [
+      makeExec({ id: "1", tool: "read", label: "读取文件" }),
+      makeExec({ id: "2", tool: "sub_agent", agent: "writer", label: "写作" }),
+      makeExec({ id: "3", tool: "read", label: "读取文件" }),
+      makeExec({ id: "4", tool: "grep", label: "搜索" }),
+    ];
+
+    const groups = groupToolExecutionsChronologically(execs);
+
+    expect(groups).toHaveLength(3);
+    expect(groups[0].type).toBe("utilities");
+    expect(groups[1].type).toBe("pipeline");
+    expect(groups[2].type).toBe("utilities");
+    if (groups[2].type === "utilities") {
+      expect(groups[2].execs).toHaveLength(2);
+    }
+  });
+
+  it("handles pipeline-only executions", () => {
+    const execs: ToolExecution[] = [
+      makeExec({ id: "1", tool: "sub_agent", agent: "writer", label: "写作" }),
+    ];
+
+    const groups = groupToolExecutionsChronologically(execs);
+
+    expect(groups).toHaveLength(1);
+    expect(groups[0].type).toBe("pipeline");
+  });
+
+  it("handles empty array", () => {
+    expect(groupToolExecutionsChronologically([])).toHaveLength(0);
+  });
+
+  it("renders short fiction and cover tools as visible pipeline cards", () => {
+    const execs: ToolExecution[] = [
+      makeExec({ id: "1", tool: "read", label: "读取文件" }),
+      makeExec({ id: "2", tool: "generate_cover", label: "生成封面" }),
+      makeExec({ id: "3", tool: "short_fiction_run", label: "短篇生产" }),
+      makeExec({ id: "4", tool: "grep", label: "搜索" }),
+    ];
+
+    const groups = groupToolExecutionsChronologically(execs);
+
+    expect(groups).toHaveLength(4);
+    expect(groups.map((group) => group.type)).toEqual(["utilities", "pipeline", "pipeline", "utilities"]);
+    expect(groups[1].type === "pipeline" ? groups[1].exec.tool : "").toBe("generate_cover");
+    expect(groups[2].type === "pipeline" ? groups[2].exec.tool : "").toBe("short_fiction_run");
+  });
+
+  it("extracts generated cover details from public short fiction tools", () => {
+    const exec = makeExec({
+      id: "short-1",
+      tool: "short_fiction_run",
+      label: "短篇生产",
+      details: {
+        kind: "short_fiction_created",
+        storyId: "demo-story",
+        finalMarkdownPath: "shorts/demo-story/final/full.md",
+        salesPackagePath: "shorts/demo-story/final/sales-package.md",
+        coverImagePath: "shorts/demo-story/final/cover.png",
+      },
+    });
+
+    expect(getGeneratedArtifactDetails(exec)).toMatchObject({
+      kind: "short_fiction_created",
+      storyId: "demo-story",
+      finalMarkdownPath: "shorts/demo-story/final/full.md",
+      salesPackagePath: "shorts/demo-story/final/sales-package.md",
+      coverImagePath: "shorts/demo-story/final/cover.png",
+    });
+  });
+});

package/inkos/packages/studio/src/components/chat-utils.ts

@@ -0,0 +1,56 @@
+// Pure helper functions extracted from ChatBar for reuse in ChatPage and tests.
+
+interface ChatMessage {
+  readonly role: "user" | "assistant";
+  readonly content: string;
+  readonly timestamp: number;
+}
+
+interface SharedSessionMeta {
+  readonly activeBookId?: string;
+  readonly automationMode?: string;
+  readonly currentStage?: string;
+  readonly pendingSummary?: string;
+  readonly draftTitle?: string;
+}
+
+interface BookRef {
+  readonly id: string;
+}
+
+export function coerceSharedSessionMessages(
+  messages: ReadonlyArray<{ role: "user" | "assistant" | "system"; content: string; timestamp: number }>,
+): ReadonlyArray<ChatMessage> {
+  return messages
+    .filter((message) => message.role === "user" || message.role === "assistant")
+    .map((message) => ({
+      role: message.role as "user" | "assistant",
+      content: message.content,
+      timestamp: message.timestamp,
+    }));
+}
+
+export function resolveDirectWriteTarget(
+  activeBookId: string | undefined,
+  books: ReadonlyArray<BookRef>,
+): { bookId: string | null; reason: "active" | "single" | "missing" | "ambiguous" } {
+  if (activeBookId && books.some((book) => book.id === activeBookId)) {
+    return { bookId: activeBookId, reason: "active" };
+  }
+  if (books.length === 1) {
+    return { bookId: books[0]!.id, reason: "single" };
+  }
+  if (books.length === 0) {
+    return { bookId: null, reason: "missing" };
+  }
+  return { bookId: null, reason: "ambiguous" };
+}
+
+export function formatSharedSessionContext(meta: SharedSessionMeta): string {
+  return [
+    meta.activeBookId ?? "no-book",
+    meta.draftTitle ? `draft:${meta.draftTitle}` : undefined,
+    meta.automationMode ?? "semi",
+    meta.currentStage,
+  ].filter(Boolean).join(" · ");
+}

package/inkos/packages/studio/src/components/chatbar-state.test.ts

@@ -0,0 +1,69 @@
+import { describe, expect, it } from "vitest";
+import {
+  coerceSharedSessionMessages,
+  formatSharedSessionContext,
+  resolveDirectWriteTarget,
+} from "./chat-utils";
+
+describe("resolveDirectWriteTarget", () => {
+  it("prefers the active book when the user is already inside a book flow", () => {
+    expect(resolveDirectWriteTarget("beta", [
+      { id: "alpha" },
+      { id: "beta" },
+    ])).toEqual({
+      bookId: "beta",
+      reason: "active",
+    });
+  });
+
+  it("falls back to the only book when there is no active context", () => {
+    expect(resolveDirectWriteTarget(undefined, [{ id: "solo" }])).toEqual({
+      bookId: "solo",
+      reason: "single",
+    });
+  });
+
+  it("reports when there is no available target book", () => {
+    expect(resolveDirectWriteTarget(undefined, [])).toEqual({
+      bookId: null,
+      reason: "missing",
+    });
+  });
+
+  it("does not guess when multiple books exist without an active context", () => {
+    expect(resolveDirectWriteTarget(undefined, [
+      { id: "alpha" },
+      { id: "beta" },
+    ])).toEqual({
+      bookId: null,
+      reason: "ambiguous",
+    });
+  });
+
+  it("coerces shared session messages into chat bubbles", () => {
+    expect(coerceSharedSessionMessages([
+      { role: "user", content: "continue", timestamp: 1 },
+      { role: "assistant", content: "Completed write_next for harbor.", timestamp: 2 },
+      { role: "system", content: "internal", timestamp: 3 },
+    ])).toEqual([
+      { role: "user", content: "continue", timestamp: 1 },
+      { role: "assistant", content: "Completed write_next for harbor.", timestamp: 2 },
+    ]);
+  });
+
+  it("formats shared session context with mode and stage", () => {
+    expect(formatSharedSessionContext({
+      activeBookId: "harbor",
+      automationMode: "semi",
+      currentStage: "waiting for your next decision",
+    })).toBe("harbor · semi · waiting for your next decision");
+  });
+
+  it("surfaces creation-draft context when no active book is bound yet", () => {
+    expect(formatSharedSessionContext({
+      draftTitle: "夜港账本",
+      automationMode: "semi",
+      currentStage: "developing book draft",
+    })).toBe("no-book · draft:夜港账本 · semi · developing book draft");
+  });
+});

package/inkos/packages/studio/src/components/sidebar/ChaptersSection.tsx

@@ -0,0 +1,66 @@
+import { useEffect, useState } from "react";
+import { fetchJson } from "../../hooks/use-api";
+import { useChatStore } from "../../store/chat";
+import { SidebarCard } from "./SidebarCard";
+import { cn } from "../../lib/utils";
+
+interface ChapterMeta {
+  number: number;
+  title: string;
+  status: string;
+  wordCount: number;
+}
+
+const STATUS_INDICATOR: Record<string, { symbol: string; color: string }> = {
+  approved: { symbol: "✓", color: "text-emerald-500" },
+  "ready-for-review": { symbol: "◆", color: "text-amber-500" },
+  drafted: { symbol: "○", color: "text-muted-foreground" },
+  "needs-revision": { symbol: "✕", color: "text-destructive" },
+  imported: { symbol: "◇", color: "text-blue-500" },
+};
+
+interface ChaptersSectionProps {
+  readonly bookId: string;
+  readonly isZh: boolean;
+}
+
+export function ChaptersSection({ bookId, isZh }: ChaptersSectionProps) {
+  const [chapters, setChapters] = useState<ReadonlyArray<ChapterMeta>>([]);
+  const bookDataVersion = useChatStore((s) => s.bookDataVersion);
+
+  useEffect(() => {
+    fetchJson<{ chapters: ChapterMeta[] }>(`/books/${bookId}`)
+      .then((data) => setChapters(data.chapters))
+      .catch(() => setChapters([]));
+  }, [bookId, bookDataVersion]);
+
+  return (
+    <SidebarCard title={isZh ? "章节" : "Chapters"}>
+      {chapters.length === 0 ? (
+        <p className="text-xs text-muted-foreground/50 italic">
+          {isZh ? "暂无章节" : "No chapters"}
+        </p>
+      ) : (
+        <ul className="space-y-1 max-h-52 overflow-y-auto overflow-x-hidden">
+          {chapters.map((ch) => {
+            const ind = STATUS_INDICATOR[ch.status] ?? { symbol: "○", color: "text-muted-foreground" };
+            return (
+              <li
+                key={`${ch.number}-${ch.title ?? ""}`}
+                onClick={() => useChatStore.getState().openChapterArtifact(ch.number)}
+                className="flex items-center gap-2 py-0.5 text-xs text-muted-foreground cursor-pointer hover:text-foreground transition-colors rounded px-1 -mx-1 hover:bg-secondary/50">
+                <span className={cn("text-[10px] shrink-0", ind.color)}>{ind.symbol}</span>
+                <span className="truncate flex-1">
+                  {String(ch.number).padStart(2, "0")} {ch.title || (isZh ? `第${ch.number}章` : `Chapter ${ch.number}`)}
+                </span>
+                <span className="tabular-nums text-[10px] text-muted-foreground/50 shrink-0">
+                  {(ch.wordCount ?? 0).toLocaleString()}
+                </span>
+              </li>
+            );
+          })}
+        </ul>
+      )}
+    </SidebarCard>
+  );
+}