@ikenga/pkg-tasks 0.2.0

package/dist/features/tasks/tasks-view.js

@@ -0,0 +1,361 @@
+// Tasks main view — ported from views/TasksView.tsx. List + filter bar +
+// grouped rows + master/detail split + in-body view switcher (Tasks/Agenda/
+// Triage) with localStorage persistence.
+
+import { html, cn, Icon, Button, useState, useMemo, useEffect, useQuery } from '../../lib/ui.js';
+import { hostDbQuery, hostSendToActiveSession, isStandalone } from '../../lib/bridge.js';
+import { queryKeys } from '../../lib/query-keys.js';
+import { TASKS_LIST_COLUMNS, triageCountsQuery } from '../../lib/queries.js';
+import { groupTasks } from '../../lib/shared.js';
+import { TaskRow } from './task-row.js';
+import { TaskDetailPane } from './task-detail-pane.js';
+import { ViewTabs } from './view-tabs.js';
+import { AgendaView } from './agenda-view.js';
+import { TriageView } from './triage-view.js';
+
+/** @typedef {import('../../lib/queries.js').Task} Task */
+/** @typedef {import('../../lib/queries.js').TaskStatus} TaskStatus */
+/** @typedef {import('../../lib/shared.js').GroupKey} GroupKey */
+/** @typedef {import('../../lib/shared.js').TaskView} TaskView */
+
+const VIEW_STORAGE_KEY = 'ikenga-tasks-view';
+
+/** @returns {TaskView} */
+function loadView() {
+  try {
+    const v = localStorage.getItem(VIEW_STORAGE_KEY);
+    if (v === 'tasks' || v === 'agenda' || v === 'triage') return v;
+  } catch {
+    /* localStorage unavailable (sandboxed iframe) — fall through */
+  }
+  return 'tasks';
+}
+
+/** @type {Array<{ value: '' | TaskStatus, label: string }>} */
+const STATUS_OPTIONS = [
+  { value: '', label: 'Open' },
+  { value: 'pending', label: 'Pending' },
+  { value: 'in_progress', label: 'In progress' },
+  { value: 'blocked', label: 'Blocked' },
+  { value: 'completed', label: 'Completed' },
+];
+
+/** @param {{ activeFeature?: string | null }} props */
+export function TasksView({ activeFeature } = {}) {
+  /** @type {[string | null, (v: string | null) => void]} */
+  const [selectedId, setSelectedId] = useState(/** @type {string | null} */ (null));
+  /** @type {['' | TaskStatus, (v: '' | TaskStatus) => void]} */
+  const [statusFilter, setStatusFilter] = useState(/** @type {'' | TaskStatus} */ (''));
+  const [ownerFilter, setOwnerFilter] = useState('');
+  const [categoryFilter, setCategoryFilter] = useState('');
+  const [search, setSearch] = useState('');
+  const [showAutoClosed, setShowAutoClosed] = useState(true);
+  /** @type {[Set<GroupKey>, (f: (prev: Set<GroupKey>) => Set<GroupKey>) => void]} */
+  const [collapsed, setCollapsed] = useState(/** @type {Set<GroupKey>} */ (new Set(['later'])));
+  const [view, setView] = useState(loadView);
+
+  /** @param {TaskView} v */
+  function changeView(v) {
+    setView(v);
+    try {
+      localStorage.setItem(VIEW_STORAGE_KEY, v);
+    } catch {
+      /* ignore */
+    }
+  }
+
+  // Shell side-menu selection (host.pkg.setMenu → royaltiSuite.activeFeature).
+  // View ids switch the mounted view; `f:<group>` filter ids jump the Tasks
+  // list to that group (expanding it, surfacing auto-closed when relevant).
+  useEffect(() => {
+    if (!activeFeature) return;
+    if (activeFeature === 'tasks' || activeFeature === 'agenda' || activeFeature === 'triage') {
+      setView(activeFeature);
+      return;
+    }
+    if (activeFeature.startsWith('f:')) {
+      const key = /** @type {GroupKey} */ (activeFeature.slice(2)); // today|overdue|autoclosed
+      setView('tasks');
+      if (key === 'autoclosed') setShowAutoClosed(true);
+      setCollapsed((prev) => {
+        const next = new Set(prev);
+        next.delete(key);
+        return next;
+      });
+      // Defer so the Tasks view + group are mounted before we scroll to it.
+      requestAnimationFrame(() => {
+        const el = document.querySelector(`.tk-list [data-group="${key}"]`);
+        if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
+      });
+    }
+  }, [activeFeature]);
+
+  // Server-side health counts — drive the Triage tab badge (and the Triage
+  // view's stat cards), correct independent of the list filter + 200-row cap.
+  const { data: triageCounts } = useQuery(triageCountsQuery());
+  const triageBadge = triageCounts ? triageCounts.needsAttention : null;
+
+  const { data, isLoading, error } = useQuery({
+    queryKey: queryKeys.tasks.list(
+      `${statusFilter || 'open'}|${ownerFilter}|${categoryFilter}|${showAutoClosed ? 'ac' : 'no-ac'}`,
+    ),
+    /** @returns {Promise<Task[]>} */
+    queryFn: async () => {
+      /** @type {string[]} */
+      const where = [];
+      /** @type {(string|number|null)[]} */
+      const params = [];
+
+      if (statusFilter) {
+        where.push('status = ?');
+        params.push(statusFilter);
+      } else if (showAutoClosed) {
+        // active OR (completed AND auto-closed by task-health) — the `%` lives
+        // in the LIKE pattern param, not the SQL text.
+        where.push(
+          "(status IN ('pending','in_progress','blocked') OR (status = 'completed' AND outcome_notes LIKE ?))",
+        );
+        params.push('Auto-closed by task-health%');
+      } else {
+        where.push("status IN ('pending','in_progress','blocked')");
+      }
+      if (ownerFilter) {
+        where.push('assigned_to = ?');
+        params.push(ownerFilter);
+      }
+      if (categoryFilter) {
+        where.push('category = ?');
+        params.push(categoryFilter);
+      }
+      if (search.trim()) {
+        where.push('title LIKE ?'); // SQLite LIKE is case-insensitive (ASCII) ≈ ilike
+        params.push(`%${search.trim()}%`);
+      }
+
+      const sql =
+        `SELECT ${TASKS_LIST_COLUMNS} FROM tasks` +
+        (where.length ? ` WHERE ${where.join(' AND ')}` : '') +
+        ' ORDER BY due_date ASC NULLS LAST, created_at DESC LIMIT 200';
+
+      const rows = await hostDbQuery(sql, params);
+      return /** @type {Task[]} */ (rows);
+    },
+  });
+
+  const groups = useMemo(
+    () => (data ? groupTasks(data, showAutoClosed) : []),
+    [data, showAutoClosed],
+  );
+
+  const openCount = useMemo(
+    () => data?.filter((t) => t.status !== 'completed' && t.status !== 'cancelled').length ?? 0,
+    [data],
+  );
+  const autoClosedCount = useMemo(
+    () =>
+      data?.filter(
+        (t) =>
+          t.status === 'completed' &&
+          !!t.outcome_notes &&
+          t.outcome_notes.startsWith('Auto-closed by task-health'),
+      ).length ?? 0,
+    [data],
+  );
+
+  const filterActive = !!statusFilter || !!ownerFilter || !!categoryFilter || !!search.trim();
+
+  const [creating, setCreating] = useState(false);
+
+  // Create = dispatch, NOT anon insert. Anon RLS on `tasks` only grants UPDATE
+  // of status/completed_at — never INSERT — so a new task cannot be written
+  // client-side. Instead we seed a user turn into the shell's active Claude
+  // session (host.sendToActiveSession); the agent creates the task via its
+  // privileged path. Disabled in standalone (no host to dispatch to).
+  async function createTask() {
+    if (creating || isStandalone()) return;
+    setCreating(true);
+    try {
+      await hostSendToActiveSession(
+        'Create a new task. Ask me for the title, owner, priority, and due date, then add it to the tasks table.',
+      );
+    } catch (e) {
+      console.warn('[tasks] create dispatch failed', e);
+    } finally {
+      setCreating(false);
+    }
+  }
+
+  /** @param {GroupKey} key */
+  function toggleGroup(key) {
+    setCollapsed((prev) => {
+      const next = new Set(prev);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      return next;
+    });
+  }
+
+  return html`
+    <div class="tk-screen">
+      <div class="tk-frame" style=${{ flex: 1 }}>
+        <div class="tk-frame-head">
+          <div class="tk-frame-title-wrap">
+            <${Icon} name="check-square" size=${18} className="tk-frame-title-mark" />
+            <div>
+              <h2 class="tk-frame-title">
+                Tasks
+                <span class="tk-frame-count">(${openCount} open · ${autoClosedCount} auto-closed)</span>
+              </h2>
+              <div class="tk-frame-sub">
+                Cross-cutting work — humans + agents. Click a row to inspect.
+              </div>
+            </div>
+          </div>
+          <div style=${{ display: 'flex', gap: 6, alignItems: 'center' }}>
+            <${Button}
+              size="sm"
+              type="button"
+              disabled=${creating || isStandalone()}
+              title=${isStandalone() ? 'Dispatch unavailable in standalone preview' : 'Dispatch a task to your Chi'}
+              onClick=${createTask}
+            >
+              <${Icon} name=${creating ? 'loader' : 'plus'} size=${12} className=${creating ? 'tk-spin' : undefined} />
+              ${creating ? 'Dispatching…' : 'New task'}
+            </${Button}>
+          </div>
+        </div>
+
+        ${isStandalone() &&
+        html`<${ViewTabs} view=${view} onChange=${changeView} triageCount=${triageBadge} />`}
+
+        ${view === 'agenda' && html`<${AgendaView} tasks=${data ?? []} filterActive=${filterActive} />`}
+        ${view === 'triage' && html`<${TriageView} listTasks=${data ?? []} />`}
+
+        ${view === 'tasks' && html`
+          <div class="tk-filterbar">
+            <div class="input-search-wrap">
+              <${Icon} name="search" size=${13} />
+              <input
+                type="text"
+                value=${search}
+                onInput=${(e) => setSearch(e.target.value)}
+                placeholder="Search title…"
+              />
+            </div>
+            <span class="label">Status</span>
+            <select
+              value=${statusFilter}
+              onChange=${(e) => setStatusFilter(/** @type {'' | TaskStatus} */ (e.target.value))}
+            >
+              ${STATUS_OPTIONS.map((o) => html`<option key=${o.value} value=${o.value}>${o.label}</option>`)}
+            </select>
+            <span class="label">Owner</span>
+            <select value=${ownerFilter} onChange=${(e) => setOwnerFilter(e.target.value)}>
+              <option value="">Anyone</option>
+              <option value="nedjamez">Me</option>
+              <option value="cfo-agent">cfo-agent</option>
+              <option value="cmo-agent">cmo-agent</option>
+              <option value="cto-agent">cto-agent</option>
+              <option value="cpo-agent">cpo-agent</option>
+              <option value="vp-sales-agent">vp-sales-agent</option>
+              <option value="blog-writer">blog-writer</option>
+            </select>
+            <span class="label">Category</span>
+            <select value=${categoryFilter} onChange=${(e) => setCategoryFilter(e.target.value)}>
+              <option value="">All</option>
+              <option value="sales">sales</option>
+              <option value="finance">finance</option>
+              <option value="marketing">marketing</option>
+              <option value="technical">technical</option>
+              <option value="product">product</option>
+              <option value="communication">communication</option>
+              <option value="operations">operations</option>
+            </select>
+            <button
+              type="button"
+              class=${cn('tk-toggle', showAutoClosed && 'is-on')}
+              onClick=${() => setShowAutoClosed((v) => !v)}
+            >
+              <span class="checkbox"></span>
+              Show auto-closed
+            </button>
+            <div class="spacer"></div>
+            <span class="label">${openCount} open · ${autoClosedCount} auto-closed</span>
+          </div>
+
+          <div class="tk-split">
+            <div class="tk-list">
+              ${isLoading && html`
+                <div class="tk-loading">
+                  <${Icon} name="loader" size=${16} className="tk-spin" />
+                  Loading…
+                </div>
+              `}
+              ${error instanceof Error && html`
+                <div class="tk-error">
+                  <${Icon} name="alert-circle" size=${16} />
+                  <div>
+                    <p class="t">Failed to load tasks</p>
+                    <p class="d">${error.message}</p>
+                  </div>
+                </div>
+              `}
+              ${data && data.length === 0 && !isLoading && html`
+                <div class="tk-empty-box">No tasks match.</div>
+              `}
+              ${groups.map((g) => {
+                const isCollapsed = collapsed.has(g.key);
+                return html`
+                  <div key=${g.key}>
+                    <div
+                      role="button"
+                      tabIndex=${0}
+                      aria-expanded=${!isCollapsed}
+                      data-group=${g.key}
+                      class=${cn(
+                        'tk-group-head',
+                        g.key === 'overdue' && 'is-overdue',
+                        g.key === 'autoclosed' && 'is-autoclosed',
+                        isCollapsed && 'is-collapsed',
+                      )}
+                      onClick=${() => toggleGroup(g.key)}
+                      onKeyDown=${(e) => {
+                        if (e.key === 'Enter' || e.key === ' ') {
+                          e.preventDefault();
+                          toggleGroup(g.key);
+                        }
+                      }}
+                    >
+                      <span class="tk-group-label">
+                        <${Icon} name="chevron-down" size=${10} className="chev" />
+                        ${g.label}
+                      </span>
+                      <span class="ct">${g.tasks.length}</span>
+                    </div>
+                    ${!isCollapsed &&
+                    g.tasks.map((t) => html`
+                      <${TaskRow}
+                        key=${t.id}
+                        task=${t}
+                        selected=${selectedId === t.id}
+                        onSelect=${setSelectedId}
+                      />
+                    `)}
+                  </div>
+                `;
+              })}
+            </div>
+
+            <div class="tk-divider"></div>
+
+            <div class="tk-detail">
+              ${selectedId
+                ? html`<${TaskDetailPane} taskId=${selectedId} density="full" onNavigateTask=${setSelectedId} />`
+                : html`<div class="tk-empty">Select a task</div>`}
+            </div>
+          </div>
+        `}
+      </div>
+    </div>
+  `;
+}

package/dist/features/tasks/triage-view.js

@@ -0,0 +1,124 @@
+// Triage / Health view — ported from routes/tasks/_components/-triage-view.tsx.
+
+import { html, cn, useMemo, useQuery } from '../../lib/ui.js';
+import { triageCountsQuery } from '../../lib/queries.js';
+import {
+  assigneeIsAgent,
+  avatarInitial,
+  buildTriage,
+  dueLabel,
+  priorityClass,
+  relativeAgo,
+} from '../../lib/shared.js';
+
+/** @typedef {import('../../lib/queries.js').Task} Task */
+/** @typedef {import('../../lib/queries.js').TriageCounts} TriageCounts */
+/** @typedef {import('../../lib/shared.js').TriageBucketKey} TriageBucketKey */
+
+/** @type {Array<{ key: TriageBucketKey, label: string, sub: string, cls: string }>} */
+const STAT_META = [
+  { key: 'overdue', label: 'Overdue', sub: 'past due', cls: 'is-danger' },
+  { key: 'stale', label: 'Stale > 7d', sub: 'no activity', cls: 'is-warn' },
+  { key: 'unassigned', label: 'Unassigned', sub: 'no owner', cls: 'is-sys' },
+  { key: 'blocked', label: 'Blocked', sub: 'awaiting dep', cls: 'is-danger' },
+];
+
+/** @param {{ task: Task }} props */
+function MiniRow({ task }) {
+  const isAgent = assigneeIsAgent(task);
+  const due = dueLabel(task.due_date);
+  const stale = relativeAgo(task.updated_at);
+  return html`
+    <div class="tr-mini">
+      <span class=${cn('pri-dot', priorityClass(task.priority))}></span>
+      <span class="title">${task.title}</span>
+      ${task.assigned_to
+        ? html`
+            <span class=${cn('tk-assignee', isAgent && 'is-agent')}>
+              ${isAgent
+                ? html`<span class="dot"></span>`
+                : html`<span class="avatar">${avatarInitial(task.assigned_to)}</span>`}
+              ${task.assigned_to}
+            </span>
+          `
+        : html`<span class="tk-execmode is-approval_required">needs owner</span>`}
+      <span class=${cn('age', due.cls === 'is-overdue' && 'is-bad')}>
+        ${due.cls === 'is-overdue' ? due.label : stale}
+      </span>
+    </div>
+  `;
+}
+
+/** @param {{ listTasks: Task[] }} props */
+export function TriageView({ listTasks }) {
+  const { data: counts } = useQuery(triageCountsQuery());
+  const buckets = useMemo(() => buildTriage(listTasks), [listTasks]);
+
+  /** @param {TriageBucketKey} k @returns {number|null} */
+  const countFor = (k) => (counts ? counts[k] : null);
+  const needAttention = counts ? counts.needsAttention : null;
+
+  return html`
+    <div class="tr-wrap">
+      <div class="tr-stats">
+        ${STAT_META.map((s) => {
+          const n = countFor(s.key);
+          return html`
+            <div key=${s.key} class=${cn('tr-stat', s.cls)}>
+              <div class="n">${n ?? '—'}</div>
+              <div class="k">${s.label}</div>
+              <div class="sub">${s.sub}</div>
+            </div>
+          `;
+        })}
+      </div>
+
+      ${buckets.map((b) => {
+        const total = countFor(b.key);
+        if (b.sample.length === 0 && (total == null || total === 0)) return null;
+        return html`
+          <div key=${b.key} class="tr-bucket">
+            <div class="tr-bucket-head">
+              ${b.label}
+              <span class="ct">${total ?? b.sample.length}</span>
+            </div>
+            ${b.sample.length > 0
+              ? html`
+                  ${b.sample.map((t) => html`<${MiniRow} key=${t.id} task=${t} />`)}
+                  ${total != null && total > b.sample.length && html`
+                    <div class="tr-more">showing ${b.sample.length} of ${total}</div>
+                  `}
+                `
+              : html`<div class="tr-more">${total} match — not in the current list view</div>`}
+          </div>
+        `;
+      })}
+
+      <div class="tr-health">
+        <span class="score">${healthGrade(counts)}</span>
+        <span>
+          <b style=${{ color: 'var(--fg)' }}>Backlog health.</b>${' '}
+          ${needAttention != null
+            ? `${needAttention} need attention (overdue + unassigned).`
+            : 'Computing…'}${' '}
+          Clear the overdue items and the sidebar${' '}
+          <span style=${{ color: 'var(--achievement)' }}>Overdue</span> badge drops to 0.
+        </span>
+      </div>
+    </div>
+  `;
+}
+
+/**
+ * @param {TriageCounts|undefined} c
+ * @returns {string}
+ */
+function healthGrade(c) {
+  if (!c) return '·';
+  const pressure = c.overdue * 2 + c.unassigned + c.blocked;
+  if (pressure === 0) return 'A';
+  if (pressure <= 3) return 'A-';
+  if (pressure <= 6) return 'B+';
+  if (pressure <= 10) return 'B';
+  return 'C';
+}

package/dist/features/tasks/view-tabs.js

@@ -0,0 +1,38 @@
+// In-body view switcher — ported from routes/tasks/_components/-view-tabs.tsx.
+
+import { html, cn, Icon } from '../../lib/ui.js';
+
+/** @typedef {import('../../lib/shared.js').TaskView} TaskView */
+
+/** @type {Array<{ key: TaskView, label: string, icon: string }>} */
+const TABS = [
+  { key: 'tasks', label: 'Tasks', icon: 'check-square' },
+  { key: 'agenda', label: 'Agenda', icon: 'calendar-days' },
+  { key: 'triage', label: 'Triage', icon: 'stethoscope' },
+];
+
+/**
+ * @param {{ view: TaskView, onChange: (v: TaskView) => void, triageCount?: number | null }} props
+ */
+export function ViewTabs({ view, onChange, triageCount }) {
+  return html`
+    <div class="ip-tabs" role="tablist" aria-label="Tasks views">
+      ${TABS.map(({ key, label, icon }) => html`
+        <button
+          key=${key}
+          type="button"
+          role="tab"
+          aria-selected=${view === key}
+          class=${cn('ip-tab', view === key && 'is-on')}
+          onClick=${() => onChange(key)}
+        >
+          <${Icon} name=${icon} size=${13} />
+          <span>${label}</span>
+          ${key === 'triage' && triageCount != null && triageCount > 0 && html`
+            <span class="ip-tab-badge">${triageCount}</span>
+          `}
+        </button>
+      `)}
+    </div>
+  `;
+}

package/dist/index.html

@@ -0,0 +1,49 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="color-scheme" content="light dark" />
+    <title>Tasks</title>
+    <!-- No <link rel="stylesheet">: WebKitGTK can't load subresources (link/
+         fetch/img) from the about:srcdoc document the shell mounts — only
+         inlined scripts work (see the bootstrap comment below). So tasks.css
+         ships as a JS string (lib/tasks-css.js) and app.js injects it as an
+         inline <style>. The block below is just the boot/token shim. -->
+    <style>
+      :root {
+        --tasks-bg: var(--bg-base, #fff);
+        --tasks-fg: var(--fg, #111);
+        --tasks-muted: var(--fg-muted, #666);
+        --tasks-danger: var(--danger, #c44);
+        font-family: var(--font-sans, system-ui, -apple-system, sans-serif);
+      }
+      * { box-sizing: border-box; }
+      html, body, #root { height: 100%; }
+      body { margin: 0; background: var(--tasks-bg); color: var(--tasks-fg); font: 14px/1.4 var(--font-sans, system-ui); -webkit-font-smoothing: antialiased; }
+      #root > .boot { padding: 1rem 1.25rem; font-size: 0.85rem; color: var(--tasks-muted); }
+    </style>
+  </head>
+  <body>
+    <div id="root"><div class="boot">Loading…</div></div>
+    <!--
+      Why this looks indirect: pkg_content/mod.rs inlines `<script src="./x">`
+      into the srcdoc HTML to work around a WebKitGTK subresource-from-srcdoc
+      bug. But the resulting inline module is rooted at `about:srcdoc`, so its
+      static `import './foo.js'` and even `import('./foo.js')` fail with
+      "does not resolve to a valid URL". Resolving against `document.baseURI`
+      (which reflects the host-injected `<base href>`) gives a real URL the
+      module loader accepts. Once app.js is loaded as a fetched file, its
+      OWN url is real and relative imports inside it work normally.
+    -->
+    <script type="module">
+      try {
+        await import(new URL('app.js', document.baseURI).href);
+      } catch (e) {
+        const root = document.getElementById('root');
+        root.innerHTML = `<div class="boot" style="color:var(--tasks-danger)">Failed to load app.js: ${e.message ?? e}</div>`;
+        throw e;
+      }
+    </script>
+  </body>
+</html>