@zwbigi/ink-xy 0.1.2 → 0.1.4

package/inkos/packages/studio/src/pages/TruthFiles.tsx

@@ -0,0 +1,194 @@
+import { fetchJson, useApi } from "../hooks/use-api";
+import { useState } from "react";
+import type { Theme } from "../hooks/use-theme";
+import type { TFunction } from "../hooks/use-i18n";
+import { useColors } from "../hooks/use-colors";
+import { Pencil, Save, X } from "lucide-react";
+
+interface TruthFile {
+  readonly name: string;
+  readonly size: number;
+  readonly preview: string;
+  readonly legacy?: boolean;
+}
+
+// Phase 5 hotfix: shim files are read-only — point users at the
+// authoritative outline/* path so edits actually land where the runtime
+// reads them.
+export const SHIM_AUTHORITATIVE_PATH: Readonly<Record<string, string>> = {
+  "story_bible.md": "outline/story_frame.md",
+  "book_rules.md": "outline/story_frame.md",
+};
+
+/**
+ * Phase hotfix 2: when the GET response carries `legacy: true`, the file is
+ * a Phase 5 compat shim. The UI must hide the Edit button and surface a
+ * warning pointing at the authoritative outline path. This helper centralizes
+ * the rule so it's unit-testable without a DOM.
+ */
+export interface FilePresentation {
+  readonly canEdit: boolean;
+  readonly legacy: boolean;
+  readonly authoritativePath: string | null;
+}
+
+export function deriveFilePresentation(
+  fileName: string | null,
+  fileData: { content: string | null; legacy?: boolean } | null | undefined,
+): FilePresentation {
+  const legacy = fileData?.legacy === true;
+  const authoritativePath = fileName ? SHIM_AUTHORITATIVE_PATH[fileName] ?? null : null;
+  // Edit only makes sense when we actually have content AND it's not a shim.
+  const canEdit = !!fileName && !!fileData && fileData.content != null && !legacy;
+  return { canEdit, legacy, authoritativePath };
+}
+
+interface Nav {
+  toBook: (id: string) => void;
+  toDashboard: () => void;
+}
+
+export function TruthFiles({ bookId, nav, theme, t }: { bookId: string; nav: Nav; theme: Theme; t: TFunction }) {
+  const c = useColors(theme);
+  const { data } = useApi<{ files: ReadonlyArray<TruthFile> }>(`/books/${bookId}/truth`);
+  const [selected, setSelected] = useState<string | null>(null);
+  const [editMode, setEditMode] = useState(false);
+  const [editText, setEditText] = useState("");
+  const [savingEdit, setSavingEdit] = useState(false);
+  const { data: fileData, refetch: refetchFile } = useApi<{ file: string; content: string | null; legacy?: boolean }>(
+    selected ? `/books/${bookId}/truth/${selected}` : "",
+  );
+
+  const presentation = deriveFilePresentation(selected, fileData);
+  const isLegacyShim = presentation.legacy;
+
+  const startEdit = () => {
+    setEditText(fileData?.content ?? "");
+    setEditMode(true);
+  };
+
+  const cancelEdit = () => {
+    setEditMode(false);
+  };
+
+  const handleSaveEdit = async () => {
+    if (!selected) return;
+    setSavingEdit(true);
+    try {
+      await fetchJson(`/books/${bookId}/truth/${selected}`, {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ content: editText }),
+      });
+      setEditMode(false);
+      refetchFile();
+    } catch (e) {
+      alert(e instanceof Error ? e.message : "Failed to save");
+    } finally {
+      setSavingEdit(false);
+    }
+  };
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center gap-2 text-sm text-muted-foreground">
+        <button onClick={nav.toDashboard} className={c.link}>{t("bread.books")}</button>
+        <span className="text-border">/</span>
+        <button onClick={() => nav.toBook(bookId)} className={c.link}>{bookId}</button>
+        <span className="text-border">/</span>
+        <span className="text-foreground">{t("truth.title")}</span>
+      </div>
+
+      <h1 className="font-serif text-3xl">{t("truth.title")}</h1>
+
+      <div className="grid grid-cols-[240px_1fr] gap-6">
+        {/* File list */}
+        <div className={`border ${c.cardStatic} rounded-lg overflow-hidden`}>
+          {data?.files.map((f) => (
+            <button
+              key={f.name}
+              onClick={() => { setSelected(f.name); setEditMode(false); }}
+              className={`w-full text-left px-3 py-2.5 text-sm border-b border-border/40 transition-colors ${
+                selected === f.name
+                  ? "bg-primary/10 text-primary"
+                  : "hover:bg-muted/30 text-muted-foreground"
+              }`}
+            >
+              <div className="font-mono text-sm truncate">{f.name}</div>
+              <div className="text-xs text-muted-foreground mt-0.5">{f.size.toLocaleString()} {t("truth.chars")}</div>
+            </button>
+          ))}
+          {(!data?.files || data.files.length === 0) && (
+            <div className="px-3 py-4 text-sm text-muted-foreground text-center">{t("truth.empty")}</div>
+          )}
+        </div>
+
+        {/* Content viewer */}
+        <div className={`border ${c.cardStatic} rounded-lg p-5 min-h-[400px] flex flex-col`}>
+          {selected && fileData?.content != null ? (
+            <>
+              {isLegacyShim && (
+                <div
+                  data-testid="legacy-shim-warning"
+                  className="mb-3 px-3 py-2 rounded-md border border-amber-500/40 bg-amber-500/10 text-amber-700 dark:text-amber-300 text-xs leading-relaxed"
+                >
+                  <div className="font-medium">兼容层只读 / Read-only compat shim</div>
+                  <div className="mt-1">
+                    本文件已废弃，仅供外部读取。权威来源：
+                    <code className="ml-1 px-1 py-0.5 rounded bg-background/40 font-mono">
+                      {SHIM_AUTHORITATIVE_PATH[selected] ?? "outline/"}
+                    </code>
+                  </div>
+                </div>
+              )}
+              <div className="flex items-center justify-end gap-2 mb-3">
+                {editMode ? (
+                  <>
+                    <button
+                      onClick={cancelEdit}
+                      className={`inline-flex items-center gap-1 px-3 py-1.5 text-xs rounded-md ${c.btnSecondary}`}
+                    >
+                      <X size={14} />
+                      Cancel
+                    </button>
+                    <button
+                      onClick={handleSaveEdit}
+                      disabled={savingEdit}
+                      className={`inline-flex items-center gap-1 px-3 py-1.5 text-xs rounded-md ${c.btnPrimary} disabled:opacity-50`}
+                    >
+                      <Save size={14} />
+                      {savingEdit ? t("truth.saving") : t("truth.save")}
+                    </button>
+                  </>
+                ) : (
+                  !isLegacyShim && (
+                    <button
+                      onClick={startEdit}
+                      className={`inline-flex items-center gap-1 px-3 py-1.5 text-xs rounded-md ${c.btnSecondary}`}
+                    >
+                      <Pencil size={14} />
+                      Edit
+                    </button>
+                  )
+                )}
+              </div>
+              {editMode ? (
+                <textarea
+                  value={editText}
+                  onChange={(e) => setEditText(e.target.value)}
+                  className={`${c.input} flex-1 rounded-md p-3 text-sm font-mono leading-relaxed resize-none min-h-[360px]`}
+                />
+              ) : (
+                <pre className="text-sm leading-relaxed whitespace-pre-wrap font-mono text-foreground/80">{fileData.content}</pre>
+              )}
+            </>
+          ) : selected && fileData?.content === null ? (
+            <div className="text-muted-foreground text-sm">{t("truth.notFound")}</div>
+          ) : (
+            <div className="text-muted-foreground/50 text-sm italic">{t("truth.selectFile")}</div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/inkos/packages/studio/src/pages/chat-page-state.test.ts

@@ -0,0 +1,206 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import {
+  clearBookCreateSessionId,
+  filterModelGroups,
+  getBookCreateSessionId,
+  getProjectChatSessionId,
+  pickModelSelection,
+  pickProjectChatSessionId,
+  setBookCreateSessionId,
+  setProjectChatSessionId,
+} from "./chat-page-state";
+
+describe("book-create session localStorage helpers", () => {
+  const storage = new Map<string, string>();
+
+  beforeEach(() => {
+    storage.clear();
+    vi.stubGlobal("localStorage", {
+      getItem: (key: string) => storage.get(key) ?? null,
+      setItem: (key: string, value: string) => {
+        storage.set(key, value);
+      },
+      removeItem: (key: string) => {
+        storage.delete(key);
+      },
+      clear: () => {
+        storage.clear();
+      },
+    });
+  });
+
+  afterEach(() => {
+    storage.clear();
+    vi.unstubAllGlobals();
+  });
+
+  it("getBookCreateSessionId returns null when empty", () => {
+    expect(getBookCreateSessionId()).toBeNull();
+  });
+
+  it("setBookCreateSessionId + get round-trips", () => {
+    setBookCreateSessionId("sess-123");
+    expect(getBookCreateSessionId()).toBe("sess-123");
+  });
+
+  it("setBookCreateSessionId overwrites previous value", () => {
+    setBookCreateSessionId("sess-old");
+    setBookCreateSessionId("sess-new");
+    expect(getBookCreateSessionId()).toBe("sess-new");
+  });
+
+  it("clearBookCreateSessionId removes the key", () => {
+    setBookCreateSessionId("sess-123");
+    clearBookCreateSessionId();
+    expect(getBookCreateSessionId()).toBeNull();
+  });
+
+  it("clearBookCreateSessionId is safe when key doesn't exist", () => {
+    clearBookCreateSessionId();
+    expect(getBookCreateSessionId()).toBeNull();
+  });
+
+  it("keeps project chat session separate from book-create session", () => {
+    setBookCreateSessionId("book-create-session");
+    setProjectChatSessionId("project-chat-session");
+    expect(getBookCreateSessionId()).toBe("book-create-session");
+    expect(getProjectChatSessionId()).toBe("project-chat-session");
+  });
+});
+
+describe("filterModelGroups", () => {
+  const grouped = [
+    {
+      service: "openai",
+      label: "OpenAI",
+      models: [
+        { id: "gpt-5.4", name: "gpt-5.4" },
+        { id: "gpt-4o", name: "gpt-4o" },
+      ],
+    },
+    {
+      service: "custom:gemma",
+      label: "LM Studio",
+      models: [
+        { id: "google/gemma-4-27b-it", name: "google/gemma-4-27b-it" },
+      ],
+    },
+  ] as const;
+
+  it("returns all groups when search is blank", () => {
+    expect(filterModelGroups(grouped, "")).toEqual(grouped);
+    expect(filterModelGroups(grouped, "   ")).toEqual(grouped);
+  });
+
+  it("filters by model name and preserves only matching groups", () => {
+    expect(filterModelGroups(grouped, "gemma")).toEqual([
+      {
+        service: "custom:gemma",
+        label: "LM Studio",
+        models: [{ id: "google/gemma-4-27b-it", name: "google/gemma-4-27b-it" }],
+      },
+    ]);
+  });
+
+  it("filters by service label", () => {
+    expect(filterModelGroups(grouped, "openai")).toEqual([
+      {
+        service: "openai",
+        label: "OpenAI",
+        models: [
+          { id: "gpt-5.4", name: "gpt-5.4" },
+          { id: "gpt-4o", name: "gpt-4o" },
+        ],
+      },
+    ]);
+  });
+});
+
+describe("pickModelSelection", () => {
+  const grouped = [
+    {
+      service: "google",
+      label: "Google Gemini",
+      models: [
+        { id: "gemini-2.5-flash", name: "gemini-2.5-flash" },
+      ],
+    },
+    {
+      service: "moonshot",
+      label: "Moonshot",
+      models: [
+        { id: "kimi-k2.5", name: "kimi-k2.5" },
+      ],
+    },
+  ] as const;
+
+  it("keeps the current selection when it is still available", () => {
+    expect(pickModelSelection(grouped, "kimi-k2.5", "moonshot")).toBeNull();
+  });
+
+  it("selects the first available model when current selection is missing", () => {
+    expect(pickModelSelection(grouped, "gemini-3.1-flash-image-preview", "google")).toEqual({
+      model: "gemini-2.5-flash",
+      service: "google",
+    });
+  });
+
+  it("selects the first available model when there is no current selection", () => {
+    expect(pickModelSelection(grouped, null, null)).toEqual({
+      model: "gemini-2.5-flash",
+      service: "google",
+    });
+  });
+
+  it("prefers the configured service and model when there is no current selection", () => {
+    expect(pickModelSelection(grouped, null, null, {
+      service: "moonshot",
+      model: "kimi-k2.5",
+    })).toEqual({
+      model: "kimi-k2.5",
+      service: "moonshot",
+    });
+  });
+
+  it("prefers the configured service even when its configured model is stale", () => {
+    expect(pickModelSelection(grouped, null, null, {
+      service: "moonshot",
+      model: "kimi-k3",
+    })).toEqual({
+      model: "kimi-k2.5",
+      service: "moonshot",
+    });
+  });
+
+  it("keeps a valid user selection over the configured default", () => {
+    expect(pickModelSelection(grouped, "gemini-2.5-flash", "google", {
+      service: "moonshot",
+      model: "kimi-k2.5",
+    })).toBeNull();
+  });
+
+  it("returns null when no models are available", () => {
+    expect(pickModelSelection([], "gemini-3.1-flash-image-preview", "google")).toBeNull();
+  });
+});
+
+describe("pickProjectChatSessionId", () => {
+  it("prefers the newest project chat session that already has messages", () => {
+    expect(pickProjectChatSessionId([
+      { sessionId: "empty-latest", messageCount: 0 },
+      { sessionId: "short-fiction-session", messageCount: 3 },
+      { sessionId: "older-session", messageCount: 1 },
+    ])).toBe("short-fiction-session");
+  });
+
+  it("falls back to the newest empty session when all sessions are empty", () => {
+    expect(pickProjectChatSessionId([
+      { sessionId: "empty-latest", messageCount: 0 },
+      { sessionId: "empty-older", messageCount: 0 },
+    ])).toBe("empty-latest");
+  });
+
+  it("returns null when there is no project chat session", () => {
+    expect(pickProjectChatSessionId([])).toBeNull();
+  });
+});

package/inkos/packages/studio/src/pages/chat-page-state.ts

@@ -0,0 +1,112 @@
+export interface ChatPageModelInfo {
+  readonly id: string;
+  readonly name?: string;
+}
+
+export interface ChatPageModelGroup {
+  readonly service: string;
+  readonly label: string;
+  readonly models: ReadonlyArray<ChatPageModelInfo>;
+}
+
+export interface ChatPageModelPreference {
+  readonly model?: string | null;
+  readonly service?: string | null;
+}
+
+export interface ChatPageSessionSummary {
+  readonly sessionId: string;
+  readonly messageCount: number;
+}
+
+const BOOK_CREATE_SESSION_KEY = "inkos.book-create.session-id";
+const PROJECT_CHAT_SESSION_KEY = "inkos.project-chat.session-id";
+
+export function getBookCreateSessionId(): string | null {
+  return globalThis.localStorage?.getItem(BOOK_CREATE_SESSION_KEY) ?? null;
+}
+
+export function setBookCreateSessionId(sessionId: string): void {
+  globalThis.localStorage?.setItem(BOOK_CREATE_SESSION_KEY, sessionId);
+}
+
+export function clearBookCreateSessionId(): void {
+  globalThis.localStorage?.removeItem(BOOK_CREATE_SESSION_KEY);
+}
+
+export function getProjectChatSessionId(): string | null {
+  return globalThis.localStorage?.getItem(PROJECT_CHAT_SESSION_KEY) ?? null;
+}
+
+export function setProjectChatSessionId(sessionId: string): void {
+  globalThis.localStorage?.setItem(PROJECT_CHAT_SESSION_KEY, sessionId);
+}
+
+export function filterModelGroups(
+  groupedModels: ReadonlyArray<ChatPageModelGroup>,
+  search: string,
+): ReadonlyArray<ChatPageModelGroup> {
+  const query = search.trim().toLowerCase();
+  if (!query) return groupedModels;
+
+  return groupedModels
+    .map((group) => ({
+      ...group,
+      models: group.models.filter((model) =>
+        (model.name ?? model.id).toLowerCase().includes(query)
+        || group.label.toLowerCase().includes(query),
+      ),
+    }))
+    .filter((group) => group.models.length > 0);
+}
+
+export function pickModelSelection(
+  groupedModels: ReadonlyArray<ChatPageModelGroup>,
+  selectedModel: string | null,
+  selectedService: string | null,
+  preference?: ChatPageModelPreference | null,
+): { model: string; service: string } | null {
+  const selectedStillAvailable = selectedModel && selectedService
+    ? groupedModels.some((group) =>
+        group.service === selectedService
+        && group.models.some((model) => model.id === selectedModel),
+      )
+    : false;
+  if (selectedStillAvailable) return null;
+
+  const preferredService = preference?.service?.trim();
+  const preferredModel = preference?.model?.trim();
+  if (preferredService) {
+    const preferredGroup = groupedModels.find((group) => group.service === preferredService);
+    const exactModel = preferredModel
+      ? preferredGroup?.models.find((model) => model.id === preferredModel)
+      : undefined;
+    if (preferredGroup && exactModel) {
+      return { model: exactModel.id, service: preferredGroup.service };
+    }
+    const firstPreferredModel = preferredGroup?.models[0];
+    if (preferredGroup && firstPreferredModel) {
+      return { model: firstPreferredModel.id, service: preferredGroup.service };
+    }
+  }
+
+  if (preferredModel) {
+    for (const group of groupedModels) {
+      const exactModel = group.models.find((model) => model.id === preferredModel);
+      if (exactModel) return { model: exactModel.id, service: group.service };
+    }
+  }
+
+  const firstGroup = groupedModels.find((group) => group.models.length > 0);
+  const firstModel = firstGroup?.models[0];
+  if (!firstGroup || !firstModel) return null;
+  return { model: firstModel.id, service: firstGroup.service };
+}
+
+export function pickProjectChatSessionId(
+  sessions: ReadonlyArray<ChatPageSessionSummary>,
+): string | null {
+  return sessions.find((session) => session.messageCount > 0)?.sessionId
+    ?? sessions[0]?.sessionId
+    ?? null;
+}