docs-i18n 0.6.2 → 0.7.0

package/admin/app/routes/index.tsx

@@ -0,0 +1,416 @@
+import { createFileRoute, useNavigate } from '@tanstack/react-router';
+import { useQuery } from '@tanstack/react-query';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { FileList } from '../components/FileList';
+import { JobDialog } from '../components/JobDialog';
+import { JobPanel } from '../components/JobPanel';
+import { LangGrid } from '../components/LangGrid';
+import { Preview } from '../components/Preview';
+import { api } from '../lib/api';
+
+type ViewMode = 'split' | 'en' | 'lang';
+type StatusFilter = 'all' | 'complete' | 'partial' | 'missing';
+type SectionFilter = 'all' | 'docs' | 'blog' | 'learn';
+
+export interface AdminSearch {
+  project?: string;
+  v?: string;
+  lang?: string;
+  file?: string;
+  files?: string;
+  view?: ViewMode;
+  toc?: string;
+  nodes?: string;
+  status?: StatusFilter;
+  section?: SectionFilter;
+}
+
+/**
+ * Parse version keys into project/version structure.
+ * Multi-project keys look like "query/v5", single-project keys look like "v5".
+ */
+function parseProjectVersions(versionKeys: string[]) {
+  const isMultiProject = versionKeys.some((k) => k.includes('/'));
+
+  if (!isMultiProject) {
+    return { projects: [{ id: '_default', versions: versionKeys }], isMultiProject: false };
+  }
+
+  const projectMap = new Map<string, string[]>();
+  for (const key of versionKeys) {
+    const slashIdx = key.indexOf('/');
+    const projectId = slashIdx >= 0 ? key.slice(0, slashIdx) : '_default';
+    const version = slashIdx >= 0 ? key.slice(slashIdx + 1) : key;
+    if (!projectMap.has(projectId)) projectMap.set(projectId, []);
+    projectMap.get(projectId)!.push(version);
+  }
+
+  return {
+    projects: Array.from(projectMap.entries()).map(([id, versions]) => ({ id, versions })),
+    isMultiProject: true,
+  };
+}
+
+export const Route = createFileRoute('/')({
+  validateSearch: (search: Record<string, unknown>): AdminSearch => ({
+    project: (search.project as string) || undefined,
+    v: (search.v as string) || undefined,
+    lang: (search.lang as string) || undefined,
+    file: (search.file as string) || undefined,
+    files: (search.files as string) || undefined,
+    view: (search.view as ViewMode) || undefined,
+    toc: (search.toc as string) || undefined,
+    nodes: (search.nodes as string) || undefined,
+    status: (search.status as StatusFilter) || undefined,
+    section: (search.section as SectionFilter) || undefined,
+  }),
+  component: AdminPage,
+});
+
+function AdminPage() {
+  const search = Route.useSearch();
+  const navigate = useNavigate({ from: '/' });
+
+  const lang = search.lang || null;
+  const file = search.file || null;
+  const showFiles = search.files !== '0';
+  const view: ViewMode = search.view || 'lang';
+  const toc = search.toc !== '0';
+  const nodes = search.nodes === '1';
+  const status: StatusFilter = search.status || 'all';
+  const section: SectionFilter = search.section || 'all';
+
+  const [theme, setThemeState] = useState(() => {
+    if (typeof window === 'undefined') return 'dark';
+    const saved = localStorage.getItem('theme');
+    return saved === 'light' ? 'light' : 'dark';
+  });
+  const [toast, setToast] = useState<string | null>(null);
+
+  useEffect(() => {
+    document.documentElement.dataset.theme = theme;
+  }, [theme]);
+
+  useEffect(() => {
+    if (!toast) return;
+    const t = setTimeout(() => setToast(null), 3000);
+    return () => clearTimeout(t);
+  }, [toast]);
+
+  const updateSearch = useCallback(
+    (updates: Partial<AdminSearch>) => {
+      navigate({
+        search: (prev: AdminSearch) => {
+          const next = { ...prev };
+          for (const [k, v] of Object.entries(updates)) {
+            if (v === null || v === undefined || v === '') {
+              delete (next as Record<string, unknown>)[k];
+            } else {
+              (next as Record<string, unknown>)[k] = v;
+            }
+          }
+          return next;
+        },
+        replace: true,
+      });
+    },
+    [navigate],
+  );
+
+  // ── URL setters ──
+  const setProject = useCallback(
+    (p: string | null) => updateSearch({ project: p || undefined, v: undefined, lang: undefined, file: undefined }),
+    [updateSearch],
+  );
+  const setVersion = useCallback(
+    (v: string) => updateSearch({ v: v || undefined, lang: undefined, file: undefined }),
+    [updateSearch],
+  );
+  const setLang = useCallback(
+    (l: string | null) => updateSearch({ lang: l || undefined }),
+    [updateSearch],
+  );
+  const setFile = useCallback(
+    (f: string | null) => updateSearch({ file: f || undefined }),
+    [updateSearch],
+  );
+  const setShowFiles = useCallback(
+    (show: boolean) => updateSearch({ files: show ? undefined : '0' }),
+    [updateSearch],
+  );
+  const setView = useCallback(
+    (m: ViewMode) => updateSearch({ view: m === 'lang' ? undefined : m }),
+    [updateSearch],
+  );
+  const setNodes = useCallback(
+    (show: boolean) => updateSearch({ nodes: show ? '1' : undefined }),
+    [updateSearch],
+  );
+  const setToc = useCallback(
+    (show: boolean) => updateSearch({ toc: show ? undefined : '0' }),
+    [updateSearch],
+  );
+  const setStatusFilter = useCallback(
+    (s: StatusFilter) => updateSearch({ status: s === 'all' ? undefined : s }),
+    [updateSearch],
+  );
+  const setSectionFilter = useCallback(
+    (s: SectionFilter) => updateSearch({ section: s === 'all' ? undefined : s }),
+    [updateSearch],
+  );
+
+  // ── Non-URL state ──
+  const [selected, setSelected] = useState<Set<string>>(new Set());
+  const [showDialog, setShowDialog] = useState(false);
+  const [dialogFiles, setDialogFiles] = useState<string[] | undefined>();
+
+  // ── Queries ──
+  const { data: statusData } = useQuery({
+    queryKey: ['status'],
+    queryFn: api.status,
+  });
+
+  const { data: versionInfo } = useQuery({
+    queryKey: ['version'],
+    queryFn: api.version,
+    staleTime: Number.POSITIVE_INFINITY,
+  });
+
+  // ── Derive project/version structure ──
+  const { projectList, isMultiProject, activeProject, activeVersions, version } = useMemo(() => {
+    if (!statusData) {
+      return { projectList: [], isMultiProject: false, activeProject: null, activeVersions: [] as string[], version: 'latest' };
+    }
+    const parsed = parseProjectVersions(statusData.versions);
+    const projectList = parsed.projects;
+    const isMultiProject = parsed.isMultiProject;
+
+    // Determine active project
+    let activeProject = isMultiProject
+      ? (search.project || projectList[0]?.id || null)
+      : null;
+    // Validate the project exists
+    if (isMultiProject && activeProject && !projectList.find((p) => p.id === activeProject)) {
+      activeProject = projectList[0]?.id || null;
+    }
+
+    // Determine versions for active project
+    const activeVersions = isMultiProject
+      ? (projectList.find((p) => p.id === activeProject)?.versions || [])
+      : statusData.versions;
+
+    // Determine active version — for multi-project, version key is "project/version"
+    const rawVersion = search.v || activeVersions[0] || 'latest';
+    const version = isMultiProject && activeProject
+      ? `${activeProject}/${rawVersion}`
+      : rawVersion;
+
+    return { projectList, isMultiProject, activeProject, activeVersions, version };
+  }, [statusData, search.project, search.v]);
+
+  // Short version (without project prefix) for display
+  const displayVersion = isMultiProject && activeProject && version.startsWith(`${activeProject}/`)
+    ? version.slice(activeProject.length + 1)
+    : version;
+
+  const { data: files } = useQuery({
+    queryKey: ['files', version, lang],
+    queryFn: () => api.fileCoverage(version, lang as string),
+    enabled: !!lang,
+  });
+
+  // ── Handlers ──
+  const handleSelectProject = useCallback(
+    (p: string) => {
+      setProject(p);
+      setSelected(new Set());
+    },
+    [setProject],
+  );
+
+  const handleSelectVersion = useCallback(
+    (v: string) => {
+      setVersion(v);
+      setSelected(new Set());
+    },
+    [setVersion],
+  );
+
+  const handleSelectLang = useCallback(
+    (l: string) => {
+      setLang(l);
+      setSelected(new Set());
+    },
+    [setLang],
+  );
+
+  const handleToggle = useCallback((f: string) => {
+    setSelected((prev) => {
+      const next = new Set(prev);
+      if (next.has(f)) next.delete(f);
+      else next.add(f);
+      return next;
+    });
+  }, []);
+
+  const handleSelectAll = useCallback(
+    (fileList: string[]) => setSelected(new Set(fileList)),
+    [],
+  );
+
+  const handleClear = useCallback(() => setSelected(new Set()), []);
+
+  const handleTranslateSelected = useCallback(() => {
+    setDialogFiles([...selected]);
+    setShowDialog(true);
+  }, [selected]);
+
+  const handleNewJob = useCallback(() => {
+    setDialogFiles(undefined);
+    setShowDialog(true);
+  }, []);
+
+  if (!statusData) return <div className="loading">Loading...</div>;
+
+  return (
+    <>
+      <nav>
+        <h1>
+          {'🌐 Translation Admin '}
+          {versionInfo?.version && (
+            <span className="version-badge">v{versionInfo.version}</span>
+          )}
+        </h1>
+        <span className="spacer" />
+        <button type="button" className="btn" onClick={handleNewJob}>
+          + New Job
+        </button>
+        <button
+          type="button"
+          className="btn btn-icon"
+          onClick={() => {
+            const next = theme === 'light' ? 'dark' : 'light';
+            setThemeState(next);
+            localStorage.setItem('theme', next);
+          }}
+          title="Toggle theme"
+        >
+          {theme === 'light' ? '🌙' : '☀️'}
+        </button>
+      </nav>
+
+      <div className="container">
+        {/* Project tabs (multi-project only) */}
+        {isMultiProject && (
+          <div className="project-tabs">
+            {projectList.map((p) => (
+              <button
+                key={p.id}
+                type="button"
+                className={`project-tab${p.id === activeProject ? ' active' : ''}`}
+                onClick={() => handleSelectProject(p.id)}
+              >
+                {p.id}
+              </button>
+            ))}
+          </div>
+        )}
+
+        {/* Version tabs */}
+        <div className="tabs">
+          {activeVersions.map((v) => (
+            <button
+              key={v}
+              type="button"
+              className={`tab${v === displayVersion ? ' active' : ''}`}
+              onClick={() => handleSelectVersion(v)}
+            >
+              {v}
+            </button>
+          ))}
+        </div>
+
+        {/* Language cards */}
+        <LangGrid
+          data={statusData}
+          version={version}
+          selectedLang={lang}
+          onSelect={handleSelectLang}
+        />
+
+        {/* Jobs */}
+        <JobPanel />
+
+        {/* File list + Preview */}
+        {lang && files && (
+          <>
+            <div className="file-panel-toolbar">
+              <button
+                type="button"
+                className={`btn btn-sm${showFiles ? ' active' : ''}`}
+                onClick={() => setShowFiles(!showFiles)}
+              >
+                {showFiles ? '◀ Hide files' : '▶ Show files'}
+              </button>
+              {file && <span className="file-panel-current">{file}</span>}
+            </div>
+            <div
+              className={`file-panel${!showFiles ? ' no-list' : ''}${!file ? ' no-preview' : ''}`}
+            >
+              {showFiles && (
+                <FileList
+                  files={files}
+                  lang={lang}
+                  activeFile={file}
+                  selected={selected}
+                  statusFilter={status}
+                  sectionFilter={section}
+                  onStatusFilter={setStatusFilter}
+                  onSectionFilter={setSectionFilter}
+                  onSelect={setFile}
+                  onToggle={handleToggle}
+                  onSelectAll={handleSelectAll}
+                  onClear={handleClear}
+                  onTranslateSelected={handleTranslateSelected}
+                />
+              )}
+              {file && (
+                <Preview
+                  version={version}
+                  lang={lang}
+                  file={file}
+                  viewMode={view}
+                  onViewMode={setView}
+                  showToc={toc}
+                  onToggleToc={() => setToc(!toc)}
+                  showNodes={nodes}
+                  onToggleNodes={() => setNodes(!nodes)}
+                  onClose={() => setFile(null)}
+                />
+              )}
+            </div>
+          </>
+        )}
+      </div>
+
+      {/* Toast */}
+      {toast && <div className="toast">{toast}</div>}
+
+      {/* Job dialog */}
+      {showDialog && (
+        <JobDialog
+          langs={statusData.langs}
+          versions={statusData.versions}
+          defaultLang={lang || undefined}
+          defaultVersion={version}
+          files={dialogFiles}
+          onClose={() => setShowDialog(false)}
+          onSuccess={(msg) => {
+            setShowDialog(false);
+            setToast(msg);
+          }}
+        />
+      )}
+    </>
+  );
+}

package/{src/admin/ui → admin/app}/styles.css

@@ -148,7 +148,37 @@ nav h1 {
   }
 }
 
-/* Tabs */
+/* Project tabs */
+.project-tabs {
+  display: flex;
+  gap: 0.25rem;
+  margin-bottom: 0.75rem;
+  border-bottom: 1px solid var(--border);
+  padding-bottom: 0.75rem;
+}
+.project-tab {
+  padding: 0.4rem 1rem;
+  border-radius: 9999px;
+  border: 1px solid var(--border);
+  background: transparent;
+  color: var(--fg2);
+  cursor: pointer;
+  font-size: 0.8rem;
+  font-weight: 500;
+  text-transform: capitalize;
+  transition: background 0.15s, color 0.15s, border-color 0.15s;
+}
+.project-tab:hover {
+  background: var(--hover);
+  color: var(--fg);
+}
+.project-tab.active {
+  background: var(--accent);
+  color: var(--btn-fg);
+  border-color: var(--accent);
+}
+
+/* Version tabs */
 .tabs {
   display: flex;
   gap: 0.5rem;
@@ -272,6 +302,8 @@ nav h1 {
   background: var(--border);
   border-radius: 2px;
   margin-top: 0.5rem;
+  overflow: hidden;
+  max-width: 100%;
 }
 .progress-fill {
   height: 100%;
@@ -1088,9 +1120,10 @@ a.preview-filename:hover {
   position: relative;
 }
 .log-copy {
-  position: absolute;
+  position: sticky;
   top: 0.25rem;
-  right: 0.25rem;
+  float: right;
+  margin-right: 0.25rem;
   background: var(--card);
   border: 1px solid var(--border);
   border-radius: 0.25rem;

package/admin/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@docs-i18n/admin",
+  "version": "0.6.3",
+  "private": true,
+  "type": "module",
+  "exports": {
+    "./server": "./server/index.ts"
+  },
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build"
+  },
+  "dependencies": {
+    "docs-i18n": "workspace:*",
+    "hono": "^4.12.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "vite": "^8.0.1",
+    "@vitejs/plugin-react": "^6.0.1"
+  },
+  "devDependencies": {
+    "@types/node": "^22.0.0",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "typescript": "^5.8.0"
+  }
+}

package/admin/server/functions/jobs.ts

@@ -0,0 +1,53 @@
+import { createServerFn } from '@tanstack/react-start';
+import { jobManager } from '../services/job-manager';
+import { ensureInit } from '../init';
+
+export const fetchJobs = createServerFn({ method: 'GET' }).handler(async () => {
+  await ensureInit();
+  return jobManager.list().map((j) => ({
+    ...j,
+    logLines: (j.logLines ?? []).slice(-20),
+  }));
+});
+
+export const createJob = createServerFn({ method: 'POST' })
+  .inputValidator(
+    (d: {
+      lang: string;
+      version: string;
+      max?: number;
+      concurrency?: number;
+      model?: string;
+      modelRotate?: string[];
+      md5?: boolean;
+      files?: string[];
+    }) => d,
+  )
+  .handler(async ({ data }) => {
+    await ensureInit();
+    if (!data.lang || !data.version) {
+      throw new Error('Missing lang or version');
+    }
+    return jobManager.start(data);
+  });
+
+export const fetchJob = createServerFn({ method: 'GET' })
+  .inputValidator((d: { id: string }) => d)
+  .handler(async ({ data }) => {
+    const job = jobManager.get(data.id);
+    if (!job) throw new Error('Job not found');
+    return job;
+  });
+
+export const deleteJob = createServerFn({ method: 'POST' })
+  .inputValidator((d: { id: string }) => d)
+  .handler(async ({ data }) => {
+    const job = jobManager.get(data.id);
+    if (!job) throw new Error('Job not found');
+    if (job.status === 'running') {
+      jobManager.cancel(data.id);
+    } else {
+      jobManager.remove(data.id);
+    }
+    return { ok: true };
+  });

package/admin/server/functions/misc.ts

@@ -0,0 +1,84 @@
+import { createServerFn } from '@tanstack/react-start';
+import { readFileSync, existsSync } from 'node:fs';
+import { resolve } from 'node:path';
+import { spawn as nodeSpawn } from 'node:child_process';
+import { getPackageVersion } from 'docs-i18n';
+import { ensureInit, getConfig } from '../init';
+
+export const fetchVersion = createServerFn({ method: 'GET' }).handler(async () => {
+  return { version: getPackageVersion() };
+});
+
+export const fetchLlmConfig = createServerFn({ method: 'GET' }).handler(async () => {
+  await ensureInit();
+  const config = getConfig();
+  const llm = config?.llm;
+
+  // Read .env from project root for env vars not yet in process.env
+  let envVars: Record<string, string> = {};
+  try {
+    const { getProjectRoot } = await import('../init');
+    const projectRoot = getProjectRoot();
+    const envPath = resolve(projectRoot, '.env');
+    if (existsSync(envPath)) {
+      const envContent = readFileSync(envPath, 'utf-8');
+      for (const line of envContent.split('\n')) {
+        const match = line.match(/^\s*([A-Z_][A-Z0-9_]*)\s*=\s*(.*)\s*$/);
+        if (match) envVars[match[1]] = match[2];
+      }
+    }
+  } catch {}
+
+  // Check if API key is available (from config, env, or .env file)
+  const hasApiKey = !!(
+    llm?.apiKey ||
+    process.env.OPENROUTER_API_KEY || process.env.OPENAI_API_KEY ||
+    envVars.OPENROUTER_API_KEY || envVars.OPENAI_API_KEY
+  );
+
+  // Resolve the effective model: config > env > .env > hardcoded default
+  const DEFAULT_MODEL = 'deepseek/deepseek-chat-v3-0324:free';
+  const effectiveModel =
+    llm?.model ||
+    process.env.OPENROUTER_MODEL ||
+    envVars.OPENROUTER_MODEL ||
+    DEFAULT_MODEL;
+
+  const effectiveProvider = llm?.provider || 'openrouter';
+
+  return {
+    model: effectiveModel,
+    provider: effectiveProvider,
+    hasApiKey,
+  };
+});
+
+export const fetchConfig = createServerFn({ method: 'GET' }).handler(async () => {
+  return { projectRoot: process.cwd() };
+});
+
+export const openFile = createServerFn({ method: 'POST' })
+  .inputValidator((d: { file: string }) => d)
+  .handler(async ({ data }) => {
+    const { file } = data;
+    if (!file) throw new Error('Missing file');
+    const fullPath = resolve(process.cwd(), file);
+    if (!fullPath.startsWith(process.cwd())) throw new Error('Invalid path');
+
+    const candidates = process.env.EDITOR_CMD ? [process.env.EDITOR_CMD] : ['code', 'cursor', 'zed'];
+    for (const cmd of candidates) {
+      const found = await new Promise<boolean>((r) => {
+        const p = nodeSpawn('which', [cmd], { stdio: 'ignore' });
+        p.on('exit', (code) => r(code === 0));
+        p.on('error', () => r(false));
+      });
+      if (found) {
+        nodeSpawn(cmd, [fullPath], { stdio: 'ignore', detached: true }).unref();
+        return { opened: fullPath, editor: cmd };
+      }
+    }
+    const platformOpeners: Record<string, string> = { darwin: 'open', win32: 'start' };
+    const fallback = platformOpeners[process.platform] || 'xdg-open';
+    nodeSpawn(fallback, [fullPath], { stdio: 'ignore', detached: true }).unref();
+    return { opened: fullPath, editor: fallback };
+  });

package/{src/admin/server/routes → admin/server/functions}/models.ts

@@ -1,6 +1,4 @@
-import { Hono } from 'hono';
-
-const app = new Hono();
+import { createServerFn } from '@tanstack/react-start';
 
 interface OpenRouterModel {
   id: string;
@@ -27,30 +25,6 @@ let cachedResult: ReturnType<typeof formatModels> | null = null;
 let cacheTime = 0;
 const CACHE_TTL = 5 * 60 * 1000;
 
-/** GET /api/models — List OpenRouter models */
-app.get('/', async (c) => {
-  const now = Date.now();
-  if (cachedResult && now - cacheTime < CACHE_TTL) {
-    return c.json(cachedResult);
-  }
-
-  try {
-    const res = await fetch('https://openrouter.ai/api/v1/models');
-    if (!res.ok) {
-      return c.json({ error: `OpenRouter API error: ${res.status}` }, 502);
-    }
-    const { data } = (await res.json()) as { data: OpenRouterModel[] };
-    cachedResult = formatModels(data);
-    cacheTime = now;
-    return c.json(cachedResult);
-  } catch (err) {
-    return c.json(
-      { error: err instanceof Error ? err.message : 'Failed to fetch models' },
-      500,
-    );
-  }
-});
-
 function formatModels(models: OpenRouterModel[]) {
   return models
     .filter((m) => {
@@ -58,7 +32,6 @@ function formatModels(models: OpenRouterModel[]) {
       const pp = Number.parseFloat(m.pricing.prompt);
       const cp = Number.parseFloat(m.pricing.completion);
       if (pp < 0 || cp < 0) return false;
-      // Only text→text models
       if (!m.architecture?.modality?.startsWith('text')) return false;
       if (!m.architecture.output_modalities?.includes('text')) return false;
       return true;
@@ -84,4 +57,18 @@ function formatModels(models: OpenRouterModel[]) {
     .sort((a, b) => a.promptPrice - b.promptPrice);
 }
 
-export default app;
+export const fetchModels = createServerFn({ method: 'GET' }).handler(async () => {
+  const now = Date.now();
+  if (cachedResult && now - cacheTime < CACHE_TTL) {
+    return cachedResult;
+  }
+
+  const res = await fetch('https://openrouter.ai/api/v1/models');
+  if (!res.ok) {
+    throw new Error(`OpenRouter API error: ${res.status}`);
+  }
+  const { data } = (await res.json()) as { data: OpenRouterModel[] };
+  cachedResult = formatModels(data);
+  cacheTime = now;
+  return cachedResult;
+});