@starlove/orbit 1.0.6 → 1.0.7

package/public/js/url-routes.js

@@ -0,0 +1,94 @@
+import { SETTINGS_TAB_IDS } from "./settings-tabs.js";
+
+const EMPTY_ROUTE = Object.freeze({ boardSlug: "", view: "board", ticketId: "", tab: "" });
+
+function emptyRoute() {
+  return { ...EMPTY_ROUTE };
+}
+
+function normalizeLocation(input = globalThis.location) {
+  if (typeof input === "string") {
+    const url = new URL(input, "http://orbit.local");
+    return { pathname: url.pathname || "/", search: url.search || "", hash: url.hash || "" };
+  }
+  return {
+    pathname: input?.pathname || "/",
+    search: input?.search || "",
+    hash: input?.hash || ""
+  };
+}
+
+function decodeSegment(value) {
+  try {
+    return decodeURIComponent(value);
+  } catch {
+    return value;
+  }
+}
+
+function routeSegments(value) {
+  return String(value || "")
+    .replace(/^#/, "")
+    .replace(/^\/+/, "")
+    .replace(/\/+$/, "")
+    .split("/")
+    .filter(Boolean);
+}
+
+function routeFromSegments(parts) {
+  if (!parts.length) return null;
+
+  const out = emptyRoute();
+  let i = 0;
+
+  if (parts[i] === "b") {
+    if (!parts[i + 1]) return null;
+    out.boardSlug = decodeSegment(parts[i + 1]);
+    i += 2;
+  } else if (parts[i] !== "t" && parts[i] !== "settings") {
+    return null;
+  }
+
+  if (parts[i] === "t" && parts[i + 1]) {
+    out.view = "ticket";
+    out.ticketId = decodeSegment(parts[i + 1]);
+  } else if (parts[i] === "settings") {
+    out.view = "settings";
+    const tab = parts[i + 1] ? decodeSegment(parts[i + 1]) : "";
+    if (tab && SETTINGS_TAB_IDS.has(tab)) out.tab = tab;
+  }
+
+  return out;
+}
+
+export function parseLegacyHashRoute(hash) {
+  const raw = String(hash || "");
+  if (!raw || raw === "#" || raw === "#/") return null;
+  return routeFromSegments(routeSegments(raw));
+}
+
+export function parseRoute(input = globalThis.location) {
+  const loc = normalizeLocation(input);
+  return parseLegacyHashRoute(loc.hash) || emptyRoute();
+}
+
+export function hasRoute(input = globalThis.location) {
+  const loc = normalizeLocation(input);
+  return Boolean(parseLegacyHashRoute(loc.hash));
+}
+
+export function buildRoute({ boardSlug = "", view = "board", ticketId = "", tab = "" } = {}) {
+  const segs = [];
+  if (boardSlug) segs.push("b", encodeURIComponent(boardSlug));
+  if (view === "ticket" && ticketId) segs.push("t", encodeURIComponent(ticketId));
+  else if (view === "settings") {
+    segs.push("settings");
+    if (tab && SETTINGS_TAB_IDS.has(tab)) segs.push(tab);
+  }
+  return "#/" + segs.join("/");
+}
+
+export function isCanonicalRouteUrl(input = globalThis.location, routeObj = parseRoute(input)) {
+  const loc = normalizeLocation(input);
+  return loc.hash === buildRoute(routeObj);
+}

package/public/styles.css

@@ -76,6 +76,7 @@ input[type="file"] {
   --orbit-add-border: rgba(29, 37, 40, 0.12);
   --orbit-phantom-border: rgba(29, 37, 40, 0.14);
   --orbit-phantom-bg: rgba(29, 37, 40, 0.03);
+  --kanban-column-width: 22rem;
   --scrollbar-thumb: rgba(var(--accent-rgb),0.45);
   --scrollbar-thumb-hover: rgba(var(--accent-rgb),0.65);
   --scrollbar-track: transparent;
@@ -100,6 +101,12 @@ input[type="file"] {
   --select-chevron-size: 12px;
 }
 
+@media (max-width: 720px) {
+  :root {
+    --kanban-column-width: 18rem;
+  }
+}
+
 * {
   box-sizing: border-box;
 }
@@ -529,6 +536,12 @@ h1 {
   scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
 }
 
+#boardFlyout {
+  min-width: 20.25rem;
+  max-width: min(30rem, calc(100vw - 1.5rem));
+  max-height: min(36rem, calc(100vh - 4rem));
+}
+
 .menu-flyout--align-end {
   right: 0;
   left: auto;
@@ -1109,7 +1122,7 @@ h1 {
 /* Horizontal scroll: styled thumb/track (Firefox + WebKit). */
 .kanban {
   display: grid;
-  grid-auto-columns: minmax(17rem, 1fr);
+  grid-auto-columns: minmax(var(--kanban-column-width), 1fr);
   grid-auto-flow: column;
   grid-template-rows: minmax(0, 1fr);
   flex: 1 1 auto;
@@ -1704,8 +1717,8 @@ h1 {
 /* Epic-aware grouping inside a column.
    `.epic-children` is a flex item nested in `.column` (which is itself flex-column,
    gap 0.7rem). Right-aligning + narrowing it makes its cards read as indented
-   children of the epic card or `.epic-mini-header` directly above. The negative
-   margin-top tightens the visual link by halving the column gap. */
+   children of the epic card or full-width `.epic-mini-header` directly above.
+   The negative margin-top tightens the visual link by halving the column gap. */
 .epic-children {
   display: flex;
   flex-direction: column;
@@ -1744,15 +1757,14 @@ h1 {
     0 8px 20px rgba(0, 0, 0, 0.25);
 }
 
-/* Thin "header" that stands in for the epic when its children sit in a different
-   column. Visually pairs with the `.epic-children` block right below it: same
-   width and right-alignment, slim purple bar shape. */
+/* Thin full-width "header" that stands in for the epic when its children sit in
+   a different column. Children remain narrowed underneath so the hierarchy is
+   visible without cutting the lane width at the epic anchor. */
 .epic-mini-header {
   display: flex;
   align-items: center;
   gap: 0.4rem;
-  width: 92%;
-  align-self: flex-end;
+  width: 100%;
   padding: 0.45rem 0.6rem;
   border-radius: 10px 10px 4px 4px;
   background: rgba(var(--purple-rgb), 0.10);
@@ -2144,7 +2156,13 @@ h1 {
   background: var(--drawer-bg);
   box-shadow: 0 24px 60px rgba(12, 18, 26, 0.28);
   transform: translateX(calc(100% + 1.5rem));
-  transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1);
+  transition:
+    transform 320ms cubic-bezier(0.4, 0, 0.2, 1),
+    width 180ms ease;
+}
+
+.drawer.is-wide {
+  width: min(58rem, calc(100vw - 1rem));
 }
 
 .drawer.is-open {
@@ -2286,8 +2304,8 @@ h1 {
   border-color: var(--accent-border);
 }
 
-.drawer-close {
-  grid-area: close;
+.drawer-close,
+.drawer-archive {
   display: inline-grid;
   place-items: center;
   width: 2rem;
@@ -2297,10 +2315,14 @@ h1 {
   border-radius: 10px;
   background: var(--surface);
   color: var(--ink);
+  cursor: url('cursors/live_link.cur'), pointer;
+}
+
+.drawer-close {
+  grid-area: close;
   font-size: 1.35rem;
   font-weight: 400;
   line-height: 1;
-  cursor: url('cursors/live_link.cur'), pointer;
 }
 
 .drawer-close:hover {
@@ -2310,16 +2332,6 @@ h1 {
 
 .drawer-archive {
   grid-area: archive;
-  display: inline-grid;
-  place-items: center;
-  width: 2rem;
-  height: 2rem;
-  padding: 0;
-  border: 1px solid var(--line);
-  border-radius: 10px;
-  background: var(--surface);
-  color: var(--ink);
-  cursor: url('cursors/live_link.cur'), pointer;
 }
 
 .drawer-archive:hover {
@@ -2463,6 +2475,95 @@ h1 {
   white-space: pre-wrap;
 }
 
+.markdown-body {
+  white-space: normal;
+  overflow-wrap: anywhere;
+}
+
+.markdown-body p,
+.markdown-body ul,
+.markdown-body ol,
+.markdown-body pre {
+  margin: 0;
+}
+
+.markdown-body p + p,
+.markdown-body p + ul,
+.markdown-body p + ol,
+.markdown-body p + pre,
+.markdown-body ul + p,
+.markdown-body ul + ol,
+.markdown-body ul + pre,
+.markdown-body ol + p,
+.markdown-body ol + ul,
+.markdown-body ol + pre,
+.markdown-body pre + p,
+.markdown-body pre + ul,
+.markdown-body pre + ol {
+  margin-top: 0.55rem;
+}
+
+.markdown-body ul,
+.markdown-body ol {
+  padding-left: 1.25rem;
+}
+
+.markdown-body li + li {
+  margin-top: 0.2rem;
+}
+
+.markdown-body code {
+  border: 1px solid rgba(var(--blue-rgb), 0.18);
+  border-radius: 0.35rem;
+  padding: 0.05rem 0.25rem;
+  color: var(--ink);
+  background: rgba(var(--blue-rgb), 0.08);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+  font-size: 0.9em;
+}
+
+.markdown-body pre {
+  padding: 0.65rem 0.75rem;
+  overflow: auto;
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  background: var(--surface-card);
+}
+
+.markdown-body pre code {
+  display: block;
+  border: 0;
+  padding: 0;
+  background: transparent;
+  white-space: pre;
+}
+
+.markdown-body a {
+  color: var(--blue);
+  font-weight: 700;
+  text-decoration: underline;
+  text-decoration-thickness: 0.08em;
+  text-underline-offset: 0.15em;
+}
+
+.card-description {
+  margin-top: 0.45rem;
+  color: var(--muted);
+  font-size: 0.82rem;
+  line-height: 1.45;
+}
+
+.card .markdown-body p {
+  display: block;
+  overflow: visible;
+  -webkit-line-clamp: unset;
+  -webkit-box-orient: initial;
+}
+
+.card .markdown-body pre {
+  max-height: 8rem;
+}
+
 /* The detail pane's lede description is body copy, not a card excerpt — give
    it more presence than the universal muted .description rule. */
 .detail-head > .description {
@@ -3194,6 +3295,157 @@ details.section > summary .mcp-title-row {
   margin-bottom: 0.85rem;
 }
 
+.appearance-theme-section {
+  margin-top: 0.4rem;
+}
+
+.appearance-theme-section + .section:has(> .orbit-check:first-child) {
+  margin-top: 1.25rem;
+}
+
+.appearance-theme-field {
+  display: grid;
+  gap: 0.55rem;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+.appearance-theme-field legend {
+  margin-bottom: 0.55rem;
+  color: var(--ink);
+  font-size: 0.88rem;
+  font-weight: 800;
+}
+
+.appearance-theme-options {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.5rem;
+}
+
+.appearance-theme-option {
+  position: relative;
+  display: inline-flex;
+  min-width: 0;
+  min-height: 2.5rem;
+  align-items: center;
+  justify-content: center;
+  gap: 0.45rem;
+  padding: 0.5rem 0.72rem;
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  background: var(--surface-dim);
+  color: var(--ink);
+  font-size: 0.86rem;
+  font-weight: 700;
+  cursor: url('cursors/live_link.cur'), pointer;
+  transition:
+    border-color 160ms ease,
+    background 160ms ease,
+    box-shadow 160ms ease,
+    color 160ms ease;
+}
+
+.appearance-theme-option:hover {
+  border-color: var(--accent-border);
+  background: var(--accent-hover);
+}
+
+.appearance-theme-option input[type="radio"] {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.appearance-theme-option-mark {
+  display: grid;
+  width: 1.35rem;
+  height: 1.35rem;
+  flex: 0 0 auto;
+  place-items: center;
+  border: 1px solid var(--accent-border);
+  border-radius: 999px;
+  background: var(--surface-input);
+  transition:
+    background 160ms ease,
+    border-color 160ms ease,
+    box-shadow 160ms ease;
+}
+
+.appearance-theme-option-icon {
+  width: 0.9rem;
+  height: 0.9rem;
+}
+
+.appearance-theme-option-label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.appearance-theme-option:has(input[type="radio"]:checked) {
+  border-color: var(--accent);
+  background:
+    linear-gradient(135deg, rgba(var(--accent-rgb),0.12), rgba(var(--blue-rgb),0.08)),
+    var(--surface-dim);
+  box-shadow:
+    inset 0 0 0 1px rgba(var(--accent-rgb),0.18),
+    0 4px 10px rgba(var(--accent-rgb),0.12);
+}
+
+.appearance-theme-option:has(input[type="radio"]:checked) .appearance-theme-option-mark {
+  border-color: var(--accent);
+  color: #fff;
+  background:
+    linear-gradient(135deg, rgba(var(--accent-rgb),0.95), rgba(var(--blue-rgb),0.95));
+}
+
+.appearance-theme-option input[type="radio"]:focus-visible ~ .appearance-theme-option-mark {
+  box-shadow: var(--accent-ring);
+}
+
+[data-theme="dark"] .appearance-theme-option {
+  background: rgba(15, 25, 50, 0.55);
+  border-color: rgba(var(--starlight-rgb),0.16);
+}
+
+[data-theme="dark"] .appearance-theme-option:hover {
+  border-color: rgba(var(--starlight-rgb),0.4);
+  background: rgba(var(--starlight-rgb),0.08);
+}
+
+[data-theme="dark"] .appearance-theme-option-mark {
+  border-color: rgba(var(--starlight-rgb),0.35);
+  background:
+    linear-gradient(135deg, rgba(var(--starlight-rgb),0.06), rgba(var(--cosmos-rgb),0) 65%),
+    rgba(15, 25, 50, 0.7);
+}
+
+[data-theme="dark"] .appearance-theme-option:has(input[type="radio"]:checked) {
+  border-color: rgba(var(--starlight-rgb),0.55);
+  background:
+    linear-gradient(135deg, rgba(var(--starlight-rgb),0.13), rgba(var(--violet-rgb),0.08)),
+    rgba(15, 25, 50, 0.65);
+  box-shadow:
+    inset 0 0 0 1px rgba(var(--starlight-rgb),0.18),
+    0 4px 14px rgba(var(--starlight-rgb),0.16);
+}
+
+[data-theme="dark"] .appearance-theme-option:has(input[type="radio"]:checked) .appearance-theme-option-mark {
+  border-color: rgba(var(--starlight-rgb),0.7);
+  color: #0a1024;
+  background: linear-gradient(135deg, #d6e6ff, #a8c0ff);
+}
+
 /* Lanes tab opens directly with the checkbox — drop the default .section
    top margin so it sits flush under the drawer tabs. */
 .section:has(> .orbit-check:first-child) {
@@ -4828,6 +5080,27 @@ button:disabled,
   }
 }
 
+[data-reduced-motion="reduce"] *,
+[data-reduced-motion="reduce"] *::before,
+[data-reduced-motion="reduce"] *::after {
+  scroll-behavior: auto !important;
+  transition-duration: 0.01ms !important;
+  animation-duration: 0.01ms !important;
+  animation-iteration-count: 1 !important;
+}
+
+[data-reduced-motion="reduce"][data-theme="dark"] .starfield,
+[data-reduced-motion="reduce"][data-theme="dark"] .milky-way,
+[data-reduced-motion="reduce"][data-theme="dark"] .grain::before,
+[data-reduced-motion="reduce"][data-theme="dark"] .grain::after,
+[data-reduced-motion="reduce"][data-theme="dark"] .signature-star {
+  animation: none;
+}
+
+[data-reduced-motion="reduce"][data-theme="dark"] .meteor {
+  display: none;
+}
+
 [data-theme="dark"] {
   /* Tells the browser to render native widgets (dropdowns, scrollbars,
      date pickers, etc.) in their dark variant so option popups match. */

package/src/core/agents-md.js

@@ -11,6 +11,7 @@ export function orbitAgentsSection() {
 ${ORBIT_AGENTS_CANONICAL_LINE}
 
 When work mentions Orbit, kanban, board, lane, ticket, card, epic, blocker, claim, AI Ready, implementation fields, planning state, project memory, or handoff: read \`SKILL-ORBIT.md\` first and follow it.
+Use Orbit API/MCP tools for tickets/cards; do not edit .orbit/board.db directly.
 ${ORBIT_AGENTS_END}\n`;
 }
 

package/src/core/board.js

@@ -100,7 +100,7 @@ export {
   updateBoardEntry,
   boardManual
 } from "./boards.js";
-export { archiveTicket, createComment, deleteTicket, restoreTicket, updateTicket } from "./tickets.js";
+export { archiveTicket, createComment, createTicket, deleteTicket, restoreTicket, updateTicket } from "./tickets.js";
 export { archivedTicketsForBoard } from "./queries.js";
 export { getTicketBlockers, getTicketRelations } from "./relations.js";
 export { checkpointTicket, claimNext, completeTicket, getContextPack, readComments, readTicket } from "./agent.js";

package/src/core/bootstrap.js

@@ -33,8 +33,9 @@ function boardSummaryFromRegistry(r) {
  *
  * @param actor authenticated actor
  * @param requestedBoardId optional board id from `?board_id=` (or null)
+ * @param requestedBoardSlug optional board slug from `?board=` (or null)
  */
-export function getBootstrap(actor, requestedBoardId = null) {
+export function getBootstrap(actor, requestedBoardId = null, requestedBoardSlug = null) {
   const registryRows = listBoards();
   const accessible = registryRows.filter((row) => canAccessBoard(actor, { slug: row.slug }));
 
@@ -57,6 +58,9 @@ export function getBootstrap(actor, requestedBoardId = null) {
   if (requestedBoardId) {
     chosen = accessible.find((row) => row.id === requestedBoardId) || null;
   }
+  if (!chosen && requestedBoardSlug) {
+    chosen = accessible.find((row) => row.slug === requestedBoardSlug) || null;
+  }
   if (!chosen) {
     const defaultRow = pickDefaultBoard();
     if (defaultRow && accessible.some((row) => row.id === defaultRow.id)) {
@@ -143,6 +147,10 @@ export function getBootstrap(actor, requestedBoardId = null) {
 
   return {
     actor: publicActor(actor),
+    // The server may choose a default board that is not first in the registry's
+    // alphabetic board list. Expose that choice explicitly so first-page load
+    // selects the same board whose lanes/tickets are included below.
+    active_board_id: chosenRow.id,
     meta: {
       db_path: chosenRow.db_path,
       export_dir: EXPORT_DIR

package/src/core/router.js

@@ -107,7 +107,7 @@ export async function handleApi(req, res, url) {
 
   // Bootstrap: read-only registry + one chosen board. No global state mutated.
   if (req.method === "GET" && url.pathname === "/api/bootstrap") {
-    sendJson(res, 200, getBootstrap(actor, url.searchParams.get("board_id")));
+    sendJson(res, 200, getBootstrap(actor, url.searchParams.get("board_id"), url.searchParams.get("board")));
     return;
   }
 

package/src/core/search.js

@@ -16,38 +16,65 @@ export function searchTickets(args, ctx) {
   if (!q) return { query: q, results: [] };
   if (!canAccessBoard(actor, board)) return { query: q, results: [] };
 
+  const ticketNumber = ticketNumberQuery(q);
   const fts = toFtsQuery(q);
   let rows = [];
-  try {
+
+  if (ticketNumber !== null) {
     rows = db
       .prepare(
-        `SELECT t.*, s.name AS state_name, b.slug AS board_slug,
-                bm25(ticket_fts) AS rank
-         FROM ticket_fts
-         JOIN tickets t ON t.id = ticket_fts.ticket_id
+        `SELECT t.*, s.name AS state_name, b.slug AS board_slug, -1 AS rank
+         FROM tickets t
          JOIN states s ON s.id = t.state_id
          JOIN boards b ON b.id = t.board_id
-         WHERE ticket_fts MATCH ? AND t.archived_at IS NULL
-         ORDER BY rank
+         WHERE t.board_id = ? AND t.number = ? AND t.archived_at IS NULL
          LIMIT ?`
       )
-      .all(fts, limit);
+      .all(board.id, ticketNumber, limit);
+  }
+
+  try {
+    rows = rows.concat(
+      db
+        .prepare(
+          `SELECT t.*, s.name AS state_name, b.slug AS board_slug,
+                  bm25(ticket_fts) AS rank
+           FROM ticket_fts
+           JOIN tickets t ON t.id = ticket_fts.ticket_id
+           JOIN states s ON s.id = t.state_id
+           JOIN boards b ON b.id = t.board_id
+           WHERE ticket_fts MATCH ? AND t.board_id = ? AND t.archived_at IS NULL
+           ORDER BY rank
+           LIMIT ?`
+        )
+        .all(fts, board.id, limit)
+    );
   } catch {
     const like = `%${q}%`;
-    rows = db
-      .prepare(
-        `SELECT DISTINCT t.*, s.name AS state_name, b.slug AS board_slug, 0 AS rank
-         FROM tickets t
-         JOIN states s ON s.id = t.state_id
-         JOIN boards b ON b.id = t.board_id
-         LEFT JOIN comments c ON c.ticket_id = t.id
-         WHERE t.archived_at IS NULL
-           AND (t.title LIKE ? OR t.description LIKE ? OR t.ai_plan LIKE ?
-            OR t.implementation_summary LIKE ? OR t.implementation_updates LIKE ? OR c.body LIKE ?)
-         ORDER BY t.updated_at DESC, t.id ASC
-         LIMIT ?`
-      )
-      .all(like, like, like, like, like, like, limit);
+    const numberRank = ticketNumber !== null ? "CASE WHEN t.number = ? THEN -1 ELSE 0 END" : "0";
+    const numberPredicate = ticketNumber !== null ? "OR t.number = ?" : "";
+    const fallbackArgs = ticketNumber !== null ? [ticketNumber, board.id] : [board.id];
+    fallbackArgs.push(like, like, like, like, like, like);
+    if (ticketNumber !== null) fallbackArgs.push(ticketNumber);
+    fallbackArgs.push(limit);
+
+    rows = rows.concat(
+      db
+        .prepare(
+          `SELECT DISTINCT t.*, s.name AS state_name, b.slug AS board_slug, ${numberRank} AS rank
+           FROM tickets t
+           JOIN states s ON s.id = t.state_id
+           JOIN boards b ON b.id = t.board_id
+           LEFT JOIN comments c ON c.ticket_id = t.id
+           WHERE t.board_id = ? AND t.archived_at IS NULL
+             AND (t.title LIKE ? OR t.description LIKE ? OR t.ai_plan LIKE ?
+              OR t.implementation_summary LIKE ? OR t.implementation_updates LIKE ? OR c.body LIKE ?
+              ${numberPredicate})
+           ORDER BY t.updated_at DESC, t.id ASC
+           LIMIT ?`
+        )
+        .all(...fallbackArgs)
+    );
   }
 
   rows.sort((a, b) => {
@@ -73,3 +100,10 @@ export function searchTickets(args, ctx) {
 
   return { query: q, results };
 }
+
+function ticketNumberQuery(q) {
+  const match = String(q).trim().match(/^#?(\d+)$/);
+  if (!match) return null;
+  const number = Number(match[1]);
+  return Number.isSafeInteger(number) ? number : null;
+}