feat(ui): interactive graph, strip context menus, days by activity, message times, limit status words

ui/src/routes/system/+layout.svelte

@@ -17,7 +17,7 @@
     >
       <h1 class="font-semibold text-lg tracking-tight">System</h1>
       {#each SYSTEM_PAGES as item (item.href)}
-        {@const active = isActive(page.url.pathname, base, item.href)}
+        {@const active = isActive(page.url.pathname, base, item.href, item.exact)}
         <a
           aria-current={active ? "page" : undefined}
           class={cn("rule-word", active && "text-foreground")}

ui/src/routes/system/jobs/+page.svelte

@@ -15,19 +15,16 @@
   const TICK_MS = 15_000;
   const PAYLOAD_MAX = 120;
 
-  let data = $state<JobsResponse | null>(null);
   let failure = $state<string | null>(null);
   let busy = $state<string | null>(null);
   let timer: ReturnType<typeof setInterval> | undefined;
 
+  const data = $derived<JobsResponse | null>(gateway.jobs);
+
   async function load() {
-    const { client } = session;
-    if (!client) {
-      return;
-    }
     failure = null;
     try {
-      data = await client.jobs();
+      await gateway.refreshJobs();
     } catch (cause) {
       failure = cause instanceof Error ? cause.message : String(cause);
     }
@@ -258,8 +255,10 @@
       <div class="bay-rack">
         {#each runs as row (row.id)}
           <Strip
+            client={session.client}
             detail={row.last_item?.text ?? ""}
             href="{base}/conversations/{row.id}"
+            onChanged={() => gateway.load().catch(() => undefined)}
             {row}
           />
         {/each}