@starlove/orbit 1.1.11 → 1.2.0

package/public/js/board-menu.js

@@ -23,11 +23,25 @@ export function closeMenuFlyouts() {
   closeBoardFlyout();
 }
 
+const boardChipIcon = `
+  <svg
+    class="topbar-icon"
+    width="16"
+    height="16"
+    viewBox="0 0 24 24"
+    fill="none"
+    aria-hidden="true"
+  >
+    <rect x="4" y="4" width="6" height="16" rx="0.75" stroke="currentColor" stroke-width="2" />
+    <rect x="14" y="4" width="6" height="16" rx="0.75" stroke="currentColor" stroke-width="2" />
+  </svg>`;
+
 export function updateTopbarChips() {
   if (!state.data) return;
   const board = (state.data.boards || []).find((b) => b.id === state.boardId);
   if (boardMenuBtn) {
-    boardMenuBtn.textContent = board?.name || "Board";
+    const label = board?.name || "Board";
+    boardMenuBtn.innerHTML = `${boardChipIcon}<span class="topbar-chip-label">${escapeHtml(label)}</span>`;
     boardMenuBtn.title = board ? `${board.name} — slug: ${board.slug}` : "Choose board";
   }
 }
@@ -37,7 +51,7 @@ function renderBoardFlyoutInner() {
   const rows = boards
     .map(
       (b) => `
-      <button type="button" class="menu-flyout-item ${b.id === state.boardId ? "is-current" : ""}" data-pick-board="${escapeHtml(b.id)}" role="menuitem">
+      <button type="button" class="menu-flyout-item ${b.id === state.boardId ? "is-current" : ""}" data-variant="menu-item" data-pick-board="${escapeHtml(b.id)}" role="menuitem">
         <span class="menu-flyout-item-title">${escapeHtml(b.name)}</span>
         <span class="menu-flyout-item-meta">${escapeHtml(b.slug)}</span>
       </button>`

package/public/js/create-card.js

@@ -86,7 +86,7 @@ function renderCreateForm(preselectedLaneId) {
         <label>
           Type
           <select id="createTicketType" name="type" class="select-chevron-field" aria-label="Ticket type">
-            <option value="epic">Epic / Story</option>
+            <option value="epic">Epic</option>
             <option value="feature">Feature</option>
             <option value="task" selected>Task</option>
             <option value="bug">Bug</option>

package/public/js/drawer.js

@@ -75,7 +75,7 @@ export function renderDrawerShell({ eyebrow, title, titleAttrs, subtitleHtml, ta
   // last render (e.g. the inline title editor's click handler) die with the
   // old nodes, instead of stacking on persistent shell elements.
   const extraTitleClass = titleAttrs?.class ? ` ${titleAttrs.class}` : "";
-  let titleAttrHtml = ` class="drawer-title-text${extraTitleClass}"`;
+  let titleAttrHtml = ` class="drawer-title drawer-title-text${extraTitleClass}"`;
   for (const [key, value] of Object.entries(titleAttrs || {})) {
     if (key === "class") continue;
     titleAttrHtml += ` ${key}="${escapeHtml(String(value))}"`;

package/public/js/format.js

@@ -389,11 +389,10 @@ export function typeLabel(type) {
   return labels[canonicalTicketType(type)] || "Task";
 }
 
-// Long, hierarchy-aware label for dropdowns where we have the room. Epic/Story
-// pairs older vocabulary so existing terminology still resonates.
+// Long, hierarchy-aware label for dropdowns where we have the room.
 export function typeLabelLong(type) {
   const labels = {
-    epic: "Epic / Story",
+    epic: "Epic",
     feature: "Feature",
     task: "Task",
     bug: "Bug"

package/public/js/kanban.js

@@ -269,17 +269,18 @@ function renderColumn(column, tickets) {
   // are the queue the claim-next MCP tool pulls from. Mark it so humans can
   // instantly see where agent-facing staging lives.
   const isAiReady = column.name === "AI Ready";
-  const columnClasses = ["column"];
+  const columnClasses = ["column", "lane"];
   if (isAiReady) columnClasses.push("column--ai-ready");
+  const accentAttr = isAiReady ? ' data-accent="ai-ready"' : "";
 
   return `
-    <section class="${columnClasses.join(" ")}" data-state-id="${column.id}" data-state-name="${escapeHtml(column.name)}">
-      <div class="column-head">
-        <h2${isAiReady ? ' title="Agent staging — cards here are picked up by the claim-next tool when unblocked"' : ""}>
+    <section class="${columnClasses.join(" ")}" data-flat${accentAttr} data-state-id="${column.id}" data-state-name="${escapeHtml(column.name)}">
+      <div class="column-head lane-head">
+        <h2 class="lane-title"${isAiReady ? ' title="Agent staging — cards here are picked up by the claim-next tool when unblocked"' : ""}>
           ${isAiReady ? '<span class="agent-dot" aria-hidden="true"></span>' : ""}${escapeHtml(column.name)}
         </h2>
-        <div class="column-head-actions">
-          <button type="button" class="column-add-btn ghost" data-add-to-state="${escapeHtml(column.id)}" title="New card">+</button>
+        <div class="column-head-actions lane-actions">
+          <button type="button" class="column-add-btn" data-variant="plus" data-add-to-state="${escapeHtml(column.id)}" title="New card">+</button>
           <span class="count">${columnTickets.length}</span>
         </div>
       </div>
@@ -375,7 +376,7 @@ function renderEpicMiniHeader(epic) {
 export function renderPriorityPill(priority) {
   const key = priorityKeyFor(priority);
   const label = priorityLabel(priority);
-  return `<div class="card-priority-id priority-pill priority-pill-${escapeHtml(key)}"><span class="card-priority-label">${escapeHtml(label)}</span></div>`;
+  return `<div class="card-priority-id priority-pill" data-variant="${escapeHtml(key)}"><span class="card-priority-label">${escapeHtml(label)}</span></div>`;
 }
 
 export function renderTypeIcon(type) {
@@ -434,13 +435,13 @@ function renderCard(ticket, { asEpicChild = false } = {}) {
       : `<span class="card-unread-dot has-count" role="status" aria-label="${unreadN} unread updates">${unreadN > 99 ? "99+" : unreadN}</span>`;
 
   return `
-    <article class="card type-${escapeHtml(canonicalType)} priority-${escapeHtml(priorityKey)}${isExpanded ? " is-expanded" : ""}${asEpicChild ? " is-epic-child" : ""} ${ticket.id === state.selectedTicketId ? "selected" : ""}" draggable="true" data-ticket-id="${ticket.id}">
+    <article class="card type-${escapeHtml(canonicalType)} priority-${escapeHtml(priorityKey)}${isExpanded ? " is-expanded" : ""}${asEpicChild ? " is-epic-child" : ""} ${ticket.id === state.selectedTicketId ? "selected" : ""}" data-variant="${escapeHtml(canonicalType)}" draggable="true" data-ticket-id="${ticket.id}">
       ${unreadDot}
       <h3>${escapeHtml(ticket.title)}</h3>
 
       <div class="card-meta">
         ${hasExpandable
-          ? `<button type="button" class="card-expand-trigger" data-card-toggle aria-expanded="${isExpanded ? "true" : "false"}">${triggerInner}</button>`
+          ? `<button type="button" class="card-expand-trigger" data-variant="card-accordion" data-card-toggle aria-expanded="${isExpanded ? "true" : "false"}">${triggerInner}</button>`
           : `<div class="card-expand-trigger card-expand-trigger--static">${triggerInner}</div>`}
       </div>
 

package/public/js/search.js

@@ -32,7 +32,7 @@ export async function runSearch() {
             <strong>${escapeHtml(ticketLabel(ticket))}</strong>
             <span class="search-hit-title">${escapeHtml(ticket.title)}</span>
           </span>
-          <span class="search-hit-state state-pill-${escapeHtml(stateClassFor(ticket))}">${escapeHtml(ticket.state_name || "State")}</span>
+          <span class="search-hit-state" data-variant="${escapeHtml(stateClassFor(ticket))}">${escapeHtml(ticket.state_name || "State")}</span>
         </div>
       `
     )

package/public/js/settings.js

@@ -242,7 +242,7 @@ function renderMcpSetupSection(context) {
               <strong data-mcp-output-title>${escapeHtml(client.label)} setup</strong>
               <p class="description" data-mcp-helper>${escapeHtml(client.helper)}</p>
             </div>
-            <button type="button" class="ghost" data-copy-mcp="config">Copy setup</button>
+            <button type="button" data-variant="secondary" data-copy-mcp="config">Copy setup</button>
           </div>
           <div class="mcp-terminal">
             <div class="mcp-terminal-chrome" aria-hidden="true"><span></span><span></span><span></span></div>
@@ -258,7 +258,7 @@ function renderMcpSetupSection(context) {
               <strong>Manual run command</strong>
               <p class="description">Use this only when an app asks you to start the MCP server yourself.</p>
             </div>
-            <button type="button" class="ghost" data-copy-mcp="command">Copy command</button>
+            <button type="button" data-variant="secondary" data-copy-mcp="command">Copy command</button>
           </div>
           <div class="mcp-terminal">
             <div class="mcp-terminal-chrome" aria-hidden="true"><span></span><span></span><span></span></div>
@@ -403,11 +403,9 @@ function renderProjectRepositoryTab(context) {
         <p class="description">Image exports are embedded in the .orbit.json snapshot and may be much larger.</p>
       ` : ""}
       <div class="deployment-actions">
-        <button type="button" class="ghost" id="exportProject">Export</button>
-        <label class="import-button">
-          <input type="file" id="importSnapshotAsNewFile" accept=".orbit.json,.json,application/json" />
-          <span>Import as New Board</span>
-        </label>
+        <button type="button" data-variant="secondary" id="exportProject">Export</button>
+        <input type="file" id="importSnapshotAsNewFile" class="import-file-input" accept=".orbit.json,.json,application/json" />
+        <button type="button" data-variant="secondary" id="importSnapshotAsNewButton">Import as New Board</button>
       </div>
     </div>
 
@@ -419,10 +417,8 @@ function renderProjectRepositoryTab(context) {
         <input id="replaceImportConfirmInput" autocomplete="off" spellcheck="false" placeholder="${escapeHtml(project.slug || "")}" />
       </label>
       <div class="deployment-actions">
-        <label class="import-button danger-button">
-          <input type="file" id="replaceCurrentBoardImportFile" accept=".orbit.json,.json,application/json" disabled />
-          <span>Replace Current Board</span>
-        </label>
+        <input type="file" id="replaceCurrentBoardImportFile" class="import-file-input" accept=".orbit.json,.json,application/json" disabled />
+        <button type="button" data-variant="secondary" id="replaceCurrentBoardImportButton" disabled>Replace Current Board</button>
       </div>
     </div>
 
@@ -440,7 +436,7 @@ function renderBoardRenameSection(project) {
           <span>Display name</span>
           <input name="name" value="${escapeHtml(project.name || "")}" maxlength="120" required />
         </label>
-        <button type="submit">Rename Board</button>
+        <button type="submit" data-variant="secondary">Rename Board</button>
       </form>
     </div>
   `;
@@ -454,9 +450,9 @@ function renderDeleteBoardSection(project) {
         <h3>Delete Board</h3>
         <p class="description">Delete this board from Orbit and remove its repo-local Orbit files. Export a snapshot first if you may need this board again.</p>
         <div class="repository-delete-actions">
-          <button type="button" class="ghost" id="deleteBoardExportFirst">Export first</button>
-          <button type="button" class="ghost danger-button" id="deleteBoardSkipExport">Delete without exporting</button>
-          <button type="button" class="ghost" id="deleteBoardCancel">Cancel</button>
+          <button type="button" data-variant="secondary" id="deleteBoardExportFirst">Export first</button>
+          <button type="button" data-variant="ghost" class="danger-button" id="deleteBoardSkipExport">Delete without exporting</button>
+          <button type="button" data-variant="ghost" id="deleteBoardCancel">Cancel</button>
         </div>
       </div>
     `;
@@ -476,8 +472,8 @@ function renderDeleteBoardSection(project) {
           <input id="deleteBoardConfirmInput" autocomplete="off" spellcheck="false" placeholder="${slug}" autofocus />
         </label>
         <div class="repository-delete-actions">
-          <button type="button" class="danger-button" id="deleteBoardConfirm" disabled>Delete board permanently</button>
-          <button type="button" class="ghost" id="deleteBoardCancel">Cancel</button>
+          <button type="button" data-variant="primary" class="danger-button" id="deleteBoardConfirm" disabled>Delete board permanently</button>
+          <button type="button" data-variant="ghost" id="deleteBoardCancel">Cancel</button>
         </div>
       </div>
     `;
@@ -487,7 +483,7 @@ function renderDeleteBoardSection(project) {
     <div class="section repository-danger-zone">
       <h3>Delete Board</h3>
       <p class="description">Remove this board from Orbit and delete its repo-local Orbit files. This cannot be undone without an exported snapshot.</p>
-      <button type="button" class="ghost danger-button" id="deleteBoardStart">Delete Board</button>
+      <button type="button" data-variant="ghost" class="danger-button" id="deleteBoardStart">Delete Board</button>
     </div>
   `;
 }
@@ -536,7 +532,7 @@ function renderProjectLanesTab() {
       ${renderLaneManager()}
       <form id="laneCreateForm" class="lane-create-form">
         <input name="name" placeholder="New lane name..." required />
-        <button type="submit">Add Lane</button>
+        <button type="submit" data-variant="primary">Add Lane</button>
       </form>
     </div>
   `;
@@ -619,7 +615,7 @@ function renderProjectJournalTab(context) {
         </select>
         <input name="title" placeholder="Entry title..." required />
         <textarea name="body" placeholder="Decision rationale or lesson: do X instead of Y when working with Z." required></textarea>
-        <button type="submit">Add Entry</button>
+        <button type="submit" data-variant="primary">Add Entry</button>
       </form>
     </div>
   `;
@@ -675,7 +671,12 @@ function bindProjectTabHandlers(context, tab) {
       });
     };
 
-    $("#importSnapshotAsNewFile")?.addEventListener("change", async (event) => {
+    const importSnapshotAsNewFile = $("#importSnapshotAsNewFile");
+    $("#importSnapshotAsNewButton")?.addEventListener("click", () => {
+      importSnapshotAsNewFile?.click();
+    });
+
+    importSnapshotAsNewFile?.addEventListener("change", async (event) => {
       const input = event.currentTarget;
       const file = input.files?.[0];
       if (!file) return;
@@ -698,8 +699,16 @@ function bindProjectTabHandlers(context, tab) {
 
     const replaceImportConfirmInput = $("#replaceImportConfirmInput");
     const replaceCurrentBoardImportFile = $("#replaceCurrentBoardImportFile");
+    const replaceCurrentBoardImportButton = $("#replaceCurrentBoardImportButton");
     replaceImportConfirmInput?.addEventListener("input", () => {
-      if (replaceCurrentBoardImportFile) replaceCurrentBoardImportFile.disabled = replaceImportConfirmInput.value.trim() !== project.slug;
+      const disabled = replaceImportConfirmInput.value.trim() !== project.slug;
+      if (replaceCurrentBoardImportFile) replaceCurrentBoardImportFile.disabled = disabled;
+      if (replaceCurrentBoardImportButton) replaceCurrentBoardImportButton.disabled = disabled;
+    });
+
+    replaceCurrentBoardImportButton?.addEventListener("click", () => {
+      if (replaceCurrentBoardImportButton.disabled || replaceCurrentBoardImportFile?.disabled) return;
+      replaceCurrentBoardImportFile?.click();
     });
 
     replaceCurrentBoardImportFile?.addEventListener("change", async (event) => {
@@ -1054,7 +1063,8 @@ function renderProjectEntries(entries = []) {
               <span>${escapeHtml(entry.created_by)} - ${formatDate(entry.created_at)}</span>
               <button
                 type="button"
-                class="ghost project-entry-strike"
+                data-variant="ghost"
+                class="project-entry-strike"
                 data-entry-action="toggle-struck"
                 data-entry-id="${escapeHtml(entry.id)}"
                 data-struck="${isStruck ? "true" : "false"}"
@@ -1122,14 +1132,14 @@ function renderLaneManager() {
             : "";
           return `
             <div class="lane-row${isAiReady ? " lane-row--locked" : ""}" data-lane-id="${lane.id}">
-              <button type="button" class="lane-icon-btn" data-lane-action="up" ${index === 0 ? "disabled" : ""} title="Move lane left" aria-label="Move lane left">↑</button>
-              <button type="button" class="lane-icon-btn" data-lane-action="down" ${index === lanes.length - 1 ? "disabled" : ""} title="Move lane right" aria-label="Move lane right">↓</button>
+              <button type="button" data-variant="ghost" class="settings-lane-icon-btn" data-lane-action="up" ${index === 0 ? "disabled" : ""} title="Move lane left" aria-label="Move lane left">↑</button>
+              <button type="button" data-variant="ghost" class="settings-lane-icon-btn" data-lane-action="down" ${index === lanes.length - 1 ? "disabled" : ""} title="Move lane right" aria-label="Move lane right">↓</button>
               <input name="name" value="${escapeHtml(lane.name)}" aria-label="Lane name" ${isAiReady ? `readonly title="${escapeHtml(nameTitle)}"` : ""} />
-              <button type="button" class="lane-new-toggle ${lane.is_default ? "is-on" : ""}" data-lane-action="toggle-default" aria-pressed="${lane.is_default ? "true" : "false"}" title="${lane.is_default ? "Default lane for new cards — click another lane to move it" : "Make this the default lane for new cards"}" aria-label="Default lane for new cards">
+              <button type="button" data-variant="${lane.is_default ? "secondary" : "ghost"}" class="settings-lane-new-toggle ${lane.is_default ? "is-on" : ""}" data-lane-action="toggle-default" aria-pressed="${lane.is_default ? "true" : "false"}" title="${lane.is_default ? "Default lane for new cards — click another lane to move it" : "Make this the default lane for new cards"}" aria-label="Default lane for new cards">
                 <span class="lane-new-sun" aria-hidden="true"></span>
                 <span class="lane-new-label">New</span>
               </button>
-              <button type="button" class="lane-delete-btn" data-lane-action="delete" ${deleteDisabled(lane, counts, aiEnabled) ? "disabled" : ""} title="${deleteTitle(lane, counts, aiEnabled)}" aria-label="Delete lane">×</button>
+              <button type="button" data-variant="ghost" class="settings-lane-delete-btn danger-button" data-lane-action="delete" ${deleteDisabled(lane, counts, aiEnabled) ? "disabled" : ""} title="${deleteTitle(lane, counts, aiEnabled)}" aria-label="Delete lane">×</button>
             </div>
           `;
         })
@@ -1158,9 +1168,11 @@ async function handleLaneAction(button) {
     if (wasOn) return;
     drawerInner.querySelectorAll('[data-lane-action="toggle-default"]').forEach((btn) => {
       btn.setAttribute("aria-pressed", "false");
+      btn.setAttribute("data-variant", "ghost");
       btn.classList.remove("is-on");
     });
     button.setAttribute("aria-pressed", "true");
+    button.setAttribute("data-variant", "secondary");
     button.classList.add("is-on");
     await updateLane(row, { silent: true });
     toast.success("Default lane updated");

package/public/js/ticket-detail.js

@@ -480,9 +480,9 @@ export async function renderDetail(options = {}) {
   const detailSubtitleHtml = `
     <span class="ticket-number">${escapeHtml(ticketLabel(ticket))}</span>
     <div class="detail-meta-badge-row" aria-label="Ticket metadata controls">
-      <select class="detail-meta-badge detail-state-badge state-pill-${escapeHtml(stateClass)} meta-select" data-meta-field="state_id" aria-label="Ticket state">${stateOptions}</select>
+      <select class="detail-meta-badge detail-state-badge meta-select" data-variant="${escapeHtml(stateClass)}" data-meta-field="state_id" aria-label="Ticket state">${stateOptions}</select>
       <select class="detail-meta-badge detail-type-badge type-pill-${escapeHtml(detailCanonicalType)} meta-select" data-meta-field="type" aria-label="Ticket type">${typeOptions}</select>
-      <select class="detail-meta-badge detail-priority-badge priority-pill priority-pill-${escapeHtml(priorityKey)} meta-select" data-meta-field="priority" aria-label="Ticket priority">${priorityOptions}</select>
+      <select class="detail-meta-badge detail-priority-badge priority-pill meta-select" data-variant="${escapeHtml(priorityKey)}" data-meta-field="priority" aria-label="Ticket priority">${priorityOptions}</select>
     </div>
   `;
 
@@ -1110,7 +1110,7 @@ export function renderDetailCard(ticket, options = {}) {
       ? `<span class="card-unread-dot" role="status" aria-label="1 unread update"></span>`
       : `<span class="card-unread-dot has-count" role="status" aria-label="${unreadN} unread updates">${unreadN > 99 ? "99+" : unreadN}</span>`;
   return `
-    <article class="card card--detail type-${escapeHtml(canonicalType)} priority-${escapeHtml(priorityKey)}"${options.disableOpen ? "" : ` data-open-ticket="${escapeHtml(ticket.id)}"`}>
+    <article class="card card--detail type-${escapeHtml(canonicalType)} priority-${escapeHtml(priorityKey)}" data-variant="${escapeHtml(canonicalType)}"${options.disableOpen ? "" : ` data-open-ticket="${escapeHtml(ticket.id)}"`}>
       ${unreadDot}
       ${detachBtn}
       ${eyebrow}
@@ -1122,7 +1122,7 @@ export function renderDetailCard(ticket, options = {}) {
             ${renderTypeIcon(ticket.type)}
             <span class="card-type-label">${escapeHtml(typeText)}</span>
           </div>
-          <span class="detail-card-state state-pill-${escapeHtml(stateClass)}">${escapeHtml(ticket.state_name || "State")}</span>
+          <span class="detail-card-state" data-variant="${escapeHtml(stateClass)}">${escapeHtml(ticket.state_name || "State")}</span>
           ${state.showPriority ? renderPriorityPill(ticket.priority) : ""}
         </div>
       </div>