@zwbigi/ink-xy 0.1.2 → 0.1.4

package/inkos/packages/studio/src/hooks/use-theme.ts

@@ -0,0 +1,75 @@
+import { useEffect, useState } from "react";
+
+export type Theme = "light" | "dark";
+
+const THEME_STORAGE_KEY = "inkos:studio:theme";
+
+interface ThemeStorageLike {
+  getItem(key: string): string | null;
+  setItem(key: string, value: string): void;
+}
+
+export function getTimeBasedThemeForHour(hour: number): Theme {
+  return hour >= 6 && hour < 18 ? "light" : "dark";
+}
+
+function getTimeBasedTheme(): Theme {
+  return getTimeBasedThemeForHour(new Date().getHours());
+}
+
+function getThemeStorage(): ThemeStorageLike | null {
+  if (typeof window === "undefined") {
+    return null;
+  }
+
+  try {
+    return window.localStorage;
+  } catch {
+    return null;
+  }
+}
+
+export function readStoredTheme(storage: Pick<ThemeStorageLike, "getItem"> | null | undefined): Theme | null {
+  const storedTheme = storage?.getItem(THEME_STORAGE_KEY);
+  return storedTheme === "light" || storedTheme === "dark" ? storedTheme : null;
+}
+
+export function resolveThemePreference(params: {
+  readonly hour: number;
+  readonly storedTheme: Theme | null;
+}): Theme {
+  return params.storedTheme ?? getTimeBasedThemeForHour(params.hour);
+}
+
+export function useTheme() {
+  const [theme, setThemeState] = useState<Theme>(() =>
+    resolveThemePreference({
+      hour: new Date().getHours(),
+      storedTheme: readStoredTheme(getThemeStorage()),
+    }),
+  );
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      const storedTheme = readStoredTheme(getThemeStorage());
+      setThemeState(resolveThemePreference({
+        hour: new Date().getHours(),
+        storedTheme,
+      }));
+    }, 60000);
+
+    return () => clearInterval(timer);
+  }, []);
+
+  const setTheme = (nextTheme: Theme) => {
+    const storage = getThemeStorage();
+    try {
+      storage?.setItem(THEME_STORAGE_KEY, nextTheme);
+    } catch {
+      // Ignore storage failures and keep the in-memory preference for this session.
+    }
+    setThemeState(nextTheme);
+  };
+
+  return { theme, setTheme };
+}

package/inkos/packages/studio/src/index.css

@@ -0,0 +1,323 @@
+/*
+  InkOS Studio — Atmospheric Literary Workbench
+  Fonts: Instrument Serif (Headings/Literary), DM Sans (UI), JetBrains Mono (Data)
+*/
+@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=DM+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500&display=swap');
+
+@import "tailwindcss";
+
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+
+  --font-serif: 'Instrument Serif', Georgia, serif;
+  --font-sans: 'DM Sans', system-ui, sans-serif;
+  --font-mono: 'JetBrains Mono', monospace;
+
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --shadow-soft: 0 2px 15px -3px oklch(0 0 0 / 0.07), 0 4px 6px -4px oklch(0 0 0 / 0.05);
+  --shadow-3d: 0 10px 30px -10px oklch(0 0 0 / 0.15), 0 4px 10px -5px oklch(0 0 0 / 0.1);
+  --shadow-3d-hover: 0 20px 40px -15px oklch(0 0 0 / 0.2), 0 8px 16px -8px oklch(0 0 0 / 0.15);
+}
+
+/* ── Light Mode: Warm Parchment & Ink ── */
+:root {
+  --radius: 0.6rem;
+
+  /* Background: Warm, aged paper with subtle radial light */
+  --background: oklch(0.985 0.005 80);
+  --background-radial: radial-gradient(circle at 50% 0%, oklch(0.995 0.002 85) 0%, oklch(0.985 0.005 80) 100%);
+  --foreground: oklch(0.13 0.02 60);
+
+  /* Cards: Crisp sheets on paper */
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.15 0.015 60);
+
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.15 0.015 60);
+
+  /* Primary: Deep Oxblood / Ink */
+  --primary: oklch(0.45 0.12 25);
+  --primary-foreground: oklch(0.98 0.006 76);
+
+  /* Secondary: Soft paper shadow */
+  --secondary: oklch(0.94 0.01 76);
+  --secondary-foreground: oklch(0.25 0.015 60);
+
+  /* Muted: Faded ink */
+  --muted: oklch(0.94 0.008 76);
+  --muted-foreground: oklch(0.38 0.02 60);
+
+  /* Accent: Subtle gold leaf */
+  --accent: oklch(0.92 0.02 85);
+  --accent-foreground: oklch(0.25 0.05 60);
+
+  --destructive: oklch(0.55 0.18 25);
+  --destructive-foreground: oklch(0.98 0 0);
+
+  --border: oklch(0.84 0.01 76);
+  --input: oklch(0.92 0.005 76);
+  --ring: oklch(0.45 0.12 25);
+}
+
+/* ── Dark Mode: Obsidian & Candlelight ── */
+.dark {
+  /* Background: Deep obsidian with soft top glow */
+  --background: oklch(0.12 0.01 250);
+  --background-radial: radial-gradient(circle at 50% 0%, oklch(0.16 0.015 250) 0%, oklch(0.12 0.01 250) 100%);
+  --foreground: oklch(0.97 0.005 250);
+
+  /* Cards: Floating graphite */
+  --card: oklch(0.18 0.015 250);
+  --card-foreground: oklch(0.95 0.005 250);
+
+  --popover: oklch(0.18 0.015 250);
+  --popover-foreground: oklch(0.95 0.005 250);
+
+  /* Primary: Warm Amber / Candlelight */
+  --primary: oklch(0.78 0.14 85);
+  --primary-foreground: oklch(0.12 0.01 250);
+
+  /* Secondary: Dark slate */
+  --secondary: oklch(0.22 0.02 250);
+  --secondary-foreground: oklch(0.92 0.005 250);
+
+  /* Muted: Dimmed graphite */
+  --muted: oklch(0.22 0.015 250);
+  --muted-foreground: oklch(0.78 0.005 250);
+
+  /* Accent: Muted gold */
+  --accent: oklch(0.28 0.04 85);
+  --accent-foreground: oklch(0.95 0.06 85);
+
+  --destructive: oklch(0.55 0.2 25);
+  --destructive-foreground: oklch(0.98 0 0);
+
+  --border: oklch(0.30 0.02 250);
+  --input: oklch(0.25 0.02 250);
+  --ring: oklch(0.78 0.14 85);
+}
+
+body {
+  font-family: var(--font-sans);
+  font-size: 15px;
+  font-weight: 450;
+  line-height: 1.6;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  background: var(--background-radial);
+  background-attachment: fixed;
+  color: var(--foreground);
+  transition: background 0.5s ease, color 0.5s ease;
+}
+
+/* ── Cursor interaction rules ── */
+button, [role="button"], a, select, label[for], summary { cursor: pointer; }
+button:disabled, [aria-disabled="true"] { cursor: not-allowed; }
+input[type="text"], input[type="number"], input[type="email"], input[type="password"], textarea { cursor: text; }
+input[type="checkbox"], input[type="radio"] { cursor: pointer; }
+
+/* Button hover micro-feedback */
+button:not(:disabled):active {
+  transform: scale(0.97);
+  transition: transform 0.1s ease;
+}
+
+/* Subtle grain texture for physical feel */
+body::before {
+  content: '';
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 50;
+  opacity: 0.035;
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
+  mix-blend-mode: overlay;
+}
+
+/* Serif headings with literary character */
+h1, h2, h3, h4 {
+  font-family: var(--font-serif);
+  letter-spacing: -0.02em;
+  font-weight: 500;
+}
+
+h1 { font-size: 2.25rem; font-style: italic; }
+h2 { font-size: 1.75rem; }
+h3 { font-size: 1.25rem; }
+
+/* Focus indicator */
+:focus-visible {
+  outline: 2px solid var(--ring);
+  outline-offset: 2px;
+}
+
+/* Custom Scrollbar */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--border);
+  border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--muted-foreground);
+}
+
+/* ── Animation Classes ── */
+.fade-in {
+  animation: fadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+.stagger-1 { animation-delay: 0.05s; opacity: 0; }
+.stagger-2 { animation-delay: 0.1s; opacity: 0; }
+.stagger-3 { animation-delay: 0.15s; opacity: 0; }
+.stagger-4 { animation-delay: 0.2s; opacity: 0; }
+.stagger-5 { animation-delay: 0.25s; opacity: 0; }
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+/* ── Premium Layout Utilities ── */
+.glass-panel {
+  backdrop-blur: 16px;
+  background-color: color-mix(in oklch, var(--card) 70%, transparent);
+  border: 1px solid color-mix(in oklch, var(--border) 50%, transparent);
+  box-shadow: var(--shadow-3d);
+}
+
+.paper-sheet {
+  background-color: var(--card);
+  border: 1px solid var(--border);
+  box-shadow: var(--shadow-md);
+  transition: box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1),
+              border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.paper-sheet:hover {
+  box-shadow: var(--shadow-3d-hover);
+  border-color: var(--primary);
+}
+
+/* ── ChatPanel Animations ── */
+
+/* Header sparkle glow pulse */
+@keyframes iconGlow {
+  0%, 100% { filter: drop-shadow(0 0 0px transparent); }
+  50% { filter: drop-shadow(0 0 6px oklch(0.78 0.14 85 / 0.4)); }
+}
+.chat-icon-glow { animation: iconGlow 2s ease-in-out infinite; }
+
+/* Writing pen gentle bobbing */
+@keyframes iconWrite {
+  0%, 100% { transform: translateY(0) rotate(0deg); }
+  25% { transform: translateY(-1px) rotate(-3deg); }
+  75% { transform: translateY(1px) rotate(3deg); }
+}
+.chat-icon-write { animation: iconWrite 1.2s ease-in-out infinite; }
+
+/* Slow spin for revision/wrench */
+@keyframes spinSlow {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+.chat-icon-spin-slow { animation: spinSlow 3s linear infinite; }
+
+/* Pop-in for success checkmark */
+@keyframes iconPop {
+  0% { transform: scale(0); opacity: 0; }
+  60% { transform: scale(1.2); }
+  100% { transform: scale(1); opacity: 1; }
+}
+.chat-icon-pop { animation: iconPop 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
+
+/* Shake for trash icon hover */
+@keyframes shake {
+  0%, 100% { transform: translateX(0); }
+  25% { transform: translateX(-2px) rotate(-5deg); }
+  75% { transform: translateX(2px) rotate(5deg); }
+}
+
+/* Message slide-in from right (user) */
+@keyframes msgSlideRight {
+  from { opacity: 0; transform: translateX(12px); }
+  to { opacity: 1; transform: translateX(0); }
+}
+.chat-msg-user { animation: msgSlideRight 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
+
+/* Message slide-in from left (assistant) */
+@keyframes msgSlideLeft {
+  from { opacity: 0; transform: translateX(-12px); }
+  to { opacity: 1; transform: translateX(0); }
+}
+.chat-msg-assistant { animation: msgSlideLeft 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
+
+/* Thinking breathing glow */
+@keyframes thinkGlow {
+  0%, 100% { box-shadow: 0 0 0 0 oklch(0.78 0.14 85 / 0); }
+  50% { box-shadow: 0 0 12px 2px oklch(0.78 0.14 85 / 0.15); }
+}
+.chat-thinking-glow { animation: thinkGlow 2s ease-in-out infinite; }
+
+/* Typing wave for dots */
+@keyframes typingWave {
+  0%, 60%, 100% { transform: translateY(0); }
+  30% { transform: translateY(-6px); }
+}
+.chat-typing-dot { animation: typingWave 1.4s ease-in-out infinite; }
+.chat-typing-dot:nth-child(2) { animation-delay: 0.15s; }
+.chat-typing-dot:nth-child(3) { animation-delay: 0.3s; }
+
+/* Panel slide transition */
+.chat-panel-enter {
+  transition: width 300ms cubic-bezier(0.16, 1, 0.3, 1),
+              opacity 200ms ease-out;
+}
+
+/* ── Streamdown overrides ── */
+[data-streamdown="table-wrapper"] {
+  border: none;
+  background: transparent;
+  padding: 0;
+}
+[data-streamdown="table-wrapper"] > .flex.items-center.justify-end {
+  display: none;
+}

package/inkos/packages/studio/src/lib/error-copy.test.ts

@@ -0,0 +1,34 @@
+import { describe, expect, it } from "vitest";
+import { localizeKnownRuntimeMessage } from "./error-copy";
+
+describe("localizeKnownRuntimeMessage", () => {
+  it("localizes the state-degraded continuation blocker", () => {
+    expect(localizeKnownRuntimeMessage(
+      "Latest chapter 1 is state-degraded. Repair state or rewrite that chapter before continuing.",
+    )).toBe("最新第 1 章处于状态降级（state-degraded）。继续写下一章前，请先修复状态，或重写这一章。");
+  });
+
+  it("localizes related state repair errors while preserving unknown messages", () => {
+    expect(localizeKnownRuntimeMessage("Chapter 3 is not state-degraded.")).toBe(
+      "第 3 章不是状态降级（state-degraded），无需按状态修复。",
+    );
+    expect(localizeKnownRuntimeMessage(
+      "Only the latest state-degraded chapter can be repaired safely (latest is 5).",
+    )).toBe("只能安全修复最新的状态降级（state-degraded）章节；当前最新章是第 5 章。");
+    expect(localizeKnownRuntimeMessage("Bad request")).toBe("Bad request");
+  });
+
+  it("localizes common LLM configuration errors", () => {
+    const studioMessage = localizeKnownRuntimeMessage(
+      "Studio LLM API key not set. Open Studio services and save an API key for the selected service.",
+    );
+    expect(studioMessage).toContain("Studio 模型 API Key 未设置");
+    expect(studioMessage).not.toMatch(/kkaiapi/i);
+
+    const cliMessage = localizeKnownRuntimeMessage(
+      "INKOS_LLM_API_KEY not set. Run 'inkos config set-global' or add it to project .env file.",
+    );
+    expect(cliMessage).toContain("INKOS_LLM_API_KEY 未设置");
+    expect(cliMessage).not.toMatch(/kkaiapi/i);
+  });
+});

package/inkos/packages/studio/src/lib/error-copy.ts

@@ -0,0 +1,37 @@
+const KNOWN_RUNTIME_REPLACEMENTS: ReadonlyArray<{
+  readonly pattern: RegExp;
+  readonly replacement: string;
+}> = [
+  {
+    pattern: /Latest chapter (\d+) is state-degraded\. Repair state or rewrite that chapter before continuing\./g,
+    replacement: "最新第 $1 章处于状态降级（state-degraded）。继续写下一章前，请先修复状态，或重写这一章。",
+  },
+  {
+    pattern: /Chapter (\d+) is not state-degraded\./g,
+    replacement: "第 $1 章不是状态降级（state-degraded），无需按状态修复。",
+  },
+  {
+    pattern: /Only the latest state-degraded chapter can be repaired safely \(latest is (\d+)\)\./g,
+    replacement: "只能安全修复最新的状态降级（state-degraded）章节；当前最新章是第 $1 章。",
+  },
+  {
+    pattern: /State repair still failed for chapter (\d+)\./g,
+    replacement: "第 $1 章状态修复仍然失败。",
+  },
+  {
+    pattern: /Studio LLM API key not set\. Open Studio services and save an API key for the selected service\./g,
+    replacement: "Studio 模型 API Key 未设置。请打开“模型配置”，为当前服务保存 API Key。",
+  },
+  {
+    pattern: /INKOS_LLM_API_KEY not set\. Run 'inkos config set-global' or add it to project \.env file\./g,
+    replacement: "INKOS_LLM_API_KEY 未设置。请运行 `inkos config set-global`，或在项目 .env 文件中添加它。",
+  },
+];
+
+export function localizeKnownRuntimeMessage(message: string): string {
+  let localized = message;
+  for (const entry of KNOWN_RUNTIME_REPLACEMENTS) {
+    localized = localized.replace(entry.pattern, entry.replacement);
+  }
+  return localized;
+}

package/inkos/packages/studio/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/inkos/packages/studio/src/main.tsx

@@ -0,0 +1,10 @@
+import "./index.css";
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { App } from "./App";
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);

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

@@ -0,0 +1,80 @@
+import { useApi } from "../hooks/use-api";
+import type { Theme } from "../hooks/use-theme";
+import type { TFunction } from "../hooks/use-i18n";
+import { useColors } from "../hooks/use-colors";
+
+interface AnalyticsData {
+  readonly bookId: string;
+  readonly totalChapters: number;
+  readonly totalWords: number;
+  readonly avgWordsPerChapter: number;
+  readonly statusDistribution: Record<string, number>;
+}
+
+interface Nav {
+  toBook: (id: string) => void;
+  toDashboard: () => void;
+}
+
+export function Analytics({ bookId, nav, theme, t }: { bookId: string; nav: Nav; theme: Theme; t: TFunction }) {
+  const c = useColors(theme);
+  const { data, loading, error } = useApi<AnalyticsData>(`/books/${bookId}/analytics`);
+
+  if (loading) return <div className={c.muted}>{t("common.loading")}</div>;
+  if (error) return <div className="text-red-400">{t("common.error")}: {error}</div>;
+  if (!data) return null;
+
+  const statuses = Object.entries(data.statusDistribution);
+  const totalFromDist = statuses.reduce((sum, [, count]) => sum + count, 0);
+
+  return (
+    <div className="space-y-6">
+      <div className={`flex items-center gap-2 text-sm ${c.muted}`}>
+        <button onClick={nav.toDashboard} className={c.link}>{t("bread.books")}</button>
+        <span>/</span>
+        <button onClick={() => nav.toBook(bookId)} className={c.link}>{bookId}</button>
+        <span>/</span>
+        <span className={c.subtle}>{t("analytics.title")}</span>
+      </div>
+
+      <h1 className="text-2xl font-semibold">{t("analytics.title")}</h1>
+
+      <div className="grid grid-cols-3 gap-4">
+        <StatCard label={t("analytics.totalChapters")} value={data.totalChapters.toString()} c={c} />
+        <StatCard label={t("analytics.totalWords")} value={data.totalWords.toLocaleString()} c={c} />
+        <StatCard label={t("analytics.avgWords")} value={data.avgWordsPerChapter.toLocaleString()} c={c} />
+      </div>
+
+      {statuses.length > 0 && (
+        <div className={`border ${c.cardStatic} rounded-lg p-5`}>
+          <h2 className={`text-sm font-medium ${c.subtle} mb-4`}>{t("analytics.statusDist")}</h2>
+          <div className="space-y-3">
+            {statuses.map(([status, count]) => (
+              <div key={status}>
+                <div className="flex justify-between text-sm mb-1">
+                  <span className={c.subtle}>{status}</span>
+                  <span className={c.muted}>{count}</span>
+                </div>
+                <div className={`h-2 ${c.btnSecondary} rounded-full overflow-hidden`}>
+                  <div
+                    className="h-full bg-zinc-500 rounded-full transition-all"
+                    style={{ width: `${totalFromDist > 0 ? (count / totalFromDist) * 100 : 0}%` }}
+                  />
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function StatCard({ label, value, c }: { label: string; value: string; c: ReturnType<typeof useColors> }) {
+  return (
+    <div className={`border ${c.cardStatic} rounded-lg p-5`}>
+      <div className={`text-sm ${c.muted} mb-1`}>{label}</div>
+      <div className="text-2xl font-semibold tabular-nums">{value}</div>
+    </div>
+  );
+}