@wular/coder 0.4.2 → 0.4.3

package/src/server/dash/comps/frame/task-toasts.tsx

@@ -5,7 +5,7 @@ import '@/comps/ui/toast.css';
 import { useEffect, useRef, useState } from 'preact/hooks';
 
 import { serverEvents } from '@coder/client';
-import type { TaskRow, TaskState } from '@coder/client/types';
+import type { TaskEvent, TaskRow, TaskState } from '@coder/client/types';
 import { client } from '@/utils/client';
 import { Link } from '@wular/pnext/link';
 import { usePathname, useRouter } from '@wular/pnext/navigation/client';
@@ -13,7 +13,7 @@ import { Status, STATUS_LABEL } from '@/app/dash/tasks/list/status';
 
 type Watched = { title: string; status: TaskState; at: number };
 type Live = Pick<TaskRow, 'status' | 'result' | 'error' | 'approval'>;
-type Toast = { key: string; id?: string; title: string; status?: TaskState; line: string };
+type Toast = { key: string; id?: string; title: string; status?: TaskState; line: string; err?: boolean };
 
 const WATCHED = 'coder:watched';
 export const NOTIFY = 'coder:notify';
@@ -21,11 +21,18 @@ const TOAST = 'coder:toast';
 const DONE = new Set<TaskState>(['completed', 'failed', 'cancelled']);
 const SHOWN = new Set<TaskState>([...DONE, 'waiting']);
 const KEEP = 20;
-const STREAMS = 3;
 const MAX = 3;
 const TTL = 8000;
-// Past any log line, so a stream sends status alone; log seqs are PostgreSQL integers.
-const NO_LINES = 2 ** 31 - 1;
+// The Web Lock that picks the one tab holding the events stream, and the channel it shares them on.
+const EVENTS = 'coder:events';
+const TASK = 'coder:task';
+const REPLAY = 'coder:task-replay';
+const RESET = 'coder:task-reset';
+const RESYNC = 'coder:task-resync';
+// A write that commits past the server's look-back still reaches shown pages within this, through a fresh read.
+const RESYNC_MS = 60_000;
+// Latest events a tab keeps, so a page that mounts later starts from them.
+const LATEST = 200;
 
 const read = (): Record<string, Watched> => {
   try {
@@ -43,9 +50,11 @@ const save = (all: Record<string, Watched>) => {
   dispatchEvent(new Event(WATCHED));
 };
 
-/** An error toast for an action whose page has no room for it. */
-export const toastError = (title: string, line: string) =>
-  dispatchEvent(new CustomEvent(TOAST, { detail: { title, line } }));
+/** A toast for an action whose page has no room for its outcome. */
+export const showToast = (title: string, line: string, err?: boolean) =>
+  dispatchEvent(new CustomEvent(TOAST, { detail: { title, line, err } }));
+
+export const toastError = (title: string, line: string) => showToast(title, line, true);
 
 /** Remembers a task this browser started or opened, so its finish shows a toast on any page. */
 export function watchTask(id: string, status: TaskState, title?: string) {
@@ -74,34 +83,151 @@ function lineOf(live: Live): string {
   return text(live.error) || (live.status === 'failed' ? 'It failed.' : 'It was stopped.');
 }
 
-/** Follows one watched task's event stream for its status alone. */
-function Follow({ id, onStatus }: { id: string; onStatus: (id: string, live: Live) => void }) {
+/** Hears every task change from this browser's one events stream; `reset` when some may have been missed, `resync` once a minute to read again. */
+export function useTaskEvents(
+  on: (event: TaskEvent) => void,
+  reset?: () => void,
+  resync?: () => void,
+) {
+  const handler = useRef({ on, reset, resync });
+  handler.current = { on, reset, resync };
+  useEffect(() => {
+    const listener = (event: Event) => handler.current.on((event as CustomEvent<TaskEvent>).detail);
+    const again = () => handler.current.reset?.();
+    const read = () => handler.current.resync?.();
+    addEventListener(TASK, listener);
+    addEventListener(RESET, again);
+    addEventListener(RESYNC, read);
+    dispatchEvent(
+      new CustomEvent(REPLAY, { detail: (event: TaskEvent) => handler.current.on(event) }),
+    );
+    return () => {
+      removeEventListener(TASK, listener);
+      removeEventListener(RESET, again);
+      removeEventListener(RESYNC, read);
+    };
+  }, []);
+}
+
+type Message = { hello?: true; id?: string; event?: TaskEvent; reset?: true; resync?: true };
+
+/** One events stream per browser: the tab holding the lock reads it, shares it on a channel, and a tab that takes over resumes from the last event id. */
+function useEventsStream(ids: string[], leading: { current: boolean }) {
+  const asked = useRef(ids);
+  asked.current = ids;
+  const current = useRef<{ key: string; abort: AbortController }>();
+  const key = [...ids].sort().join(',');
+
   useEffect(() => {
+    const latest = new Map<string, TaskEvent>();
+    const deliver = (event: TaskEvent) => {
+      latest.delete(event.id);
+      latest.set(event.id, event);
+      if (latest.size > LATEST) latest.delete(latest.keys().next().value!);
+      dispatchEvent(new CustomEvent(TASK, { detail: event }));
+    };
+    const replay = (event: Event) => {
+      for (const each of latest.values())
+        (event as CustomEvent<(e: TaskEvent) => void>).detail(each);
+    };
+    addEventListener(REPLAY, replay);
+    const channel =
+      typeof BroadcastChannel !== 'undefined' && navigator.locks
+        ? new BroadcastChannel(EVENTS)
+        : undefined;
     const abort = new AbortController();
+    let last: string | undefined;
+    let wake = () => {};
+    let soon: ReturnType<typeof setTimeout> | undefined;
+    const receive = (message: Message) => {
+      last = message.id ?? last;
+      if (message.event) deliver(message.event);
+      if (message.resync) dispatchEvent(new Event(RESYNC));
+      if (!message.reset) return;
+      latest.clear();
+      dispatchEvent(new Event(RESET));
+    };
+    channel?.addEventListener('message', ({ data }: MessageEvent<Message>) => {
+      if (!data.hello) return receive(data);
+      // A tab that just loaded, maybe into another workspace: the next stream resumes for it too.
+      soon ??= setTimeout(() => {
+        soon = undefined;
+        current.current?.abort.abort();
+        wake();
+      }, 300);
+    });
+    channel?.postMessage({ hello: true });
+
+    const lead = async () => {
+      leading.current = true;
+      const resync = setInterval(() => {
+        channel?.postMessage({ resync: true });
+        receive({ resync: true });
+      }, RESYNC_MS);
+      try {
+        await follow();
+      } finally {
+        clearInterval(resync);
+      }
+    };
+
     const follow = async () => {
       while (!abort.signal.aborted) {
+        const once = new AbortController();
+        const stop = () => once.abort();
+        abort.signal.addEventListener('abort', stop);
+        const ids = asked.current;
+        current.current = { key: [...ids].sort().join(','), abort: once };
+        let wait = 1000;
         try {
-          const response = await client.tasks.stream(id, NO_LINES, abort.signal);
-          if (response.status === 404) {
-            const all = read();
-            delete all[id];
-            return save(all);
-          }
-          if (!response.ok || !response.body) return;
-          for await (const event of serverEvents(response.body)) {
-            if (event.event === 'status') onStatus(id, JSON.parse(event.data));
-            else if (event.event === 'end') return;
-          }
-        } catch {
-          if (abort.signal.aborted) return;
-        }
-        await new Promise(done => setTimeout(done, 1000));
+          const response = await client.tasks.events(ids, last, once.signal);
+          // A server without the events stream: nothing to follow.
+          if (response.status === 404) return void (leading.current = false);
+          // Signed out: a tab that signs in again wakes the next try.
+          if (!response.ok || !response.body)
+            wait = [401, 403].includes(response.status) ? 60_000 : 5000;
+          else
+            for await (const { event, data, id } of serverEvents(response.body)) {
+              // A stream replaced by the next one says nothing more.
+              if (once.signal.aborted) break;
+              const message: Message = {
+                ...(id ? { id } : {}),
+                ...(event === 'task' ? { event: JSON.parse(data) as TaskEvent } : {}),
+                ...(event === 'reset' ? { reset: true as const } : {}),
+              };
+              channel?.postMessage(message);
+              receive(message);
+            }
+        } catch {}
+        abort.signal.removeEventListener('abort', stop);
+        // A new task set opens the next stream at once.
+        if (once.signal.aborted) continue;
+        await new Promise<void>(done => {
+          const timer = setTimeout(done, wait);
+          wake = () => {
+            clearTimeout(timer);
+            done();
+          };
+        });
+        wake = () => {};
       }
     };
-    void follow();
-    return () => abort.abort();
-  }, [id]);
-  return null;
+
+    if (channel)
+      void navigator.locks.request(EVENTS, { signal: abort.signal }, lead).catch(() => {});
+    else void lead();
+    return () => {
+      abort.abort();
+      wake();
+      clearTimeout(soon);
+      channel?.close();
+      removeEventListener(REPLAY, replay);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (current.current && current.current.key !== key) current.current.abort.abort();
+  }, [key]);
 }
 
 function Item({ toast, dismiss }: { toast: Toast; dismiss: (key: string) => void }) {
@@ -110,7 +236,7 @@ function Item({ toast, dismiss }: { toast: Toast; dismiss: (key: string) => void
     return () => clearTimeout(timer);
   }, []);
   return (
-    <div class={toast.id ? 'toast' : 'toast err'} onClick={() => dismiss(toast.key)}>
+    <div class={toast.err ? 'toast err' : 'toast'} onClick={() => dismiss(toast.key)}>
       <p class="toast-head">
         {toast.id ? (
           <Link class="cover" href="/dash/tasks/[id]" params={{ id: toast.id }}>
@@ -134,9 +260,16 @@ export function TaskToasts() {
   const [toasts, setToasts] = useState<Toast[]>([]);
   const open = useRef(openTask(path));
   open.current = openTask(path);
+  // Each tab's own last status per task, so every tab toasts a change once.
+  const known = useRef<Record<string, TaskState>>({});
+  const leading = useRef(false);
 
   useEffect(() => {
-    const sync = () => setWatched(read());
+    const sync = () => {
+      const all = read();
+      for (const [id, entry] of Object.entries(all)) known.current[id] ??= entry.status;
+      setWatched(all);
+    };
     sync();
     addEventListener(WATCHED, sync);
     addEventListener('storage', sync);
@@ -148,8 +281,8 @@ export function TaskToasts() {
 
   useEffect(() => {
     const onToast = (event: Event) => {
-      const { title, line } = (event as CustomEvent<{ title: string; line: string }>).detail;
-      setToasts(list => [{ key: `${TOAST}:${Date.now()}`, title, line }, ...list].slice(0, MAX));
+      const detail = (event as CustomEvent<Omit<Toast, 'key'>>).detail;
+      setToasts(list => [{ key: `${TOAST}:${Date.now()}`, ...detail }, ...list].slice(0, MAX));
     };
     addEventListener(TOAST, onToast);
     return () => removeEventListener(TOAST, onToast);
@@ -164,9 +297,25 @@ export function TaskToasts() {
 
   const dismiss = (key: string) => setToasts(list => list.filter(toast => toast.key !== key));
 
-  const onStatus = (id: string, live: Live) => {
-    const seen = read()[id];
-    if (!seen || seen.status === live.status) return;
+  useTaskEvents(event => {
+    const all = read();
+    const seen = all[event.id];
+    if (!seen) return;
+    if (event.deleted) {
+      delete all[event.id];
+      return save(all);
+    }
+    const before = known.current[event.id] ?? seen.status;
+    known.current[event.id] = event.status;
+    if (before !== event.status)
+      onStatus(
+        event.id,
+        { ...event, result: event.result ?? undefined, error: event.error ?? undefined },
+        seen,
+      );
+  });
+
+  const onStatus = (id: string, live: Live, seen: Watched) => {
     watchTask(id, live.status);
     if (!SHOWN.has(live.status) || open.current === id) return;
     const toast = {
@@ -178,6 +327,7 @@ export function TaskToasts() {
     };
     setToasts(list => [toast, ...list].slice(0, MAX));
     if (
+      !leading.current ||
       localStorage.getItem(NOTIFY) !== '1' ||
       typeof Notification === 'undefined' ||
       Notification.permission !== 'granted'
@@ -193,22 +343,18 @@ export function TaskToasts() {
     };
   };
 
-  // Its own page follows an open task; the rest share a few streams, newest first.
-  const follow = Object.entries(watched)
-    .filter(([id, entry]) => !DONE.has(entry.status) && id !== open.current)
-    .sort(([, a], [, b]) => b.at - a.at)
-    .slice(0, STREAMS);
+  useEventsStream(
+    Object.entries(watched)
+      .filter(([, entry]) => !DONE.has(entry.status))
+      .map(([id]) => id),
+    leading,
+  );
 
   return (
-    <>
-      {follow.map(([id]) => (
-        <Follow key={id} id={id} onStatus={onStatus} />
+    <section class="toasts" aria-label="Task updates" aria-live="polite">
+      {toasts.map(toast => (
+        <Item key={toast.key} toast={toast} dismiss={dismiss} />
       ))}
-      <section class="toasts" aria-label="Task updates" aria-live="polite">
-        {toasts.map(toast => (
-          <Item key={toast.key} toast={toast} dismiss={dismiss} />
-        ))}
-      </section>
-    </>
+    </section>
   );
 }

package/src/server/dash/comps/nav/side-toggle.tsx

@@ -1,20 +1,31 @@
 'use client';
 
-import { useState } from 'preact/hooks';
+import { useEffect, useState } from 'preact/hooks';
 
 import { iLeft, iRight } from '@/comps/ui/icons';
 import { Icon } from '@/comps/ui/icon';
 
 const COOKIE = 'side';
 
-/** Collapses the sidebar to its icons; the choice lives in a cookie so the next page renders that way at once. */
+/** Collapses the sidebar to its icons; a click is saved in a cookie so the next page renders that way at once. */
 export function SideToggle({ collapsed: initial }: { collapsed: boolean }) {
   const [collapsed, setCollapsed] = useState(initial);
+
+  // Without a saved choice the layout script collapses mid-width screens, so the label follows the class.
+  useEffect(() => {
+    const app = document.querySelector('.app');
+    if (!app) return;
+    const sync = () => setCollapsed(app.classList.contains('side-min'));
+    sync();
+    const watch = new MutationObserver(sync);
+    watch.observe(app, { attributes: true, attributeFilter: ['class'] });
+    return () => watch.disconnect();
+  }, []);
+
   const toggle = () => {
     const next = !collapsed;
-    setCollapsed(next);
     document.querySelector('.app')?.classList.toggle('side-min', next);
-    document.cookie = `${COOKIE}=${next ? 'min' : ''}; path=/; max-age=${next ? 31536000 : 0}; samesite=lax`;
+    document.cookie = `${COOKIE}=${next ? 'min' : 'max'}; path=/; max-age=31536000; samesite=lax`;
   };
   return (
     <button

package/src/server/dash/comps/ui/card.css

@@ -8,6 +8,7 @@
 }
 .card.accent {
   border-color: var(--warn);
+  background: var(--warnbg);
 }
 .card.danger {
   border-color: var(--bad);

package/src/server/dash/comps/ui/filter.css

@@ -0,0 +1,64 @@
+/* applied filters sit in the toolbar's row and scroll sideways instead of wrapping it */
+.filter-chips {
+  display: flex;
+  flex: 1 1 0;
+  gap: 4px;
+  min-width: 0;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+.filters:has(> .filter-chips) > .search {
+  flex-grow: 1000;
+}
+/* in a page head the filters keep to the right, so chips fill in from the search's left */
+.head.tools .filter-chips {
+  order: -1;
+}
+.head.tools .filter-chips > :first-child {
+  margin-left: auto;
+}
+.filter-chips .chip {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  gap: 4px;
+  max-width: 200px;
+}
+.filter-chips .chip .grow {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.filter-chips .chip .ic {
+  width: 12px;
+  height: 12px;
+}
+/* brand art takes the same box as the other icons, so labels line up */
+.filter-panel .pop-item > .brand-icon {
+  width: 16px;
+  height: 16px;
+}
+.filter-panel [data-facet] {
+  color: var(--muted);
+}
+.filter-panel .search {
+  margin: 4px 0 6px;
+}
+.filter-panel .search input {
+  width: 100%;
+}
+
+@media (max-width: 760px) {
+  /* the button sits at the left edge here, so its menu opens rightward */
+  @supports (anchor-scope: --menu) {
+    .filters .menu.filter-more > .pop {
+      inset: anchor(bottom) auto auto anchor(left);
+    }
+  }
+  .head.tools .filter-chips {
+    order: 0;
+  }
+  .head.tools .filter-chips > :first-child {
+    margin-left: 0;
+  }
+}