@ikenga/pkg-tasks 0.2.0 → 0.4.1

package/dist/features/tasks/task-detail-pane.js

@@ -5,17 +5,21 @@ import {
   cn,
   Icon,
   Button,
+  useState,
   useQuery,
   useMutation,
   useQueryClient,
 } from '../../lib/ui.js';
-import { getSupabase } from '../../lib/supabase.js';
 import { queryKeys } from '../../lib/query-keys.js';
 import {
   blockingTaskQuery,
+  reassignTask,
   subtasksQuery,
   taskDetailQuery,
+  updateTaskStatus,
 } from '../../lib/queries.js';
+import { assigneeOptions } from '../../lib/assignees.js';
+import { getContext } from '../../lib/bridge.js';
 import {
   assigneeIsAgent,
   autoCloseSignal,
@@ -49,20 +53,29 @@ export function TaskDetailPane({ taskId, density = 'full', onNavigateTask }) {
   const updateStatus = useMutation({
     /** @param {TaskStatus} status */
     mutationFn: async (status) => {
-      /** @type {{ status: TaskStatus, completed_at?: string | null }} */
-      const patch = { status };
-      if (status === 'completed') patch.completed_at = new Date().toISOString();
-      else if (task?.completed_at) patch.completed_at = null;
-      const { error: e } = await getSupabase()
-        .from('tasks')
-        .update(patch)
-        .eq('id', taskId);
-      if (e) throw e;
+      await updateTaskStatus(taskId, status);
     },
     onSuccess: () =>
       void queryClient.invalidateQueries({ queryKey: queryKeys.tasks.all }),
   });
 
+  // Reassign — toggled open by the head's Reassign button (was dead until now).
+  const [reassignOpen, setReassignOpen] = useState(false);
+  const reassign = useMutation({
+    /** @param {string} value picked assigned_to ('' = unassign) */
+    mutationFn: async (value) => {
+      const picked = assigneeOptions(getContext()).find((o) => o.value === value);
+      await reassignTask(taskId, value || null, picked ? picked.type : null);
+    },
+    onSuccess: () => {
+      // tasks.all covers every list view (assigned_to is shown across them);
+      // detail covers this pane's own query.
+      void queryClient.invalidateQueries({ queryKey: queryKeys.tasks.all });
+      void queryClient.invalidateQueries({ queryKey: queryKeys.tasks.detail(taskId) });
+      setReassignOpen(false);
+    },
+  });
+
   if (isLoading) {
     return html`
       <div class=${cn('tk-detail-pane', `is-${density}`)}>
@@ -100,13 +113,18 @@ export function TaskDetailPane({ taskId, density = 'full', onNavigateTask }) {
 
   return html`
     <div class=${cn('tk-detail-pane', `is-${density}`)}>
-      <div class="tk-det-head">
-        <div class="tk-det-topline">
+      <div class="ip-head">
+        <div class="ip-topline">
           <span class="id">task · ${shortId(task.id)}</span>
           ${density === 'full' && html`
-            <div class="tk-det-actions">
+            <div class="ip-topline-actions">
               <${Button} variant="outline" size="sm" type="button">Reschedule</${Button}>
-              <${Button} variant="outline" size="sm" type="button">Reassign</${Button}>
+              <${Button}
+                variant=${reassignOpen ? 'default' : 'outline'}
+                size="sm"
+                type="button"
+                onClick=${() => setReassignOpen((v) => !v)}
+              >Reassign</${Button}>
               <${Button}
                 size="sm"
                 type="button"
@@ -119,7 +137,60 @@ export function TaskDetailPane({ taskId, density = 'full', onNavigateTask }) {
           `}
         </div>
 
-        <h2 class="tk-det-title">${task.title}</h2>
+        ${density === 'full' && reassignOpen && html`
+          <div
+            style=${{
+              display: 'flex',
+              alignItems: 'center',
+              gap: 8,
+              marginTop: 8,
+              padding: '8px 10px',
+              background: 'var(--bg-sunken)',
+              border: '1px solid var(--border-soft)',
+              borderRadius: 'var(--radius-sm)',
+            }}
+          >
+            <span
+              style=${{
+                fontFamily: 'var(--font-mono)',
+                fontSize: 10.5,
+                color: 'var(--fg-faint)',
+                letterSpacing: '0.06em',
+                textTransform: 'uppercase',
+              }}
+            >Assign to</span>
+            <select
+              value=${task.assigned_to ?? ''}
+              disabled=${reassign.isPending}
+              onChange=${(e) => reassign.mutate(e.target.value)}
+              style=${{
+                height: 26,
+                fontSize: 11.5,
+                padding: '0 6px',
+                background: 'var(--bg-base)',
+                border: '1px solid var(--border)',
+                borderRadius: 'var(--radius-xs)',
+                color: 'var(--fg)',
+                fontFamily: 'inherit',
+              }}
+            >
+              <option value="">Unassigned</option>
+              ${task.assigned_to && !assigneeOptions(getContext()).some((o) => o.value === task.assigned_to) &&
+                html`<option value=${task.assigned_to}>${task.assigned_to} (current)</option>`}
+              ${assigneeOptions(getContext()).map(
+                (o) => html`<option key=${o.value} value=${o.value}>${o.label}</option>`,
+              )}
+            </select>
+            ${reassign.isPending && html`<${Icon} name="loader" size=${12} className="tk-spin" />`}
+            ${reassign.isError && html`
+              <span style=${{ color: 'var(--danger)', fontSize: 11 }}>
+                ${(/** @type {Error} */ (reassign.error)).message}
+              </span>
+            `}
+          </div>
+        `}
+
+        <h2 class="ip-title">${task.title}</h2>
 
         <div class="tk-det-meta-row">
           <span class=${cn('tk-badge', statusClass(task.status))}>
@@ -158,7 +229,7 @@ export function TaskDetailPane({ taskId, density = 'full', onNavigateTask }) {
         </div>
       </div>
 
-      <div class="tk-det-body">
+      <div class="ip-body">
         ${autoClosed && task.outcome_notes && html`
           <div class="tk-evidence">
             <div class="tk-evidence-head">
@@ -204,7 +275,7 @@ export function TaskDetailPane({ taskId, density = 'full', onNavigateTask }) {
         ${task.description && html`
           <div>
             <div class="tk-section-label"><span>Description</span></div>
-            <div class="tk-desc">${task.description}</div>
+            <div class="ip-desc">${task.description}</div>
           </div>
         `}
 
@@ -236,8 +307,8 @@ export function TaskDetailPane({ taskId, density = 'full', onNavigateTask }) {
             ${task.progress_pct !== null && html`
               <dt>Progress</dt>
               <dd>
-                <div class="tk-progress">
-                  <span style=${{ width: `${task.progress_pct}%` }}></span>
+                <div class="ip-progress">
+                  <span class="ip-progress-fill" style=${{ width: `${task.progress_pct}%` }}></span>
                 </div>
                 <span style=${{ fontFamily: 'var(--font-mono)', fontSize: 10.5, color: 'var(--fg-muted)' }}>
                   ${task.progress_pct}%
@@ -376,9 +447,9 @@ export function TaskDetailPane({ taskId, density = 'full', onNavigateTask }) {
       </div>
 
       ${density !== 'full' && html`
-        <div class="tk-action-bar">
+        <div class="ip-action-bar">
           <${Button} variant="outline" size="sm" type="button">Reschedule</${Button}>
-          <span class="spacer"></span>
+          <span class="ip-action-bar-spacer"></span>
           <${Button}
             size="sm"
             type="button"

package/dist/features/tasks/task-row.js

@@ -29,12 +29,12 @@ export function TaskRow({ task, selected, onSelect }) {
   return html`
     <button
       type="button"
-      class=${cn('tk-row', selected && 'is-on', autoClosed && 'is-completed')}
+      class=${cn('dense-row dense-row--task', selected && 'is-on', autoClosed && 'is-completed')}
       onClick=${() => onSelect(task.id)}
     >
-      <span class=${cn('pri-dot', priorityClass(task.priority))}></span>
-      <div class="body">
-        <div class="title">${task.title}</div>
+      <span class=${cn('dense-row-dot', priorityClass(task.priority))}></span>
+      <div class="dense-row-body">
+        <div class="dense-row-title">${task.title}</div>
         <div class="meta">
           <span class=${cn('tk-badge', statusClass(task.status))}>
             <span class="dot"></span>
@@ -62,8 +62,8 @@ export function TaskRow({ task, selected, onSelect }) {
           `}
         </div>
       </div>
-      <div class="right">
-        <span class=${cn('due', due.cls)}>${due.label}</span>
+      <div class="dense-row-right">
+        <span class=${cn('dense-row-due', due.cls)}>${due.label}</span>
       </div>
     </button>
   `;