hotsheet 0.2.13 → 0.3.0

package/dist/cli.js

@@ -420,16 +420,85 @@ function initBackupScheduler(dataDir2) {
 // src/cleanup.ts
 import { rmSync as rmSync3 } from "fs";
 
+// src/types.ts
+var DEFAULT_CATEGORIES = [
+  { id: "issue", label: "Issue", shortLabel: "ISS", color: "#6b7280", shortcutKey: "i", description: "General issues that need attention" },
+  { id: "bug", label: "Bug", shortLabel: "BUG", color: "#ef4444", shortcutKey: "b", description: "Bugs that should be fixed in the codebase" },
+  { id: "feature", label: "Feature", shortLabel: "FEA", color: "#22c55e", shortcutKey: "f", description: "New features to be implemented" },
+  { id: "requirement_change", label: "Req Change", shortLabel: "REQ", color: "#f97316", shortcutKey: "r", description: "Changes to existing requirements" },
+  { id: "task", label: "Task", shortLabel: "TSK", color: "#3b82f6", shortcutKey: "k", description: "General tasks to complete" },
+  { id: "investigation", label: "Investigation", shortLabel: "INV", color: "#8b5cf6", shortcutKey: "g", description: "Items requiring research or analysis" }
+];
+var CATEGORY_PRESETS = [
+  {
+    id: "software",
+    name: "Software Development",
+    categories: DEFAULT_CATEGORIES
+  },
+  {
+    id: "design",
+    name: "Design / Creative",
+    categories: [
+      { id: "concept", label: "Concept", shortLabel: "CON", color: "#8b5cf6", shortcutKey: "c", description: "Design concepts and explorations" },
+      { id: "revision", label: "Revision", shortLabel: "REV", color: "#f97316", shortcutKey: "r", description: "Revisions to existing designs" },
+      { id: "feedback", label: "Feedback", shortLabel: "FDB", color: "#3b82f6", shortcutKey: "f", description: "Client or stakeholder feedback to address" },
+      { id: "asset", label: "Asset", shortLabel: "AST", color: "#22c55e", shortcutKey: "a", description: "Assets to produce or deliver" },
+      { id: "research", label: "Research", shortLabel: "RSC", color: "#6b7280", shortcutKey: "s", description: "User research or competitive analysis" },
+      { id: "bug", label: "Bug", shortLabel: "BUG", color: "#ef4444", shortcutKey: "b", description: "Visual or UI bugs" }
+    ]
+  },
+  {
+    id: "product",
+    name: "Product Management",
+    categories: [
+      { id: "epic", label: "Epic", shortLabel: "EPC", color: "#8b5cf6", shortcutKey: "e", description: "Large initiatives spanning multiple stories" },
+      { id: "story", label: "Story", shortLabel: "STY", color: "#3b82f6", shortcutKey: "s", description: "User stories describing desired functionality" },
+      { id: "bug", label: "Bug", shortLabel: "BUG", color: "#ef4444", shortcutKey: "b", description: "Bugs that need to be fixed" },
+      { id: "task", label: "Task", shortLabel: "TSK", color: "#22c55e", shortcutKey: "t", description: "Tasks to complete" },
+      { id: "spike", label: "Spike", shortLabel: "SPK", color: "#f97316", shortcutKey: "k", description: "Research or investigation spikes" },
+      { id: "debt", label: "Tech Debt", shortLabel: "DBT", color: "#6b7280", shortcutKey: "d", description: "Technical debt to address" }
+    ]
+  },
+  {
+    id: "marketing",
+    name: "Marketing",
+    categories: [
+      { id: "campaign", label: "Campaign", shortLabel: "CMP", color: "#8b5cf6", shortcutKey: "c", description: "Marketing campaigns" },
+      { id: "content", label: "Content", shortLabel: "CNT", color: "#3b82f6", shortcutKey: "n", description: "Content to create or publish" },
+      { id: "design", label: "Design", shortLabel: "DES", color: "#22c55e", shortcutKey: "d", description: "Design requests and assets" },
+      { id: "analytics", label: "Analytics", shortLabel: "ANL", color: "#f97316", shortcutKey: "a", description: "Analytics and reporting tasks" },
+      { id: "outreach", label: "Outreach", shortLabel: "OUT", color: "#6b7280", shortcutKey: "o", description: "Outreach and partnership activities" },
+      { id: "event", label: "Event", shortLabel: "EVT", color: "#ef4444", shortcutKey: "e", description: "Events to plan or manage" }
+    ]
+  },
+  {
+    id: "personal",
+    name: "Personal",
+    categories: [
+      { id: "task", label: "Task", shortLabel: "TSK", color: "#3b82f6", shortcutKey: "t", description: "Things to do" },
+      { id: "idea", label: "Idea", shortLabel: "IDA", color: "#22c55e", shortcutKey: "i", description: "Ideas to explore" },
+      { id: "note", label: "Note", shortLabel: "NTE", color: "#6b7280", shortcutKey: "n", description: "Notes and references" },
+      { id: "errand", label: "Errand", shortLabel: "ERR", color: "#f97316", shortcutKey: "e", description: "Errands and appointments" },
+      { id: "project", label: "Project", shortLabel: "PRJ", color: "#8b5cf6", shortcutKey: "p", description: "Larger projects" },
+      { id: "urgent", label: "Urgent", shortLabel: "URG", color: "#ef4444", shortcutKey: "u", description: "Urgent items" }
+    ]
+  }
+];
+var CATEGORIES = DEFAULT_CATEGORIES.map((c) => ({ value: c.id, label: c.label, color: c.color }));
+var CATEGORY_DESCRIPTIONS = Object.fromEntries(
+  DEFAULT_CATEGORIES.map((c) => [c.id, c.description])
+);
+
 // src/db/queries.ts
 init_connection();
-function parseNotes(raw2) {
-  if (!raw2 || raw2 === "") return [];
+function parseNotes(raw) {
+  if (!raw || raw === "") return [];
   try {
-    const parsed = JSON.parse(raw2);
+    const parsed = JSON.parse(raw);
     if (Array.isArray(parsed)) return parsed;
   } catch {
   }
-  return [{ text: raw2, created_at: (/* @__PURE__ */ new Date()).toISOString() }];
+  return [{ text: raw, created_at: (/* @__PURE__ */ new Date()).toISOString() }];
 }
 async function nextTicketNumber() {
   const db2 = await getDb();
@@ -681,6 +750,20 @@ async function getTicketsForCleanup(verifiedDays = 30, trashDays = 3) {
   `, [verifiedDays, trashDays]);
   return result.rows;
 }
+async function getCategories() {
+  const settings = await getSettings();
+  if (settings.categories) {
+    try {
+      const parsed = JSON.parse(settings.categories);
+      if (Array.isArray(parsed) && parsed.length > 0) return parsed;
+    } catch {
+    }
+  }
+  return DEFAULT_CATEGORIES;
+}
+async function saveCategories(categories) {
+  await updateSetting("categories", JSON.stringify(categories));
+}
 async function getSettings() {
   const db2 = await getDb();
   const result = await db2.query("SELECT key, value FROM settings");
@@ -1611,33 +1694,25 @@ import { basename, extname, join as join8, relative as relative2 } from "path";
 // src/skills.ts
 import { existsSync as existsSync5, mkdirSync as mkdirSync3, readFileSync as readFileSync5, writeFileSync as writeFileSync4 } from "fs";
 import { join as join6, relative } from "path";
-
-// src/types.ts
-var CATEGORY_DESCRIPTIONS = {
-  issue: "General issues that need attention",
-  bug: "Bugs that should be fixed in the codebase",
-  feature: "New features to be implemented",
-  requirement_change: "Changes to existing requirements",
-  task: "General tasks to complete",
-  investigation: "Items requiring research or analysis"
-};
-
-// src/skills.ts
-var SKILL_VERSION = 2;
+var SKILL_VERSION = 3;
 var skillPort;
 var skillDataDir;
+var skillCategories = DEFAULT_CATEGORIES;
 function initSkills(port2, dataDir2) {
   skillPort = port2;
   skillDataDir = dataDir2;
 }
-var TICKET_SKILLS = [
-  { name: "hs-bug", category: "bug", label: "bug" },
-  { name: "hs-feature", category: "feature", label: "feature" },
-  { name: "hs-task", category: "task", label: "task" },
-  { name: "hs-issue", category: "issue", label: "issue" },
-  { name: "hs-investigation", category: "investigation", label: "investigation" },
-  { name: "hs-req-change", category: "requirement_change", label: "requirement change" }
-];
+function setSkillCategories(categories) {
+  skillCategories = categories;
+}
+function buildTicketSkills() {
+  return skillCategories.map((cat) => ({
+    name: `hs-${cat.id.replace(/_/g, "-")}`,
+    category: cat.id,
+    label: cat.label.toLowerCase(),
+    description: cat.description
+  }));
+}
 function versionHeader() {
   return `<!-- hotsheet-skill-version: ${SKILL_VERSION} -->`;
 }
@@ -1658,9 +1733,8 @@ function updateFile(path, content) {
   return true;
 }
 function ticketSkillBody(skill) {
-  const desc = CATEGORY_DESCRIPTIONS[skill.category];
   return [
-    `Create a new Hot Sheet **${skill.label}** ticket. ${desc}.`,
+    `Create a new Hot Sheet **${skill.label}** ticket. ${skill.description}.`,
     "",
     "**Parsing the input:**",
     '- If the input starts with "next", "up next", or "do next" (case-insensitive), set `up_next` to `true` and use the remaining text as the title',
@@ -1731,7 +1805,7 @@ function ensureClaudeSkills(cwd) {
     ""
   ].join("\n");
   if (updateFile(join6(mainDir, "SKILL.md"), mainContent)) updated = true;
-  for (const skill of TICKET_SKILLS) {
+  for (const skill of buildTicketSkills()) {
     const dir = join6(skillsDir, skill.name);
     mkdirSync3(dir, { recursive: true });
     const content = [
@@ -1764,7 +1838,7 @@ function ensureCursorRules(cwd) {
     ""
   ].join("\n");
   if (updateFile(join6(rulesDir, "hotsheet.mdc"), mainContent)) updated = true;
-  for (const skill of TICKET_SKILLS) {
+  for (const skill of buildTicketSkills()) {
     const content = [
       "---",
       `description: Create a new ${skill.label} ticket in Hot Sheet`,
@@ -1793,7 +1867,7 @@ function ensureCopilotPrompts(cwd) {
     ""
   ].join("\n");
   if (updateFile(join6(promptsDir, "hotsheet.prompt.md"), mainContent)) updated = true;
-  for (const skill of TICKET_SKILLS) {
+  for (const skill of buildTicketSkills()) {
     const content = [
       "---",
       `description: Create a new ${skill.label} ticket in Hot Sheet`,
@@ -1822,7 +1896,7 @@ function ensureWindsurfRules(cwd) {
     ""
   ].join("\n");
   if (updateFile(join6(rulesDir, "hotsheet.md"), mainContent)) updated = true;
-  for (const skill of TICKET_SKILLS) {
+  for (const skill of buildTicketSkills()) {
     const content = [
       "---",
       "trigger: manual",
@@ -1893,14 +1967,14 @@ function scheduleAllSync() {
   scheduleWorklistSync();
   scheduleOpenTicketsSync();
 }
-function parseTicketNotes(raw2) {
-  if (!raw2 || raw2 === "") return [];
+function parseTicketNotes(raw) {
+  if (!raw || raw === "") return [];
   try {
-    const parsed = JSON.parse(raw2);
+    const parsed = JSON.parse(raw);
     if (Array.isArray(parsed)) return parsed;
   } catch {
   }
-  if (raw2.trim()) return [{ text: raw2, created_at: "" }];
+  if (raw.trim()) return [{ text: raw, created_at: "" }];
   return [];
 }
 async function formatTicket(ticket) {
@@ -1935,10 +2009,12 @@ async function formatTicket(ticket) {
   }
   return lines.join("\n");
 }
-function formatCategoryDescriptions(categories) {
+async function formatCategoryDescriptions(usedCategories) {
+  const allCategories = await getCategories();
+  const descMap = Object.fromEntries(allCategories.map((c) => [c.id, c.description]));
   const lines = ["Ticket Types:"];
-  for (const cat of categories) {
-    lines.push(`- ${cat} - ${CATEGORY_DESCRIPTIONS[cat]}`);
+  for (const cat of usedCategories) {
+    lines.push(`- ${cat} - ${descMap[cat] || cat}`);
   }
   return lines.join("\n");
 }
@@ -1976,7 +2052,9 @@ async function syncWorklist() {
     sections.push("- Create follow-up tasks for items outside the current scope");
     sections.push("");
     sections.push("To create a ticket:");
-    sections.push(`  \`curl -s -X POST http://localhost:${port}/api/tickets -H "Content-Type: application/json" -d '{"title": "Title", "defaults": {"category": "bug|feature|task|issue|investigation|requirement_change", "up_next": false}}'\``);
+    const allCats = await getCategories();
+    const catIds = allCats.map((c) => c.id).join("|");
+    sections.push(`  \`curl -s -X POST http://localhost:${port}/api/tickets -H "Content-Type: application/json" -d '{"title": "Title", "defaults": {"category": "${catIds}", "up_next": false}}'\``);
     sections.push("");
     sections.push('You can also include `"details"` in the defaults object for longer descriptions.');
     sections.push("Set `up_next: true` only for items that should be prioritized immediately.");
@@ -1994,7 +2072,7 @@ async function syncWorklist() {
       }
       sections.push("---");
       sections.push("");
-      sections.push(formatCategoryDescriptions(categories));
+      sections.push(await formatCategoryDescriptions(categories));
     }
     sections.push("");
     writeFileSync5(join7(dataDir, "worklist.md"), sections.join("\n"), "utf-8");
@@ -2038,7 +2116,7 @@ async function syncOpenTickets() {
     } else {
       sections.push("---");
       sections.push("");
-      sections.push(formatCategoryDescriptions(categories));
+      sections.push(await formatCategoryDescriptions(categories));
     }
     sections.push("");
     writeFileSync5(join7(dataDir, "open-tickets.md"), sections.join("\n"), "utf-8");
@@ -2282,6 +2360,20 @@ apiRoutes.get("/attachments/file/*", async (c) => {
     headers: { "Content-Type": contentType }
   });
 });
+apiRoutes.get("/categories", async (c) => {
+  const categories = await getCategories();
+  return c.json(categories);
+});
+apiRoutes.put("/categories", async (c) => {
+  const categories = await c.req.json();
+  await saveCategories(categories);
+  scheduleAllSync();
+  notifyChange();
+  return c.json(categories);
+});
+apiRoutes.get("/category-presets", (c) => {
+  return c.json(CATEGORY_PRESETS);
+});
 apiRoutes.get("/stats", async (c) => {
   const stats = await getTicketStats();
   return c.json(stats);
@@ -2424,24 +2516,7 @@ var SafeHtml = class {
     return this.__html;
   }
 };
-function raw(html) {
-  return new SafeHtml(html);
-}
-var VOID_TAGS = /* @__PURE__ */ new Set([
-  "area",
-  "base",
-  "br",
-  "col",
-  "embed",
-  "hr",
-  "img",
-  "input",
-  "link",
-  "meta",
-  "source",
-  "track",
-  "wbr"
-]);
+var VOID_TAGS = /* @__PURE__ */ new Set(["area", "base", "br", "col", "embed", "hr", "img", "input", "link", "meta", "source", "track", "wbr"]);
 function renderChildren(children) {
   if (children == null || typeof children === "boolean") return "";
   if (children instanceof SafeHtml) return children.__html;
@@ -2450,10 +2525,134 @@ function renderChildren(children) {
   if (Array.isArray(children)) return children.map(renderChildren).join("");
   return "";
 }
+var ATTR_ALIASES = {
+  // HTML attributes
+  className: "class",
+  htmlFor: "for",
+  httpEquiv: "http-equiv",
+  acceptCharset: "accept-charset",
+  accessKey: "accesskey",
+  autoCapitalize: "autocapitalize",
+  autoComplete: "autocomplete",
+  autoFocus: "autofocus",
+  autoPlay: "autoplay",
+  colSpan: "colspan",
+  contentEditable: "contenteditable",
+  crossOrigin: "crossorigin",
+  dateTime: "datetime",
+  defaultChecked: "checked",
+  defaultValue: "value",
+  encType: "enctype",
+  formAction: "formaction",
+  formEncType: "formenctype",
+  formMethod: "formmethod",
+  formNoValidate: "formnovalidate",
+  formTarget: "formtarget",
+  hrefLang: "hreflang",
+  inputMode: "inputmode",
+  maxLength: "maxlength",
+  minLength: "minlength",
+  noModule: "nomodule",
+  noValidate: "novalidate",
+  readOnly: "readonly",
+  referrerPolicy: "referrerpolicy",
+  rowSpan: "rowspan",
+  spellCheck: "spellcheck",
+  srcDoc: "srcdoc",
+  srcLang: "srclang",
+  srcSet: "srcset",
+  tabIndex: "tabindex",
+  useMap: "usemap",
+  // SVG presentation attributes (camelCase → kebab-case)
+  strokeWidth: "stroke-width",
+  strokeLinecap: "stroke-linecap",
+  strokeLinejoin: "stroke-linejoin",
+  strokeDasharray: "stroke-dasharray",
+  strokeDashoffset: "stroke-dashoffset",
+  strokeMiterlimit: "stroke-miterlimit",
+  strokeOpacity: "stroke-opacity",
+  fillOpacity: "fill-opacity",
+  fillRule: "fill-rule",
+  clipPath: "clip-path",
+  clipRule: "clip-rule",
+  colorInterpolation: "color-interpolation",
+  colorInterpolationFilters: "color-interpolation-filters",
+  floodColor: "flood-color",
+  floodOpacity: "flood-opacity",
+  lightingColor: "lighting-color",
+  stopColor: "stop-color",
+  stopOpacity: "stop-opacity",
+  shapeRendering: "shape-rendering",
+  imageRendering: "image-rendering",
+  textRendering: "text-rendering",
+  pointerEvents: "pointer-events",
+  vectorEffect: "vector-effect",
+  paintOrder: "paint-order",
+  // SVG text/font attributes
+  fontFamily: "font-family",
+  fontSize: "font-size",
+  fontStyle: "font-style",
+  fontVariant: "font-variant",
+  fontWeight: "font-weight",
+  fontStretch: "font-stretch",
+  textAnchor: "text-anchor",
+  textDecoration: "text-decoration",
+  dominantBaseline: "dominant-baseline",
+  alignmentBaseline: "alignment-baseline",
+  baselineShift: "baseline-shift",
+  letterSpacing: "letter-spacing",
+  wordSpacing: "word-spacing",
+  writingMode: "writing-mode",
+  glyphOrientationHorizontal: "glyph-orientation-horizontal",
+  glyphOrientationVertical: "glyph-orientation-vertical",
+  // SVG marker/gradient/filter attributes
+  markerStart: "marker-start",
+  markerMid: "marker-mid",
+  markerEnd: "marker-end",
+  gradientUnits: "gradientUnits",
+  gradientTransform: "gradientTransform",
+  spreadMethod: "spreadMethod",
+  patternUnits: "patternUnits",
+  patternContentUnits: "patternContentUnits",
+  patternTransform: "patternTransform",
+  maskUnits: "maskUnits",
+  maskContentUnits: "maskContentUnits",
+  filterUnits: "filterUnits",
+  primitiveUnits: "primitiveUnits",
+  clipPathUnits: "clipPathUnits",
+  // SVG xlink (legacy but still used)
+  xlinkHref: "xlink:href",
+  xlinkShow: "xlink:show",
+  xlinkActuate: "xlink:actuate",
+  xlinkType: "xlink:type",
+  xlinkRole: "xlink:role",
+  xlinkTitle: "xlink:title",
+  xlinkArcrole: "xlink:arcrole",
+  xmlBase: "xml:base",
+  xmlLang: "xml:lang",
+  xmlSpace: "xml:space",
+  xmlns: "xmlns",
+  xmlnsXlink: "xmlns:xlink",
+  // SVG filter primitive attributes
+  stdDeviation: "stdDeviation",
+  baseFrequency: "baseFrequency",
+  numOctaves: "numOctaves",
+  kernelMatrix: "kernelMatrix",
+  surfaceScale: "surfaceScale",
+  specularConstant: "specularConstant",
+  specularExponent: "specularExponent",
+  diffuseConstant: "diffuseConstant",
+  pointsAtX: "pointsAtX",
+  pointsAtY: "pointsAtY",
+  pointsAtZ: "pointsAtZ",
+  limitingConeAngle: "limitingConeAngle",
+  tableValues: "tableValues"
+  // viewBox, preserveAspectRatio stay as-is (already correct casing)
+};
 function renderAttr(key, value) {
+  const name = ATTR_ALIASES[key] ?? key;
   if (value == null || value === false) return "";
-  if (value === true) return ` ${key}`;
-  const name = key === "className" ? "class" : key === "htmlFor" ? "for" : key;
+  if (value === true) return ` ${name}`;
   let strValue;
   if (value instanceof SafeHtml) {
     strValue = value.__html;
@@ -2501,8 +2700,19 @@ pageRoutes.get("/", (c) => {
         /* @__PURE__ */ jsx("div", { className: "header-controls", children: [
           /* @__PURE__ */ jsx("div", { className: "search-box", children: /* @__PURE__ */ jsx("input", { type: "text", id: "search-input", placeholder: "Search tickets..." }) }),
           /* @__PURE__ */ jsx("div", { className: "layout-toggle", id: "layout-toggle", children: [
-            /* @__PURE__ */ jsx("button", { className: "layout-btn active", "data-layout": "list", title: "List view", children: raw('<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg>') }),
-            /* @__PURE__ */ jsx("button", { className: "layout-btn", "data-layout": "columns", title: "Column view", children: raw('<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M9 3v18"/><path d="M15 3v18"/></svg>') })
+            /* @__PURE__ */ jsx("button", { className: "layout-btn active", "data-layout": "list", title: "List view", children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+              /* @__PURE__ */ jsx("line", { x1: "8", y1: "6", x2: "21", y2: "6" }),
+              /* @__PURE__ */ jsx("line", { x1: "8", y1: "12", x2: "21", y2: "12" }),
+              /* @__PURE__ */ jsx("line", { x1: "8", y1: "18", x2: "21", y2: "18" }),
+              /* @__PURE__ */ jsx("line", { x1: "3", y1: "6", x2: "3.01", y2: "6" }),
+              /* @__PURE__ */ jsx("line", { x1: "3", y1: "12", x2: "3.01", y2: "12" }),
+              /* @__PURE__ */ jsx("line", { x1: "3", y1: "18", x2: "3.01", y2: "18" })
+            ] }) }),
+            /* @__PURE__ */ jsx("button", { className: "layout-btn", "data-layout": "columns", title: "Column view", children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+              /* @__PURE__ */ jsx("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }),
+              /* @__PURE__ */ jsx("path", { d: "M9 3v18" }),
+              /* @__PURE__ */ jsx("path", { d: "M15 3v18" })
+            ] }) })
           ] }),
           /* @__PURE__ */ jsx("div", { className: "sort-controls", children: /* @__PURE__ */ jsx("select", { id: "sort-select", children: [
             /* @__PURE__ */ jsx("option", { value: "created:desc", children: "Newest First" }),
@@ -2512,11 +2722,20 @@ pageRoutes.get("/", (c) => {
             /* @__PURE__ */ jsx("option", { value: "status:asc", children: "Status" })
           ] }) }),
           /* @__PURE__ */ jsx("div", { className: "layout-toggle", id: "detail-position-toggle", children: [
-            /* @__PURE__ */ jsx("button", { className: "layout-btn active", "data-position": "side", title: "Detail panel on side", children: raw('<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="15" y1="3" x2="15" y2="21"/></svg>') }),
-            /* @__PURE__ */ jsx("button", { className: "layout-btn", "data-position": "bottom", title: "Detail panel on bottom", children: raw('<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="3" y1="15" x2="21" y2="15"/></svg>') })
+            /* @__PURE__ */ jsx("button", { className: "layout-btn active", "data-position": "side", title: "Detail panel on side", children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: [
+              /* @__PURE__ */ jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
+              /* @__PURE__ */ jsx("line", { x1: "15", y1: "3", x2: "15", y2: "21" })
+            ] }) }),
+            /* @__PURE__ */ jsx("button", { className: "layout-btn", "data-position": "bottom", title: "Detail panel on bottom", children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: [
+              /* @__PURE__ */ jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
+              /* @__PURE__ */ jsx("line", { x1: "3", y1: "15", x2: "21", y2: "15" })
+            ] }) })
           ] }),
-          /* @__PURE__ */ jsx("button", { className: "glassbox-btn", id: "glassbox-btn", title: "Open Glassbox", style: "display:none", children: raw('<img id="glassbox-icon" alt="Glassbox" />') }),
-          /* @__PURE__ */ jsx("button", { className: "settings-btn", id: "settings-btn", title: "Settings", children: raw('<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg>') })
+          /* @__PURE__ */ jsx("button", { className: "glassbox-btn", id: "glassbox-btn", title: "Open Glassbox", style: "display:none", children: /* @__PURE__ */ jsx("img", { id: "glassbox-icon", alt: "Glassbox" }) }),
+          /* @__PURE__ */ jsx("button", { className: "settings-btn", id: "settings-btn", title: "Settings", children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+            /* @__PURE__ */ jsx("path", { d: "M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" }),
+            /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "3" })
+          ] }) })
         ] })
       ] }),
       /* @__PURE__ */ jsx("div", { id: "backup-preview-banner", className: "backup-preview-banner", style: "display:none", children: [
@@ -2540,7 +2759,10 @@ pageRoutes.get("/", (c) => {
       /* @__PURE__ */ jsx("div", { className: "app-body", children: [
         /* @__PURE__ */ jsx("nav", { className: "sidebar", children: [
           /* @__PURE__ */ jsx("div", { className: "sidebar-copy-prompt", id: "copy-prompt-section", style: "display:none", children: /* @__PURE__ */ jsx("button", { className: "copy-prompt-btn", id: "copy-prompt-btn", title: "Copy worklist prompt to clipboard", children: [
-            /* @__PURE__ */ jsx("span", { className: "copy-prompt-icon", id: "copy-prompt-icon", children: raw('<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>') }),
+            /* @__PURE__ */ jsx("span", { className: "copy-prompt-icon", id: "copy-prompt-icon", children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "13", height: "13", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+              /* @__PURE__ */ jsx("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2" }),
+              /* @__PURE__ */ jsx("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })
+            ] }) }),
             /* @__PURE__ */ jsx("span", { id: "copy-prompt-label", children: "Copy AI prompt" })
           ] }) }),
           /* @__PURE__ */ jsx("div", { className: "sidebar-section", children: [
@@ -2597,82 +2819,49 @@ pageRoutes.get("/", (c) => {
           /* @__PURE__ */ jsx("main", { className: "main-content", children: [
             /* @__PURE__ */ jsx("div", { className: "batch-toolbar", id: "batch-toolbar", children: [
               /* @__PURE__ */ jsx("input", { type: "checkbox", id: "batch-select-all", className: "batch-select-all", title: "Select all / none" }),
-              /* @__PURE__ */ jsx("select", { id: "batch-category", title: "Set category", disabled: true, children: [
-                /* @__PURE__ */ jsx("option", { value: "", children: "Category..." }),
-                /* @__PURE__ */ jsx("option", { value: "issue", children: "Issue" }),
-                /* @__PURE__ */ jsx("option", { value: "bug", children: "Bug" }),
-                /* @__PURE__ */ jsx("option", { value: "feature", children: "Feature" }),
-                /* @__PURE__ */ jsx("option", { value: "requirement_change", children: "Req Change" }),
-                /* @__PURE__ */ jsx("option", { value: "task", children: "Task" }),
-                /* @__PURE__ */ jsx("option", { value: "investigation", children: "Investigation" })
-              ] }),
-              /* @__PURE__ */ jsx("select", { id: "batch-priority", title: "Set priority", disabled: true, children: [
-                /* @__PURE__ */ jsx("option", { value: "", children: "Priority..." }),
-                /* @__PURE__ */ jsx("option", { value: "highest", children: "Highest" }),
-                /* @__PURE__ */ jsx("option", { value: "high", children: "High" }),
-                /* @__PURE__ */ jsx("option", { value: "default", children: "Default" }),
-                /* @__PURE__ */ jsx("option", { value: "low", children: "Low" }),
-                /* @__PURE__ */ jsx("option", { value: "lowest", children: "Lowest" })
-              ] }),
-              /* @__PURE__ */ jsx("select", { id: "batch-status", title: "Set status", disabled: true, children: [
-                /* @__PURE__ */ jsx("option", { value: "", children: "Status..." }),
-                /* @__PURE__ */ jsx("option", { value: "not_started", children: "Not Started" }),
-                /* @__PURE__ */ jsx("option", { value: "started", children: "Started" }),
-                /* @__PURE__ */ jsx("option", { value: "completed", children: "Completed" }),
-                /* @__PURE__ */ jsx("option", { value: "verified", children: "Verified" }),
-                /* @__PURE__ */ jsx("option", { value: "backlog", children: "Backlog" }),
-                /* @__PURE__ */ jsx("option", { value: "archive", children: "Archive" })
-              ] }),
-              /* @__PURE__ */ jsx("button", { id: "batch-upnext", className: "batch-star-btn", title: "Toggle Up Next", disabled: true, children: raw('<span class="batch-star-icon">&#9734;</span>') }),
-              /* @__PURE__ */ jsx("button", { id: "batch-delete", className: "btn btn-sm btn-danger batch-delete-btn", title: "Delete selected", disabled: true, children: raw('<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" y1="11" x2="10" y2="17"/><line x1="14" y1="11" x2="14" y2="17"/></svg>') }),
-              /* @__PURE__ */ jsx("button", { id: "batch-more", className: "btn btn-sm batch-more-btn", title: "More actions", disabled: true, children: raw('<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>') }),
+              /* @__PURE__ */ jsx("button", { id: "batch-category", className: "btn btn-sm batch-dropdown-btn", title: "Set category", disabled: true, children: "Category" }),
+              /* @__PURE__ */ jsx("button", { id: "batch-priority", className: "btn btn-sm batch-dropdown-btn", title: "Set priority", disabled: true, children: "Priority" }),
+              /* @__PURE__ */ jsx("button", { id: "batch-status", className: "btn btn-sm batch-dropdown-btn", title: "Set status", disabled: true, children: "Status" }),
+              /* @__PURE__ */ jsx("button", { id: "batch-upnext", className: "batch-star-btn", title: "Toggle Up Next", disabled: true, children: /* @__PURE__ */ jsx("span", { className: "batch-star-icon", children: "\u2606" }) }),
+              /* @__PURE__ */ jsx("button", { id: "batch-delete", className: "btn btn-sm btn-danger batch-delete-btn", title: "Delete selected", disabled: true, children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                /* @__PURE__ */ jsx("path", { d: "M3 6h18" }),
+                /* @__PURE__ */ jsx("path", { d: "M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" }),
+                /* @__PURE__ */ jsx("path", { d: "M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" }),
+                /* @__PURE__ */ jsx("line", { x1: "10", y1: "11", x2: "10", y2: "17" }),
+                /* @__PURE__ */ jsx("line", { x1: "14", y1: "11", x2: "14", y2: "17" })
+              ] }) }),
+              /* @__PURE__ */ jsx("button", { id: "batch-more", className: "btn btn-sm batch-more-btn", title: "More actions", disabled: true, children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "1" }),
+                /* @__PURE__ */ jsx("circle", { cx: "19", cy: "12", r: "1" }),
+                /* @__PURE__ */ jsx("circle", { cx: "5", cy: "12", r: "1" })
+              ] }) }),
               /* @__PURE__ */ jsx("span", { className: "batch-count", id: "batch-count" })
             ] }),
-            /* @__PURE__ */ jsx("div", { className: "ticket-list", id: "ticket-list", children: raw('<div class="ticket-list-loading">Loading...</div>') })
+            /* @__PURE__ */ jsx("div", { className: "ticket-list", id: "ticket-list", children: /* @__PURE__ */ jsx("div", { className: "ticket-list-loading", children: "Loading..." }) })
           ] }),
           /* @__PURE__ */ jsx("div", { className: "detail-resize-handle", id: "detail-resize-handle" }),
           /* @__PURE__ */ jsx("aside", { className: "detail-panel detail-disabled", id: "detail-panel", children: [
             /* @__PURE__ */ jsx("div", { className: "detail-placeholder", id: "detail-placeholder", children: /* @__PURE__ */ jsx("span", { className: "detail-placeholder-text", id: "detail-placeholder-text", children: "Nothing selected" }) }),
             /* @__PURE__ */ jsx("div", { className: "detail-header", id: "detail-header", style: "display:none", children: [
               /* @__PURE__ */ jsx("span", { className: "detail-ticket-number", id: "detail-ticket-number" }),
-              /* @__PURE__ */ jsx("button", { className: "detail-close", id: "detail-close", title: "Close", children: raw("&times;") })
+              /* @__PURE__ */ jsx("button", { className: "detail-close", id: "detail-close", title: "Close", children: "\xD7" })
             ] }),
             /* @__PURE__ */ jsx("div", { className: "detail-body", id: "detail-body", style: "display:none", children: [
               /* @__PURE__ */ jsx("div", { className: "detail-fields-row", children: [
                 /* @__PURE__ */ jsx("div", { className: "detail-field", children: [
                   /* @__PURE__ */ jsx("label", { children: "Category" }),
-                  /* @__PURE__ */ jsx("select", { id: "detail-category", children: [
-                    /* @__PURE__ */ jsx("option", { value: "issue", children: "Issue" }),
-                    /* @__PURE__ */ jsx("option", { value: "bug", children: "Bug" }),
-                    /* @__PURE__ */ jsx("option", { value: "feature", children: "Feature" }),
-                    /* @__PURE__ */ jsx("option", { value: "requirement_change", children: "Req Change" }),
-                    /* @__PURE__ */ jsx("option", { value: "task", children: "Task" }),
-                    /* @__PURE__ */ jsx("option", { value: "investigation", children: "Investigation" })
-                  ] })
+                  /* @__PURE__ */ jsx("button", { id: "detail-category", className: "detail-dropdown-btn", "data-value": "issue", children: "Issue" })
                 ] }),
                 /* @__PURE__ */ jsx("div", { className: "detail-field", children: [
                   /* @__PURE__ */ jsx("label", { children: "Priority" }),
-                  /* @__PURE__ */ jsx("select", { id: "detail-priority", children: [
-                    /* @__PURE__ */ jsx("option", { value: "highest", children: "Highest" }),
-                    /* @__PURE__ */ jsx("option", { value: "high", children: "High" }),
-                    /* @__PURE__ */ jsx("option", { value: "default", children: "Default" }),
-                    /* @__PURE__ */ jsx("option", { value: "low", children: "Low" }),
-                    /* @__PURE__ */ jsx("option", { value: "lowest", children: "Lowest" })
-                  ] })
+                  /* @__PURE__ */ jsx("button", { id: "detail-priority", className: "detail-dropdown-btn", "data-value": "default", children: "Default" })
                 ] }),
                 /* @__PURE__ */ jsx("div", { className: "detail-field", children: [
                   /* @__PURE__ */ jsx("label", { children: "Status" }),
-                  /* @__PURE__ */ jsx("select", { id: "detail-status", children: [
-                    /* @__PURE__ */ jsx("option", { value: "not_started", children: "Not Started" }),
-                    /* @__PURE__ */ jsx("option", { value: "started", children: "Started" }),
-                    /* @__PURE__ */ jsx("option", { value: "completed", children: "Completed" }),
-                    /* @__PURE__ */ jsx("option", { value: "verified", children: "Verified" }),
-                    /* @__PURE__ */ jsx("option", { value: "backlog", children: "Backlog" }),
-                    /* @__PURE__ */ jsx("option", { value: "archive", children: "Archive" })
-                  ] })
+                  /* @__PURE__ */ jsx("button", { id: "detail-status", className: "detail-dropdown-btn", "data-value": "not_started", children: "Not Started" })
                 ] }),
                 /* @__PURE__ */ jsx("div", { className: "detail-field", children: /* @__PURE__ */ jsx("label", { className: "detail-upnext-label", children: [
-                  /* @__PURE__ */ jsx("input", { type: "checkbox", id: "detail-upnext" }),
+                  /* @__PURE__ */ jsx("button", { className: "ticket-star detail-upnext-star", id: "detail-upnext", type: "button", children: "\u2606" }),
                   "Up Next"
                 ] }) })
               ] }),
@@ -2709,7 +2898,7 @@ pageRoutes.get("/", (c) => {
           ] }),
           /* @__PURE__ */ jsx("span", { children: [
             /* @__PURE__ */ jsx("kbd", { children: [
-              raw("&#8984;"),
+              "\u2318",
               "I/B/F/R/K/G"
             ] }),
             " category"
@@ -2720,7 +2909,7 @@ pageRoutes.get("/", (c) => {
           ] }),
           /* @__PURE__ */ jsx("span", { children: [
             /* @__PURE__ */ jsx("kbd", { children: [
-              raw("&#8984;"),
+              "\u2318",
               "D"
             ] }),
             " up next"
@@ -2736,23 +2925,73 @@ pageRoutes.get("/", (c) => {
     /* @__PURE__ */ jsx("div", { className: "settings-overlay", id: "settings-overlay", style: "display:none", children: /* @__PURE__ */ jsx("div", { className: "settings-dialog", children: [
       /* @__PURE__ */ jsx("div", { className: "settings-header", children: [
         /* @__PURE__ */ jsx("h2", { children: "Settings" }),
-        /* @__PURE__ */ jsx("button", { className: "detail-close", id: "settings-close", children: raw("&times;") })
+        /* @__PURE__ */ jsx("button", { className: "detail-close", id: "settings-close", children: "\xD7" })
       ] }),
-      /* @__PURE__ */ jsx("div", { className: "settings-body", children: [
-        /* @__PURE__ */ jsx("div", { className: "settings-field", children: [
-          /* @__PURE__ */ jsx("label", { children: "App name" }),
-          /* @__PURE__ */ jsx("input", { type: "text", id: "settings-app-name", placeholder: "Hot Sheet" }),
-          /* @__PURE__ */ jsx("span", { className: "settings-hint", id: "settings-app-name-hint", children: "Custom name shown in the title bar. Leave empty for default." })
+      /* @__PURE__ */ jsx("div", { className: "settings-tabs", id: "settings-tabs", children: [
+        /* @__PURE__ */ jsx("button", { className: "settings-tab active", "data-tab": "general", children: [
+          /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+            /* @__PURE__ */ jsx("line", { x1: "21", x2: "14", y1: "4", y2: "4" }),
+            /* @__PURE__ */ jsx("line", { x1: "10", x2: "3", y1: "4", y2: "4" }),
+            /* @__PURE__ */ jsx("line", { x1: "21", x2: "12", y1: "12", y2: "12" }),
+            /* @__PURE__ */ jsx("line", { x1: "8", x2: "3", y1: "12", y2: "12" }),
+            /* @__PURE__ */ jsx("line", { x1: "21", x2: "16", y1: "20", y2: "20" }),
+            /* @__PURE__ */ jsx("line", { x1: "12", x2: "3", y1: "20", y2: "20" }),
+            /* @__PURE__ */ jsx("line", { x1: "14", x2: "14", y1: "2", y2: "6" }),
+            /* @__PURE__ */ jsx("line", { x1: "8", x2: "8", y1: "10", y2: "14" }),
+            /* @__PURE__ */ jsx("line", { x1: "16", x2: "16", y1: "18", y2: "22" })
+          ] }),
+          /* @__PURE__ */ jsx("span", { children: "General" })
+        ] }),
+        /* @__PURE__ */ jsx("button", { className: "settings-tab", "data-tab": "categories", children: [
+          /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+            /* @__PURE__ */ jsx("path", { d: "M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z" }),
+            /* @__PURE__ */ jsx("circle", { cx: "7.5", cy: "7.5", r: ".5", fill: "currentColor" })
+          ] }),
+          /* @__PURE__ */ jsx("span", { children: "Categories" })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "settings-field", children: [
-          /* @__PURE__ */ jsx("label", { children: "Auto-clear trash after (days)" }),
-          /* @__PURE__ */ jsx("input", { type: "number", id: "settings-trash-days", min: "1", value: "3" })
+        /* @__PURE__ */ jsx("button", { className: "settings-tab", "data-tab": "backups", children: [
+          /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+            /* @__PURE__ */ jsx("line", { x1: "22", x2: "2", y1: "12", y2: "12" }),
+            /* @__PURE__ */ jsx("path", { d: "M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" }),
+            /* @__PURE__ */ jsx("line", { x1: "6", x2: "6.01", y1: "16", y2: "16" }),
+            /* @__PURE__ */ jsx("line", { x1: "10", x2: "10.01", y1: "16", y2: "16" })
+          ] }),
+          /* @__PURE__ */ jsx("span", { children: "Backups" })
+        ] }),
+        /* @__PURE__ */ jsx("button", { className: "settings-tab", "data-tab": "updates", id: "settings-tab-updates", style: "display:none", children: [
+          /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+            /* @__PURE__ */ jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+            /* @__PURE__ */ jsx("polyline", { points: "7 10 12 15 17 10" }),
+            /* @__PURE__ */ jsx("line", { x1: "12", x2: "12", y1: "15", y2: "3" })
+          ] }),
+          /* @__PURE__ */ jsx("span", { children: "Updates" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "settings-body", children: [
+        /* @__PURE__ */ jsx("div", { className: "settings-tab-panel active", "data-panel": "general", children: [
+          /* @__PURE__ */ jsx("div", { className: "settings-field", children: [
+            /* @__PURE__ */ jsx("label", { children: "App name" }),
+            /* @__PURE__ */ jsx("input", { type: "text", id: "settings-app-name", placeholder: "Hot Sheet" }),
+            /* @__PURE__ */ jsx("span", { className: "settings-hint", id: "settings-app-name-hint", children: "Custom name shown in the title bar. Leave empty for default." })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "settings-field", children: [
+            /* @__PURE__ */ jsx("label", { children: "Auto-clear trash after (days)" }),
+            /* @__PURE__ */ jsx("input", { type: "number", id: "settings-trash-days", min: "1", value: "3" })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "settings-field", children: [
+            /* @__PURE__ */ jsx("label", { children: "Auto-clear verified after (days)" }),
+            /* @__PURE__ */ jsx("input", { type: "number", id: "settings-verified-days", min: "1", value: "30" })
+          ] })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "settings-field", children: [
-          /* @__PURE__ */ jsx("label", { children: "Auto-clear verified after (days)" }),
-          /* @__PURE__ */ jsx("input", { type: "number", id: "settings-verified-days", min: "1", value: "30" })
+        /* @__PURE__ */ jsx("div", { className: "settings-tab-panel", "data-panel": "categories", children: [
+          /* @__PURE__ */ jsx("div", { className: "settings-section-header", children: [
+            /* @__PURE__ */ jsx("h3", { children: "Categories" }),
+            /* @__PURE__ */ jsx("div", { className: "category-preset-controls", children: /* @__PURE__ */ jsx("select", { id: "category-preset-select", className: "btn btn-sm", children: /* @__PURE__ */ jsx("option", { value: "", children: "Load preset..." }) }) })
+          ] }),
+          /* @__PURE__ */ jsx("div", { id: "category-list", className: "category-list" }),
+          /* @__PURE__ */ jsx("button", { id: "category-add-btn", className: "btn btn-sm", style: "margin-top:8px", children: "Add Category" })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "settings-section", children: [
+        /* @__PURE__ */ jsx("div", { className: "settings-tab-panel", "data-panel": "backups", children: [
           /* @__PURE__ */ jsx("div", { className: "settings-section-header", children: [
             /* @__PURE__ */ jsx("h3", { children: "Database Backups" }),
             /* @__PURE__ */ jsx("button", { className: "btn btn-sm", id: "backup-now-btn", children: "Backup Now" })
@@ -2764,7 +3003,7 @@ pageRoutes.get("/", (c) => {
           ] }),
           /* @__PURE__ */ jsx("div", { id: "backup-list", className: "backup-list", children: "Loading backups..." })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "settings-section", id: "settings-updates-section", style: "display:none", children: [
+        /* @__PURE__ */ jsx("div", { className: "settings-tab-panel", "data-panel": "updates", id: "settings-updates-section", style: "display:none", children: [
           /* @__PURE__ */ jsx("div", { className: "settings-section-header", children: [
             /* @__PURE__ */ jsx("h3", { children: "Software Updates" }),
             /* @__PURE__ */ jsx("button", { className: "btn btn-sm", id: "check-updates-btn", children: "Check for Updates" })
@@ -3076,6 +3315,7 @@ async function main() {
   initMarkdownSync(dataDir2, actualPort);
   scheduleAllSync();
   initSkills(actualPort, dataDir2);
+  setSkillCategories(await getCategories());
   const updatedPlatforms = ensureSkills();
   if (updatedPlatforms.length > 0) {
     console.log(`