trekoon 0.3.1 → 0.3.3

package/src/board/assets/runtime/delegation.js

@@ -1,3 +1,5 @@
+import { isValidTransition } from "../state/utils.js";
+
 /**
  * Event delegation system for the board runtime.
  *
@@ -89,6 +91,31 @@ export function createDelegation(rootElement, actions) {
       return;
     }
 
+    // -- Status filter pills ---------------------------------------------------
+    const epicFilterEl = target.closest("[data-toggle-epic-status-filter]");
+    if (epicFilterEl) {
+      actions.toggleEpicStatusFilter(epicFilterEl.dataset.toggleEpicStatusFilter);
+      return;
+    }
+
+    const taskFilterEl = target.closest("[data-toggle-task-status-filter]");
+    if (taskFilterEl) {
+      actions.toggleTaskStatusFilter(taskFilterEl.dataset.toggleTaskStatusFilter);
+      return;
+    }
+
+    const resetEpicFilterEl = target.closest("[data-reset-epic-filter]");
+    if (resetEpicFilterEl) {
+      actions.resetEpicFilter();
+      return;
+    }
+
+    const resetTaskFilterEl = target.closest("[data-reset-task-filter]");
+    if (resetTaskFilterEl) {
+      actions.resetTaskFilter();
+      return;
+    }
+
     // -- Navigation -----------------------------------------------------------
 
     const navEl = target.closest("[data-nav]");
@@ -276,6 +303,15 @@ export function createDelegation(rootElement, actions) {
   // ---------------------------------------------------------------------------
   // Drag-and-drop delegation
   // ---------------------------------------------------------------------------
+  let draggedTaskStatus = null;
+
+  function cleanupDragFeedback() {
+    draggedTaskStatus = null;
+    for (const el of rootElement.querySelectorAll(".board-drop-valid, .board-drop-invalid")) {
+      el.classList.remove("board-drop-valid", "board-drop-invalid");
+    }
+  }
+
   function handleDragstart(event) {
     const draggable = event.target.closest("[data-draggable-task]");
     if (!draggable) return;
@@ -290,11 +326,28 @@ export function createDelegation(rootElement, actions) {
 
     event.dataTransfer?.setData("text/task-id", taskId);
     event.dataTransfer?.setData("text/plain", taskId);
+    draggedTaskStatus = actions.getTaskStatus(taskId);
   }
 
   function handleDragover(event) {
-    if (event.target.closest("[data-drop-status]")) {
+    const column = event.target.closest("[data-drop-status]");
+    if (!column) return;
+
+    const targetStatus = column.dataset.dropStatus;
+    if (draggedTaskStatus && isValidTransition(draggedTaskStatus, targetStatus)) {
       event.preventDefault();
+      column.classList.add("board-drop-valid");
+      column.classList.remove("board-drop-invalid");
+    } else if (draggedTaskStatus && targetStatus !== draggedTaskStatus) {
+      column.classList.add("board-drop-invalid");
+      column.classList.remove("board-drop-valid");
+    }
+  }
+
+  function handleDragleave(event) {
+    const column = event.target.closest("[data-drop-status]");
+    if (column && !column.contains(event.relatedTarget)) {
+      column.classList.remove("board-drop-valid", "board-drop-invalid");
     }
   }
 
@@ -309,7 +362,18 @@ export function createDelegation(rootElement, actions) {
       event.dataTransfer?.getData("text/task-id") ||
       event.dataTransfer?.getData("text/plain");
     const nextStatus = column.dataset.dropStatus;
+
+    if (draggedTaskStatus && !isValidTransition(draggedTaskStatus, nextStatus)) {
+      cleanupDragFeedback();
+      return;
+    }
+
     actions.dropTaskStatus(taskId, nextStatus);
+    cleanupDragFeedback();
+  }
+
+  function handleDragend() {
+    cleanupDragFeedback();
   }
 
   // ---------------------------------------------------------------------------
@@ -321,7 +385,9 @@ export function createDelegation(rootElement, actions) {
   rootElement.addEventListener("submit", handleSubmit);
   rootElement.addEventListener("dragstart", handleDragstart);
   rootElement.addEventListener("dragover", handleDragover);
+  rootElement.addEventListener("dragleave", handleDragleave);
   rootElement.addEventListener("drop", handleDrop);
+  rootElement.addEventListener("dragend", handleDragend);
   rootElement.addEventListener("keydown", handleDelegatedKeydown);
   window.addEventListener("keydown", handleKeydown);
 
@@ -335,7 +401,9 @@ export function createDelegation(rootElement, actions) {
     rootElement.removeEventListener("submit", handleSubmit);
     rootElement.removeEventListener("dragstart", handleDragstart);
     rootElement.removeEventListener("dragover", handleDragover);
+    rootElement.removeEventListener("dragleave", handleDragleave);
     rootElement.removeEventListener("drop", handleDrop);
+    rootElement.removeEventListener("dragend", handleDragend);
     rootElement.removeEventListener("keydown", handleDelegatedKeydown);
     window.removeEventListener("keydown", handleKeydown);
   };

package/src/board/assets/state/actions.js

@@ -1,5 +1,5 @@
 import { copyTextToClipboard } from "../runtime/clipboard.js";
-import { orderEpicsNewestFirst } from "./store.js";
+import { DEFAULT_STATUS_FILTER, orderEpicsNewestFirst } from "./store.js";
 
 function cloneSnapshot(snapshot) {
   if (typeof structuredClone === "function") {
@@ -404,6 +404,10 @@ export function createBoardActions(options) {
     removeDependency(sourceId, dependsOnId) {
       api.removeDependency(sourceId, dependsOnId, (snapshot) => removeDependencyInSnapshot(snapshot, sourceId, dependsOnId, normalizeSnapshot));
     },
+    getTaskStatus(taskId) {
+      const task = getTaskById(taskId);
+      return task?.status ?? null;
+    },
     dropTaskStatus(taskId, nextStatus) {
       const task = getTaskById(taskId);
       if (!task || !nextStatus || task.status === nextStatus) {
@@ -426,6 +430,28 @@ export function createBoardActions(options) {
         cascadeEpicStatusInSnapshot(snapshot, epicId, normalizedStatus, normalizeSnapshot),
       );
     },
+    toggleEpicStatusFilter(status) {
+      const current = store.epicStatusFilter || { ...DEFAULT_STATUS_FILTER };
+      store.epicStatusFilter = { ...current, [status]: !current[status] };
+      persist();
+      rerender();
+    },
+    toggleTaskStatusFilter(status) {
+      const current = store.taskStatusFilter || { ...DEFAULT_STATUS_FILTER };
+      store.taskStatusFilter = { ...current, [status]: !current[status] };
+      persist();
+      rerender();
+    },
+    resetEpicFilter() {
+      store.epicStatusFilter = { ...DEFAULT_STATUS_FILTER };
+      persist();
+      rerender();
+    },
+    resetTaskFilter() {
+      store.taskStatusFilter = { ...DEFAULT_STATUS_FILTER };
+      persist();
+      rerender();
+    },
     handleKeydown(event) {
       const boardState = getBoardState();
       const activeElement = document.activeElement;

package/src/board/assets/state/store.js

@@ -9,6 +9,18 @@ function normalizeSearch(value) {
 
 // --- Persistence helpers ---
 
+export const DEFAULT_STATUS_FILTER = { todo: true, blocked: true, in_progress: true, done: false };
+
+function readStatusFilter(raw) {
+  if (typeof raw !== "object" || raw === null) return { ...DEFAULT_STATUS_FILTER };
+  return {
+    todo: typeof raw.todo === "boolean" ? raw.todo : DEFAULT_STATUS_FILTER.todo,
+    blocked: typeof raw.blocked === "boolean" ? raw.blocked : DEFAULT_STATUS_FILTER.blocked,
+    in_progress: typeof raw.in_progress === "boolean" ? raw.in_progress : DEFAULT_STATUS_FILTER.in_progress,
+    done: typeof raw.done === "boolean" ? raw.done : DEFAULT_STATUS_FILTER.done,
+  };
+}
+
 export function readStoredState() {
   try {
     return JSON.parse(localStorage.getItem(STATE_STORAGE_KEY) || "{}");
@@ -77,13 +89,25 @@ export function orderEpicsNewestFirst(epics) {
 
 // --- Derived state selectors ---
 
+/** Recently-done epics stay visible for 24h even when the "done" filter is off. */
+const DONE_GRACE_PERIOD_MS = 86400000;
+
 const selectVisibleEpics = createSelector(
-  (s) => [s.snapshot?.epics, s.searchQuery],
-  (epics, searchQuery) => {
+  (s) => [s.snapshot?.epics, s.searchQuery, s.epicStatusFilter],
+  (epics, searchQuery, epicStatusFilter) => {
     if (!epics) return [];
+    const now = Date.now();
+    const filtered = epics.filter((epic) => {
+      if (epic.status === "done") {
+        if (!epicStatusFilter.done && (now - epic.updatedAt) > DONE_GRACE_PERIOD_MS) return false;
+      } else if (!epicStatusFilter[epic.status]) {
+        return false;
+      }
+      return true;
+    });
     const matchingEpics = searchQuery.length === 0
-      ? epics
-      : epics.filter((epic) => epic.searchText.includes(searchQuery));
+      ? filtered
+      : filtered.filter((epic) => epic.searchText.includes(searchQuery));
 
     return orderEpicsNewestFirst(matchingEpics);
   },
@@ -100,11 +124,12 @@ const selectTasksInScope = createSelector(
 );
 
 const selectVisibleTasks = createSelector(
-  (s) => [selectTasksInScope(s), s.searchQuery],
-  (tasksInScope, searchQuery) => {
+  (s) => [selectTasksInScope(s), s.searchQuery, s.taskStatusFilter],
+  (tasksInScope, searchQuery, taskStatusFilter) => {
+    const filtered = tasksInScope.filter((task) => taskStatusFilter[task.status]);
     return searchQuery.length === 0
-      ? tasksInScope
-      : tasksInScope.filter((task) => task.searchText.includes(searchQuery));
+      ? filtered
+      : filtered.filter((task) => task.searchText.includes(searchQuery));
   },
 );
 
@@ -287,6 +312,8 @@ export function createStore(initialSnapshot, options = {}) {
     notice: null,
     isMutating: false,
     notesPanelOpen: storedState.notesPanelOpen === true,
+    epicStatusFilter: readStatusFilter(storedState.epicStatusFilter),
+    taskStatusFilter: readStatusFilter(storedState.taskStatusFilter),
   };
 
   /** @type {Set<(state: object) => void>} */
@@ -306,6 +333,8 @@ export function createStore(initialSnapshot, options = {}) {
         view: state.view,
         selectedTaskId: state.selectedTaskId,
         notesPanelOpen: state.notesPanelOpen,
+        epicStatusFilter: state.epicStatusFilter,
+        taskStatusFilter: state.taskStatusFilter,
       });
   }
 

package/src/board/assets/state/utils.js

@@ -143,7 +143,7 @@ export function normalizeSnapshot(rawSnapshot) {
       id: epicId,
       title: String(epic.title ?? "Untitled epic"),
       description: String(epic.description ?? "").replace(/\\n/g, "\n"),
-      status: String(epic.status ?? "todo"),
+      status: normalizeStatus(String(epic.status ?? "todo")),
       createdAt: Number(epic.createdAt ?? Date.now()),
       updatedAt: Number(epic.updatedAt ?? epic.createdAt ?? Date.now()),
       taskIds: epicTasks.map((task) => task.id),
@@ -220,3 +220,45 @@ export function escapeHtml(value) {
     .replaceAll(">", ">")
     .replaceAll('"', """);
 }
+
+/**
+ * Valid status transitions mirroring the backend state machine (src/domain/types.ts).
+ * @type {Map<string, Set<string>>}
+ */
+export const VALID_TRANSITIONS = new Map([
+  ["todo", new Set(["in_progress", "blocked"])],
+  ["in_progress", new Set(["done", "blocked"])],
+  ["blocked", new Set(["in_progress", "todo"])],
+  ["done", new Set(["in_progress"])],
+]);
+
+/**
+ * Get the list of statuses a node can transition to from its current status.
+ * @param {string} currentStatus
+ * @returns {string[]}
+ */
+export function getValidTargets(currentStatus) {
+  const targets = VALID_TRANSITIONS.get(currentStatus);
+  return targets ? Array.from(targets) : [];
+}
+
+/**
+ * Check whether transitioning from one status to another is valid.
+ * @param {string} from
+ * @param {string} to
+ * @returns {boolean}
+ */
+export function isValidTransition(from, to) {
+  const targets = VALID_TRANSITIONS.get(from);
+  return targets ? targets.has(to) : false;
+}
+
+/**
+ * Return the current status plus all valid targets, useful for populating
+ * status select dropdowns.
+ * @param {string} currentStatus
+ * @returns {string[]}
+ */
+export function getSelectableStatuses(currentStatus) {
+  return [currentStatus, ...getValidTargets(currentStatus)];
+}

package/src/board/assets/styles/board.css

@@ -1929,3 +1929,71 @@ textarea,
 .\!px-2 { padding-inline: 0.5rem !important; }
 .\!text-xs { font-size: 0.75rem !important; line-height: 1rem !important; }
 .\!min-h-0 { min-height: 0 !important; }
+
+/* --- Drag-and-drop transition feedback --- */
+.board-drop-valid {
+  outline: 2px solid var(--board-accent);
+  outline-offset: -2px;
+  background: rgba(var(--board-accent-rgb, 99, 102, 241), 0.06);
+}
+
+.board-drop-invalid {
+  outline: 2px dashed rgba(239, 68, 68, 0.4);
+  outline-offset: -2px;
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/* --- Filter pills --- */
+.board-filter-bar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.375rem;
+  margin-top: 0.75rem;
+}
+
+.board-filter-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.25rem 0.75rem;
+  border-radius: 9999px;
+  border: 1px solid var(--board-border);
+  background: var(--board-surface-2);
+  color: var(--board-text-muted);
+  font-size: 0.6875rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.14em;
+  cursor: pointer;
+  transition: opacity 0.2s, border-color 0.2s, background 0.2s;
+  user-select: none;
+}
+
+.board-filter-pill:hover {
+  border-color: var(--board-border-strong);
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.board-filter-pill:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--board-border-strong);
+}
+
+.board-filter-pill--active {
+  opacity: 1;
+}
+
+.board-filter-pill--inactive {
+  opacity: 0.4;
+}
+
+.board-filter-pill--reset {
+  color: var(--board-accent);
+  border-color: var(--board-accent);
+}
+
+.board-filter-pill--reset:hover {
+  background: rgba(var(--board-accent-rgb, 99, 102, 241), 0.1);
+}

package/src/commands/arg-parser.ts

@@ -42,6 +42,7 @@ export interface ParsedCompactFields {
 }
 
 const LONG_PREFIX = "--";
+const SHORT_FLAG_PATTERN = /^-([A-Za-z])$/u;
 
 export function parseArgs(args: readonly string[]): ParsedArgs {
   const positional: string[] = [];
@@ -57,6 +58,15 @@ export function parseArgs(args: readonly string[]): ParsedArgs {
       continue;
     }
 
+    // Short flag: single dash + single letter (e.g. -g).
+    const shortMatch = SHORT_FLAG_PATTERN.exec(token);
+    if (shortMatch) {
+      const key: string = shortMatch[1]!;
+      flags.add(key);
+      providedOptions.push(key);
+      continue;
+    }
+
     if (!token.startsWith(LONG_PREFIX)) {
       positional.push(token);
       continue;

package/src/commands/help.ts

@@ -30,7 +30,8 @@ const ROOT_HELP = [
   "  migrate      Migration status and rollback commands",
   "  session      One-call agent orientation (diagnostics + sync + next task)",
   "  sync         Cross-branch sync commands",
-  "  skills       Project-local skill install/update/link",
+  "  skills       Skill install/update/link (local and global)",
+  "  update       Alias for skills update",
 ].join("\n");
 
 const INIT_HELP = [
@@ -385,31 +386,46 @@ const SESSION_HELP = [
 const SKILLS_HELP = [
   "Usage:",
   "  trekoon skills install [--link --editor opencode|claude|pi] [--to <path>] [--allow-outside-repo]",
+  "  trekoon skills install -g|--global [--editor opencode|claude|pi]",
   "  trekoon skills update",
   "",
   "Purpose:",
-  "  Install or refresh the project-local Trekoon skill asset.",
+  "  Install or refresh the Trekoon skill asset locally or globally.",
   "",
-  "Install behavior:",
-  "  - Always installs canonical file to:",
-  "      <cwd>/.agents/skills/trekoon/SKILL.md",
+  "Local install behavior (default):",
+  "  - Creates a directory symlink at <cwd>/.agents/skills/trekoon pointing to",
+  "    the bundled package source, so the skill always matches the installed version.",
   "  - Use --link to also create an editor symlink named 'trekoon'.",
   "  - --editor is required when --link is used (opencode|claude|pi).",
   "  - --to overrides the symlink root for --link only.",
   "  - Without --allow-outside-repo, link targets must resolve inside repo.",
   "  - --allow-outside-repo requires --link and disables that boundary check.",
   "",
+  "Global install behavior (-g|--global):",
+  "  - Creates a global anchor symlink at ~/.agents/skills/trekoon pointing to",
+  "    the bundled package source.",
+  "  - Creates per-editor symlinks under each editor's global skills directory",
+  "    (~/.claude/skills/, ~/.config/opencode/skills/, ~/.pi/skills/).",
+  "  - Use --editor to install for a single editor only.",
+  "",
   "Update behavior:",
-  "  - Refreshes canonical SKILL file in the install path above.",
-  "  - Auto-creates or refreshes editor symlinks when editor config dir exists.",
-  "  - Skips editors with no config dir or conflicting paths.",
+  "  - Probes and repairs both global and local anchor/editor symlinks.",
+  "  - Reports per-entry status: ok, repointed, created, migrated, skipped.",
+  "  - Skips entries that are not installed; creates local editor links when",
+  "    the editor config dir exists.",
+  "",
+  "Alias:",
+  "  trekoon update → trekoon skills update",
   "",
   "Examples:",
   "  trekoon skills install",
+  "  trekoon skills install -g",
+  "  trekoon skills install --global --editor claude",
   "  trekoon skills install --link --editor opencode",
   "  trekoon skills install --link --editor claude --to .claude/skills",
   "  trekoon skills install --link --editor pi --to ../shared/skills --allow-outside-repo",
   "  trekoon skills update",
+  "  trekoon update",
 ].join("\n");
 
 const COMMAND_HELP: Record<string, string> = {
@@ -426,6 +442,7 @@ const COMMAND_HELP: Record<string, string> = {
   migrate: MIGRATE_HELP,
   sync: SYNC_HELP,
   skills: SKILLS_HELP,
+  update: "Usage: trekoon update [--json|--toon]\n\nAlias for: trekoon skills update\n\nProbes and repairs all installed global and local skill symlinks.",
   help: "Usage: trekoon help [command] [--json|--toon]",
 };