@grackle-ai/web-components 0.107.2

package/src/utils/taskStatus.tsx

@@ -0,0 +1,137 @@
+/**
+ * Shared task-status metadata: labels, icons, colors, and column order.
+ *
+ * Every view (sidebar, DAG, board, task page) should import from here so that
+ * labels, icons, colors, and ordering stay consistent across the UI.
+ */
+
+import type { ReactNode } from "react";
+import { Ban, Check, Circle, Pause, X } from "lucide-react";
+import { ICON_SM } from "./iconSize.js";
+
+// ---------------------------------------------------------------------------
+// Core types
+// ---------------------------------------------------------------------------
+
+/** Canonical task statuses displayed in the UI. */
+export type TaskStatusKey = "not_started" | "working" | "paused" | "complete" | "failed";
+
+/** Virtual status for tasks with unresolved dependencies. Not stored on the task itself. */
+export type VirtualStatus = "blocked";
+
+/** All statuses the UI may display, including virtual ones. */
+export type DisplayStatus = TaskStatusKey | VirtualStatus;
+
+/** Visual metadata for a single task status. */
+export interface TaskStatusStyle {
+  /** CSS color value (typically a custom-property reference). */
+  color: string;
+  /** Status icon element. */
+  icon: ReactNode;
+  /** Human-readable label. */
+  label: string;
+}
+
+// ---------------------------------------------------------------------------
+// Style map
+// ---------------------------------------------------------------------------
+
+/** Complete style map for every displayable status (canonical + virtual). */
+export const TASK_STATUS_STYLES: Record<DisplayStatus, TaskStatusStyle> = {
+  not_started: { color: "var(--text-tertiary)", icon: <Circle size={ICON_SM} />,                     label: "Not Started" },
+  working:     { color: "var(--accent-green)",  icon: <Circle size={ICON_SM} fill="currentColor" />, label: "Working" },
+  paused:      { color: "var(--accent-yellow)", icon: <Pause size={ICON_SM} />,                      label: "Paused" },
+  complete:    { color: "var(--accent-green)",  icon: <Check size={ICON_SM} />,                      label: "Complete" },
+  failed:      { color: "var(--accent-red)",    icon: <X size={ICON_SM} />,                          label: "Failed" },
+  blocked:     { color: "var(--accent-yellow)", icon: <Ban size={ICON_SM} />,                        label: "Blocked" },
+};
+
+/** Safe accessor — returns a style for any status string, falling back to `not_started`. */
+export function getStatusStyle(status: string): TaskStatusStyle {
+  if (status === "blocked") {
+    return TASK_STATUS_STYLES.blocked;
+  }
+
+  return TASK_STATUS_STYLES[resolveStatus(status)];
+}
+
+// ---------------------------------------------------------------------------
+// CSS-class map for badge-style rendering (TaskPage)
+// ---------------------------------------------------------------------------
+
+/** Maps a canonical status key to a CSS class suffix used for badge coloring. */
+export const STATUS_BADGE_CLASS_MAP: Record<string, string> = {
+  not_started: "statusPending",
+  working: "statusInProgress",
+  paused: "statusWaitingInput",
+  complete: "statusDone",
+  failed: "statusFailed",
+};
+
+/** Resolve a task status to the corresponding badge class key. */
+export function getStatusBadgeClassKey(status: string): string {
+  return STATUS_BADGE_CLASS_MAP[resolveStatus(status)] ?? "statusPending";
+}
+
+// ---------------------------------------------------------------------------
+// Ordering
+// ---------------------------------------------------------------------------
+
+/**
+ * Sidebar group order — includes virtual "blocked" group.
+ * This is the urgency-first ordering used by the sidebar grouped view.
+ */
+export const SIDEBAR_STATUS_ORDER: DisplayStatus[] = [
+  "working", "paused", "failed", "not_started", "blocked", "complete",
+];
+
+/**
+ * Board columns — the five concrete columns shown on the Kanban board.
+ * "blocked" is NOT a column; blocked tasks stay in their original column
+ * with a badge overlay.
+ */
+export const BOARD_COLUMN_ORDER: TaskStatusKey[] = [
+  "not_started", "working", "paused", "complete", "failed",
+];
+
+// ---------------------------------------------------------------------------
+// Alias resolution (legacy proto names → canonical)
+// ---------------------------------------------------------------------------
+
+/** Maps legacy / proto status strings to canonical UI status keys. */
+const STATUS_ALIASES: Record<string, TaskStatusKey> = {
+  pending: "not_started",
+  assigned: "not_started",
+  in_progress: "working",
+  waiting_input: "paused",
+  review: "paused",
+  done: "complete",
+};
+
+/** Resolve a raw status string to a canonical `TaskStatusKey`, treating unknown values as `not_started`. */
+export function resolveStatus(raw: string): TaskStatusKey {
+  if (raw in TASK_STATUS_STYLES && raw !== "blocked") {
+    return raw as TaskStatusKey;
+  }
+  return STATUS_ALIASES[raw] ?? "not_started";
+}
+
+// ---------------------------------------------------------------------------
+// MiniMap color resolution (DagView)
+// ---------------------------------------------------------------------------
+
+/** CSS variable names used for MiniMap node coloring by task status. */
+export const STATUS_CSS_VAR_MAP: Record<string, string> = {
+  not_started: "--text-tertiary",
+  working: "--accent-green",
+  paused: "--accent-yellow",
+  complete: "--accent-green",
+  failed: "--accent-red",
+  // Legacy aliases
+  pending: "--text-tertiary",
+  assigned: "--text-tertiary",
+  in_progress: "--accent-green",
+  review: "--accent-yellow",
+  done: "--accent-green",
+  waiting_input: "--accent-yellow",
+};

package/src/utils/time.ts

@@ -0,0 +1,92 @@
+/**
+ * Formats an ISO timestamp string as a human-readable relative time.
+ *
+ * Examples:
+ *   "just now"   (< 1 minute ago)
+ *   "5m ago"     (< 1 hour ago)
+ *   "2h ago"     (< 24 hours ago)
+ *   "yesterday"  (1–2 days ago)
+ *   "3 days ago" (2–7 days ago)
+ *   "Feb 27"     (> 7 days ago, same year)
+ *   "Feb 27 2025" (different year)
+ */
+export function formatRelativeTime(isoString: string): string {
+  const date = new Date(isoString);
+  const now = new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffSeconds = Math.floor(diffMs / 1000);
+  const diffMinutes = Math.floor(diffSeconds / 60);
+  const diffHours = Math.floor(diffMinutes / 60);
+  const diffDays = Math.floor(diffHours / 24);
+
+  if (diffSeconds < 60) {
+    return "just now";
+  }
+  if (diffMinutes < 60) {
+    return `${diffMinutes}m ago`;
+  }
+  if (diffHours < 24) {
+    return `${diffHours}h ago`;
+  }
+  if (diffDays === 1) {
+    return "yesterday";
+  }
+  if (diffDays < 7) {
+    return `${diffDays} days ago`;
+  }
+
+  // Older than a week — show a short date
+  const sameYear = date.getFullYear() === now.getFullYear();
+  const month = date.toLocaleString("en-US", { month: "short" });
+  const day = date.getDate();
+  return sameYear ? `${month} ${day}` : `${month} ${day} ${date.getFullYear()}`;
+}
+
+/**
+ * Formats an ISO timestamp string as a human-readable countdown to a future event.
+ *
+ * Examples:
+ *   "in 45s"     (< 1 minute away)
+ *   "in 5m"      (< 1 hour away)
+ *   "in 2h"      (< 24 hours away)
+ *   "in 3 days"  (< 7 days away)
+ *   "Feb 27"     (> 7 days away, same year)
+ *
+ * Returns "overdue" if the timestamp is in the past.
+ */
+export function formatCountdown(isoString: string): string {
+  const date = new Date(isoString);
+  if (Number.isNaN(date.getTime())) {
+    return "\u2014";
+  }
+  const now = new Date();
+  const diffMs = date.getTime() - now.getTime();
+
+  if (diffMs <= 0) {
+    return "overdue";
+  }
+
+  const diffSeconds = Math.floor(diffMs / 1000);
+  const diffMinutes = Math.floor(diffSeconds / 60);
+  const diffHours = Math.floor(diffMinutes / 60);
+  const diffDays = Math.floor(diffHours / 24);
+
+  if (diffSeconds < 60) {
+    return `in ${diffSeconds}s`;
+  }
+  if (diffMinutes < 60) {
+    return `in ${diffMinutes}m`;
+  }
+  if (diffHours < 24) {
+    return `in ${diffHours}h`;
+  }
+  if (diffDays < 7) {
+    return `in ${diffDays} day${diffDays === 1 ? "" : "s"}`;
+  }
+
+  // Further out — show a short date
+  const sameYear = date.getFullYear() === now.getFullYear();
+  const month = date.toLocaleString("en-US", { month: "short" });
+  const day = date.getDate();
+  return sameYear ? `${month} ${day}` : `${month} ${day} ${date.getFullYear()}`;
+}

package/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "./node_modules/@grackle-ai/heft-rig/profiles/web/tsconfig-base.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "rootDir": "src"
+  },
+  "include": ["src"]
+}

package/vite.config.ts

@@ -0,0 +1,20 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import { resolve } from "node:path";
+
+export default defineConfig({
+  plugins: [react()],
+  build: {
+    lib: {
+      entry: resolve(__dirname, "src/index.ts"),
+      formats: ["es"],
+      fileName: "index",
+    },
+    rollupOptions: {
+      external: [
+        "react", "react-dom", "react-router", "react/jsx-runtime",
+        /^@grackle-ai\//,
+      ],
+    },
+  },
+});

package/vitest.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+  test: {
+    include: ["src/**/*.test.ts", "src/**/*.test.tsx"],
+    environment: "node",
+    testTimeout: 10_000,
+    isolate: true,
+  },
+});