@nightkatana/kronosys-app 1.0.0-beta.14 → 1.0.0-beta.16

package/app/api/restore/route.ts

@@ -0,0 +1,151 @@
+import * as fs from "node:fs";
+import * as path from "node:path";
+import { NextResponse } from "next/server";
+
+import type { KronosysUpdatePayload } from "@/lib/kronosysApi";
+import { ensureDataDirectory } from "@/lib/dataDir";
+import { getSqlite, resetSqliteConnection } from "@/server/db";
+import { writePayload } from "@/server/payloadStore";
+
+export const runtime = "nodejs";
+
+const DB_NAME = "kronosys.sqlite";
+const MAX_UPLOAD_BYTES = 64 * 1024 * 1024;
+
+function nowStamp(): string {
+  return new Date().toISOString().replace(/\.\d{3}Z$/, "Z").replaceAll(":", "-");
+}
+
+function isRecord(v: unknown): v is Record<string, unknown> {
+  return typeof v === "object" && v !== null && !Array.isArray(v);
+}
+
+function validatePayloadShape(v: unknown): v is KronosysUpdatePayload {
+  if (!isRecord(v)) {
+    return false;
+  }
+  return typeof v.viewType === "string" && v.viewType.trim().length > 0;
+}
+
+function cleanSqliteSidecars(dbPath: string): void {
+  for (const ext of [".wal", ".shm"]) {
+    const p = `${dbPath}${ext}`;
+    try {
+      if (fs.existsSync(p)) {
+        fs.unlinkSync(p);
+      }
+    } catch {
+      /* ignore */
+    }
+  }
+}
+
+function restoreFromSqliteBuffer(buf: Buffer): { backupPath: string | null } {
+  const dir = ensureDataDirectory();
+  const dbPath = path.join(dir, DB_NAME);
+  const tmpPath = `${dbPath}.restore-tmp`;
+  const backupPath = `${dbPath}.pre-restore-${nowStamp()}.bak`;
+  let createdBackup: string | null = null;
+
+  resetSqliteConnection();
+  if (fs.existsSync(dbPath)) {
+    fs.copyFileSync(dbPath, backupPath);
+    createdBackup = backupPath;
+  }
+  cleanSqliteSidecars(dbPath);
+  fs.writeFileSync(tmpPath, buf);
+  fs.renameSync(tmpPath, dbPath);
+
+  try {
+    const db = getSqlite();
+    db.pragma("integrity_check");
+    db.exec("SELECT 1;");
+  } catch (error) {
+    resetSqliteConnection();
+    if (createdBackup && fs.existsSync(createdBackup)) {
+      fs.copyFileSync(createdBackup, dbPath);
+    }
+    throw error;
+  }
+
+  return { backupPath: createdBackup };
+}
+
+export async function POST(req: Request) {
+  const ctype = req.headers.get("content-type") ?? "";
+  const isMultipart = ctype.toLowerCase().includes("multipart/form-data");
+  if (!isMultipart) {
+    return NextResponse.json(
+      { ok: false, error: "unsupported_content_type" },
+      { status: 415 },
+    );
+  }
+
+  const form = await req.formData();
+  const file = form.get("file");
+  const formatField = form.get("format");
+  const formatRaw =
+    typeof formatField === "string" ? formatField.trim().toLowerCase() : "";
+  if (!(file instanceof File)) {
+    return NextResponse.json({ ok: false, error: "file_required" }, { status: 400 });
+  }
+  if (file.size <= 0 || file.size > MAX_UPLOAD_BYTES) {
+    return NextResponse.json(
+      { ok: false, error: "invalid_file_size", maxBytes: MAX_UPLOAD_BYTES },
+      { status: 400 },
+    );
+  }
+
+  const lowerName = file.name.toLowerCase();
+  let format: "json" | "sqlite";
+  if (formatRaw === "json" || formatRaw === "sqlite") {
+    format = formatRaw;
+  } else {
+    format = lowerName.endsWith(".json") ? "json" : "sqlite";
+  }
+
+  if (format === "json") {
+    const text = await file.text();
+    let parsed: unknown;
+    try {
+      parsed = JSON.parse(text);
+    } catch {
+      return NextResponse.json({ ok: false, error: "invalid_json" }, { status: 400 });
+    }
+    if (!validatePayloadShape(parsed)) {
+      return NextResponse.json(
+        { ok: false, error: "invalid_kronosys_payload" },
+        { status: 400 },
+      );
+    }
+    writePayload(parsed);
+    return NextResponse.json({ ok: true, restored: "json" });
+  }
+
+  const bytes = await file.arrayBuffer();
+  const buf = Buffer.from(bytes);
+  if (buf.length < 1024) {
+    return NextResponse.json(
+      { ok: false, error: "sqlite_too_small" },
+      { status: 400 },
+    );
+  }
+  const header = buf.subarray(0, 16).toString("utf8");
+  if (!header.startsWith("SQLite format 3")) {
+    return NextResponse.json(
+      { ok: false, error: "invalid_sqlite_file" },
+      { status: 400 },
+    );
+  }
+
+  try {
+    const { backupPath } = restoreFromSqliteBuffer(buf);
+    return NextResponse.json({ ok: true, restored: "sqlite", backupPath });
+  } catch (error) {
+    const detail = error instanceof Error ? error.message : String(error);
+    return NextResponse.json(
+      { ok: false, error: "restore_failed", detail },
+      { status: 500 },
+    );
+  }
+}

package/app/changelog/page.tsx

@@ -3,6 +3,7 @@
 import { Suspense, useMemo } from "react";
 import Link from "next/link";
 import { useSearchParams } from "next/navigation";
+import ReactMarkdown, { type Components } from "react-markdown";
 import { AppVersionStamp } from "@/components/dashboard/AppVersionStamp";
 import { ThemeToggle } from "@/components/dashboard/ThemeToggle";
 import { PageRefreshButton } from "@/components/dashboard/PageRefreshButton";
@@ -18,6 +19,55 @@ import { withDashboardSessionParam } from "@/lib/dashboardSessionNav";
 
 type LiveShape = { language?: string };
 
+type ChangelogItemGroup = {
+  heading: string;
+  items: string[];
+};
+
+const CHANGELOG_MARKDOWN_COMPONENTS: Components = {
+  p: ({ children }) => <span>{children}</span>,
+  a: ({ children, href }) => (
+    <a
+      href={href}
+      className="text-violet-700 underline decoration-violet-400/80 underline-offset-2 hover:text-violet-900 dark:text-violet-300 dark:decoration-violet-500/60 dark:hover:text-violet-200"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      {children}
+    </a>
+  ),
+  code: ({ children }) => (
+    <code className="rounded bg-zinc-200/70 px-1 py-0.5 font-mono text-[0.82em] dark:bg-zinc-700/80">
+      {children}
+    </code>
+  ),
+};
+
+function groupChangelogItems(items: string[]): ChangelogItemGroup[] {
+  const groups: ChangelogItemGroup[] = [];
+  const indexByHeading = new Map<string, number>();
+  const fallbackHeading = "Notes";
+
+  for (const raw of items) {
+    const item = raw.trim();
+    const m = /^([^—:]+)\s*[—:]\s*(.+)$/u.exec(item);
+    const heading = m?.[1]?.trim() || fallbackHeading;
+    const content = m?.[2]?.trim() || item;
+    if (!content) {
+      continue;
+    }
+    const existingIndex = indexByHeading.get(heading);
+    if (existingIndex !== undefined) {
+      groups[existingIndex].items.push(content);
+      continue;
+    }
+    indexByHeading.set(heading, groups.length);
+    groups.push({ heading, items: [content] });
+  }
+
+  return groups;
+}
+
 function ChangelogBody() {
   const searchParams = useSearchParams();
   const dashboardSessionNavId = searchParams.get("session");
@@ -90,11 +140,26 @@ function ChangelogBody() {
                 <h2 className="text-base font-semibold text-zinc-900 dark:text-zinc-100">
                   v{entry.version}
                 </h2>
-                <ul className="mt-3 list-inside list-disc space-y-1.5 text-sm leading-relaxed text-zinc-700 dark:text-zinc-300">
-                  {entry.items.map((item) => (
-                    <li key={item}>{item}</li>
+                <div className="mt-3 space-y-3">
+                  {groupChangelogItems(entry.items).map((group) => (
+                    <div key={group.heading} className="space-y-1.5">
+                      <h3 className="text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400">
+                        {group.heading}
+                      </h3>
+                      <ul className="list-inside list-disc space-y-1.5 text-sm leading-relaxed text-zinc-700 dark:text-zinc-300">
+                        {group.items.map((item) => (
+                          <li key={`${group.heading}:${item}`}>
+                            <ReactMarkdown
+                              components={CHANGELOG_MARKDOWN_COMPONENTS}
+                            >
+                              {item}
+                            </ReactMarkdown>
+                          </li>
+                        ))}
+                      </ul>
+                    </div>
                   ))}
-                </ul>
+                </div>
               </section>
             ))
           )}

package/app/implementation/page.tsx

@@ -3,7 +3,7 @@
 import { Suspense, useCallback, useEffect, useMemo, useState } from "react";
 import Link from "next/link";
 import { useSearchParams } from "next/navigation";
-import { Check, FileCode2, X } from "lucide-react";
+import { Check, FileCode2, ScrollText, X } from "lucide-react";
 import { AppVersionStamp } from "@/components/dashboard/AppVersionStamp";
 import { ThemeToggle } from "@/components/dashboard/ThemeToggle";
 import { PageRefreshButton } from "@/components/dashboard/PageRefreshButton";
@@ -153,6 +153,17 @@ function ImplementationBody() {
         <div className="flex w-full justify-end">
           <div className={appShellHeaderToolbarClassName}>
             <AppShellCommandCenterPlaceholder />
+            <Link
+              href={withDashboardSessionParam(
+                "/changelog",
+                dashboardSessionNavId,
+              )}
+              className="inline-flex size-10 shrink-0 items-center justify-center rounded-lg border border-zinc-300 bg-white text-zinc-700 shadow-sm transition hover:border-zinc-400 hover:bg-zinc-50 hover:text-violet-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-violet-500 dark:border-zinc-600 dark:bg-zinc-800/90 dark:text-zinc-200 dark:hover:border-zinc-500 dark:hover:bg-zinc-800 dark:hover:text-violet-300"
+              aria-label={notes.openChangelogAria}
+              title={notes.openChangelogTooltip}
+            >
+              <ScrollText size={18} />
+            </Link>
             <AppShellRouteNav
               current="implementation"
               labels={nav}

package/app/page.tsx

@@ -232,6 +232,7 @@ function DashboardHome() {
   >("keep");
   const [tourOpen, setTourOpen] = useState(false);
   const [newSessionModalOpen, setNewSessionModalOpen] = useState(false);
+  const pendingNewSessionFocusRef = useRef(false);
   const [gitBannerDismissed, setGitBannerDismissed] = useState(false);
   const [gitIdentitySetupModalOpen, setGitIdentitySetupModalOpen] =
     useState(false);
@@ -894,6 +895,32 @@ function DashboardHome() {
     });
   }, []);
 
+  const focusTaskLauncherInput = useCallback(() => {
+    document.getElementById("dashboard-col-tasks")?.scrollIntoView({
+      behavior: "smooth",
+      block: "start",
+    });
+    const tryFocus = () => {
+      const input = document.getElementById(
+        "kronosys-task-launcher-input",
+      ) as HTMLInputElement | null;
+      if (!input) {
+        return false;
+      }
+      input.focus();
+      input.select();
+      return true;
+    };
+    globalThis.requestAnimationFrame(() => {
+      if (tryFocus()) {
+        return;
+      }
+      globalThis.setTimeout(() => {
+        void tryFocus();
+      }, 140);
+    });
+  }, []);
+
   const scrollToTaskInPanel = useCallback((taskId: string) => {
     const el =
       document.getElementById(`kronosys-active-task-${taskId}`) ??
@@ -1209,6 +1236,45 @@ function DashboardHome() {
     await refresh();
   }, [pathname, refresh, router, searchParams, sessionQueryMode]);
 
+  useEffect(() => {
+    if (!pendingNewSessionFocusRef.current) {
+      return;
+    }
+    const liveSid =
+      typeof live?.sessionId === "string" ? live.sessionId.trim() : "";
+    if (!liveSid) {
+      return;
+    }
+    pendingNewSessionFocusRef.current = false;
+    focusTaskLauncherInput();
+  }, [focusTaskLauncherInput, live?.sessionId]);
+
+  const createNewSessionAndFocus = useCallback(
+    async (sessionScope: unknown) => {
+      setNewSessionModalOpen(false);
+      pendingNewSessionFocusRef.current = true;
+      await post({ type: "newSession", sessionScope });
+      if (sessionQueryMode) {
+        router.replace(
+          pathnameWithUpdatedSessionQuery(
+            pathname,
+            searchParams.toString(),
+            null,
+          ),
+        );
+      }
+      focusTaskLauncherInput();
+    },
+    [
+      focusTaskLauncherInput,
+      pathname,
+      post,
+      router,
+      searchParams,
+      sessionQueryMode,
+    ],
+  );
+
   const openSessionInNewTab = useCallback(
     (sessionId: string) => {
       const url = `${
@@ -1576,7 +1642,7 @@ function DashboardHome() {
             <div className="grid w-full grid-cols-1 gap-8 xl:grid-cols-[minmax(0,1fr)_minmax(0,2.25fr)_minmax(0,1fr)] xl:items-start xl:gap-x-6 2xl:gap-x-10">
               <div
                 id="dashboard-col-sessions"
-                className="flex min-w-0 flex-col xl:sticky xl:top-44 xl:max-h-[calc(100vh-12rem)] xl:min-h-0 xl:overflow-hidden xl:pb-6 xl:pr-3 2xl:pr-4"
+                className="flex min-w-0 flex-col xl:min-h-0 xl:overflow-visible xl:pb-6 xl:pr-3 2xl:pr-4"
               >
                 <div className="w-full min-w-0 xl:flex xl:min-h-0 xl:flex-1 xl:flex-col">
                   <div className="mx-auto flex w-full max-w-md flex-col gap-8 sm:max-w-lg xl:mx-0 xl:max-w-none xl:min-h-0 xl:flex-1 xl:flex-col">
@@ -1611,53 +1677,59 @@ function DashboardHome() {
                       ? renderSelectedSessionSidebarCard()
                       : null}
 
-                    <SessionListPanel
-                      sessions={sessionListPanelSessions}
-                      lang={lang}
-                      displayTimeZone={dashboardDisplayTimeZone}
-                      use24HourClock={dashboardUse24HourClock}
-                      liveSessionId={live?.sessionId}
-                      selectedSessionId={selectedSessionId}
-                      t={dt}
-                      onSelectSession={(id) => void handleSelectSession(id)}
-                      onOpenSessionInNewTab={openSessionInNewTab}
-                      onEndLiveSession={() =>
-                        void handleRequestEndLiveSession()
-                      }
-                      onArchiveSession={confirmArchiveSession}
-                      onDeleteSession={(id) => setDeleteSessionId(id)}
-                      onOpenArchives={() =>
-                        void router.push(
-                          withDashboardSessionParam(
-                            "/settings#settings-archived-sessions",
-                            selectedSessionId,
-                          ),
-                        )
-                      }
-                      archivedCount={historyArchived.length}
-                      mongoPushEnabled={mongoPushEnabled}
-                      onPushSessionToMongo={(id) =>
-                        void handlePushSessionToMongo(id)
-                      }
-                      pushingSessionId={mongoPushBusyId}
-                      sessionDurationAlertThresholdMinutes={
-                        sessionDurationAlertThresholdMinutes
-                      }
-                      onOpenSessionGantt={openGanttForSessionId}
-                      sessionRowExitAnimateId={sessionRowExitAnimateId}
-                      onSessionRowExitAnimationDone={clearSessionRowExitStates}
-                      liveChromeExitSessionId={endLiveListExitAnimateId}
-                      sortPinSessionId={endLiveListExitAnimateId}
-                      sessionDetailInline={
-                        archiveSessionInMainHistoryList &&
-                        typeof columnArchiveId === "string"
-                          ? {
-                              sessionId: columnArchiveId,
-                              content: renderSelectedSessionSidebarCard(),
-                            }
-                          : null
-                      }
-                    />
+                    <div className="min-h-[14rem] xl:h-full xl:min-h-0 xl:flex-1">
+                      <SessionListPanel
+                        sessions={sessionListPanelSessions}
+                        lang={lang}
+                        displayTimeZone={dashboardDisplayTimeZone}
+                        use24HourClock={dashboardUse24HourClock}
+                        liveSessionId={live?.sessionId}
+                        selectedSessionId={selectedSessionId}
+                        t={dt}
+                        onSelectSession={(id) => void handleSelectSession(id)}
+                        onOpenSessionInNewTab={openSessionInNewTab}
+                        onEndLiveSession={() =>
+                          void handleRequestEndLiveSession()
+                        }
+                        onArchiveSession={confirmArchiveSession}
+                        onDeleteSession={(id) => setDeleteSessionId(id)}
+                        onOpenArchives={() =>
+                          void router.push(
+                            withDashboardSessionParam(
+                              "/settings#settings-archived-sessions",
+                              selectedSessionId,
+                            ),
+                          )
+                        }
+                        archivedCount={historyArchived.length}
+                        mongoPushEnabled={mongoPushEnabled}
+                        onPushSessionToMongo={(id) =>
+                          void handlePushSessionToMongo(id)
+                        }
+                        pushingSessionId={mongoPushBusyId}
+                        sessionDurationAlertThresholdMinutes={
+                          sessionDurationAlertThresholdMinutes
+                        }
+                        onOpenSessionGantt={openGanttForSessionId}
+                        sessionRowExitAnimateId={sessionRowExitAnimateId}
+                        onSessionRowExitAnimationDone={
+                          clearSessionRowExitStates
+                        }
+                        liveChromeExitSessionId={endLiveListExitAnimateId}
+                        sortPinSessionId={endLiveListExitAnimateId}
+                        sessionDetailInline={
+                          archiveSessionInMainHistoryList &&
+                          typeof columnArchiveId === "string" &&
+                          columnArchiveId.length > 0
+                            ? {
+                                sessionId: columnArchiveId,
+                                content: renderSelectedSessionSidebarCard(),
+                              }
+                            : null
+                        }
+                        forcePageScroll
+                      />
+                    </div>
                   </div>
                 </div>
               </div>
@@ -1742,8 +1814,7 @@ function DashboardHome() {
           t={dt}
           onCancel={() => setNewSessionModalOpen(false)}
           onConfirm={(sessionScope) => {
-            setNewSessionModalOpen(false);
-            void post({ type: "newSession", sessionScope });
+            void createNewSessionAndFocus(sessionScope);
           }}
         />
         <GlobalPauseConfirmModal

package/app/settings/page.tsx

@@ -45,7 +45,6 @@ import { showWorkspaceFoldersEmptyMessage } from "@/lib/usageProfile";
 import { readDashboardUse24HourClockFromCfg } from "@/lib/dashboardClockFormat";
 import {
   DASHBOARD_TIME_ZONE_SELECT_OPTIONS,
-  isValidIanaTimeZone,
   readDashboardTimeZoneFromCfg,
 } from "@/lib/dashboardTimeZone";
 import { SESSION_NAME_TEMPLATE_CFG_MAX_LEN } from "@/lib/formatSessionNameTemplate";
@@ -648,7 +647,7 @@ function SettingsToc({
   return (
     <nav
       aria-label={s.tocNavAriaLabel}
-      className="rounded-xl border border-zinc-200 bg-zinc-50/90 p-4 lg:max-h-[calc(100vh-12rem)] lg:overflow-y-auto lg:overscroll-contain dark:border-zinc-800 dark:bg-zinc-900/40"
+      className="rounded-xl border border-zinc-200 bg-zinc-50/90 p-4 lg:max-h-[calc(100dvh-14rem)] lg:overflow-y-scroll lg:overscroll-contain dark:border-zinc-800 dark:bg-zinc-900/40"
     >
       <p className="mb-3 text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-500">
         {s.tocHeading}
@@ -952,6 +951,10 @@ function SettingsPageContent() {
   >(null);
   const [clearHistoryConfirmOpen, setClearHistoryConfirmOpen] = useState(false);
   const [clearHistoryBusy, setClearHistoryBusy] = useState(false);
+  const [restoreConfirmOpen, setRestoreConfirmOpen] = useState(false);
+  const [restoreBusy, setRestoreBusy] = useState(false);
+  const [restoreFile, setRestoreFile] = useState<File | null>(null);
+  const restoreFileInputRef = useRef<HTMLInputElement | null>(null);
   const [settingsTocFilter, setSettingsTocFilter] = useState("");
   const [settingsTourOpen, setSettingsTourOpen] = useState(false);
 
@@ -1557,6 +1560,56 @@ function SettingsPageContent() {
     }
   }, [refresh, router]);
 
+  const restoreBackup = useCallback(async () => {
+    if (!restoreFile) {
+      setSettingsDialogAlert(s.dangerRestoreNoFile);
+      return;
+    }
+    setRestoreBusy(true);
+    try {
+      const fd = new FormData();
+      fd.set("file", restoreFile);
+      const format = restoreFile.name.toLowerCase().endsWith(".json")
+        ? "json"
+        : "sqlite";
+      fd.set("format", format);
+      const res = await fetch("/api/restore", {
+        method: "POST",
+        body: fd,
+      });
+      const text = await res.text();
+      let data: Record<string, unknown> = {};
+      try {
+        data = text ? (JSON.parse(text) as Record<string, unknown>) : {};
+      } catch {
+        data = {};
+      }
+      if (!res.ok || data.ok !== true) {
+        const detail =
+          typeof data.detail === "string"
+            ? data.detail
+            : typeof data.error === "string"
+            ? data.error
+            : text || `HTTP ${res.status}`;
+        setSettingsDialogAlert(
+          `${s.dangerRestoreFailed.replace("{detail}", detail)}`,
+        );
+        return;
+      }
+      setRestoreConfirmOpen(false);
+      setRestoreFile(null);
+      if (restoreFileInputRef.current) {
+        restoreFileInputRef.current.value = "";
+      }
+      await refresh({ preserveForm: false, routerInvalidate: true });
+      setSettingsDialogAlert(
+        format === "json" ? s.dangerRestoreDoneJson : s.dangerRestoreDoneSqlite,
+      );
+    } finally {
+      setRestoreBusy(false);
+    }
+  }, [refresh, restoreFile, s]);
+
   const applyResetToDefaults = useCallback(async () => {
     setResetDefaultsBusy(true);
     setSettingsAck(null);
@@ -3491,6 +3544,64 @@ function SettingsPageContent() {
                   {s.sectionDangerZone}
                 </h2>
                 <div className="max-w-xl rounded-xl border border-red-300/90 bg-red-50/80 p-4 dark:border-red-900/55 dark:bg-red-950/30">
+                  <h3 className="text-sm font-semibold text-red-900 dark:text-red-200">
+                    {s.dangerBackupRestoreTitle}
+                  </h3>
+                  <p className="mt-2 text-xs leading-relaxed text-red-900/85 dark:text-red-200/85">
+                    {s.dangerBackupRestoreIntro}
+                  </p>
+                  <div className="mt-3 flex flex-wrap gap-2">
+                    <a
+                      href="/api/backup?format=json"
+                      download
+                      className="rounded-lg border border-red-500/70 px-3 py-1.5 text-xs font-medium text-red-900 hover:bg-red-100 dark:text-red-200 dark:hover:bg-red-900/40"
+                    >
+                      {s.dangerClearHistoryBackupJson}
+                    </a>
+                    <a
+                      href="/api/backup?format=csv-zip"
+                      download
+                      className="rounded-lg border border-red-500/70 px-3 py-1.5 text-xs font-medium text-red-900 hover:bg-red-100 dark:text-red-200 dark:hover:bg-red-900/40"
+                    >
+                      {s.dangerClearHistoryBackupCsvZip}
+                    </a>
+                    <a
+                      href="/api/backup?format=sqlite"
+                      download
+                      className="rounded-lg border border-red-500/70 px-3 py-1.5 text-xs font-medium text-red-900 hover:bg-red-100 dark:text-red-200 dark:hover:bg-red-900/40"
+                    >
+                      {s.dangerClearHistoryBackupSqlite}
+                    </a>
+                  </div>
+                  <div className="mt-4 space-y-2">
+                    <label className="block text-xs font-medium text-red-900/90 dark:text-red-200/90">
+                      {s.dangerRestorePickFile}
+                    </label>
+                    <input
+                      ref={restoreFileInputRef}
+                      type="file"
+                      accept=".json,.sqlite,.db,application/json,application/vnd.sqlite3"
+                      disabled={restoreBusy || clearHistoryBusy}
+                      className="block w-full rounded-lg border border-red-300 bg-white px-3 py-2 text-xs text-zinc-800 file:mr-3 file:rounded file:border-0 file:bg-red-100 file:px-2.5 file:py-1 file:text-xs file:font-medium file:text-red-900 dark:border-red-900/60 dark:bg-zinc-950 dark:text-zinc-200 dark:file:bg-red-900/35 dark:file:text-red-200"
+                      onChange={(e) => {
+                        const f = e.target.files?.[0] ?? null;
+                        setRestoreFile(f);
+                      }}
+                    />
+                    <p className="text-[11px] leading-relaxed text-red-900/80 dark:text-red-300/80">
+                      {s.dangerRestoreHint}
+                    </p>
+                    <button
+                      type="button"
+                      disabled={!restoreFile || restoreBusy || clearHistoryBusy}
+                      className="rounded-lg border border-red-600/80 bg-red-700 px-3 py-1.5 text-xs font-medium text-white hover:bg-red-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-red-500 dark:bg-red-800/90 dark:hover:bg-red-700"
+                      onClick={() => setRestoreConfirmOpen(true)}
+                    >
+                      {restoreBusy
+                        ? s.dangerRestoreBusy
+                        : s.dangerRestoreButton}
+                    </button>
+                  </div>
                   <h3 className="text-sm font-semibold text-red-900 dark:text-red-200">
                     {s.dangerClearHistoryTitle}
                   </h3>
@@ -3535,6 +3646,23 @@ function SettingsPageContent() {
         onCancel={() => setMongoResyncConfirmOpen(false)}
         onConfirm={() => void executeMongoResync()}
       />
+      <DashboardConfirmModal
+        open={restoreConfirmOpen}
+        title={s.dangerRestoreButton}
+        message={s.dangerRestoreConfirm}
+        cancelLabel={s.dialogCancelBtn}
+        confirmLabel={s.dialogConfirmBtn}
+        confirmVariant="danger"
+        pending={restoreBusy}
+        onCancel={() => {
+          if (!restoreBusy) {
+            setRestoreConfirmOpen(false);
+          }
+        }}
+        onConfirm={() => {
+          void restoreBackup();
+        }}
+      />
       <DashboardConfirmModal
         open={clearHistoryConfirmOpen}
         title={s.dangerClearHistoryTitle}

package/bin/kronosys.mjs

@@ -5,6 +5,7 @@
  * Supported commands:
  *   start   -> next start -p 5555 (production, default; auto-build if needed)
  *   dev     -> next dev --webpack -H kronosys -p 5555
+ *   --version, -v, version -> print installed Kronosys version
  */
 
 import { spawn } from "node:child_process";
@@ -29,6 +30,11 @@ const psBin = process.platform === "win32" ? "powershell.exe" : null;
 
 const [, , command = "start", ...rest] = process.argv;
 
+if (command === "--version" || command === "-v" || command === "version") {
+  console.log(packageVersion);
+  process.exit(0);
+}
+
 const commands = {
   start: [npxBin, "next", "start", "-p", "5555", ...rest],
   dev: [