rift-ds 1.5.0 → 1.7.0

package/components/SourceChip/SourceChip.js

@@ -1,30 +1,182 @@
+"use client";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import React from "react";
+import React, { useState, useRef, useId, useEffect, useLayoutEffect } from "react";
 import "./SourceChip.css";
 import "../../fonts/material-symbols.css";
-const SourceChip = React.forwardRef(
-  ({ title, index, icon, href, className = "", ...rest }, ref) => {
-    const baseClass = "ds-source-chip";
-    const classes = [baseClass, href ? `${baseClass}--link` : "", className].filter(Boolean).join(" ");
-    const leading = index !== void 0 ? /* @__PURE__ */ jsx("span", { className: `${baseClass}__index`, children: index }) : icon ? /* @__PURE__ */ jsx("span", { className: `${baseClass}__icon`, "aria-hidden": "true", children: typeof icon === "string" ? /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", children: icon }) : icon }) : null;
-    const content = /* @__PURE__ */ jsxs(Fragment, { children: [
-      leading,
-      /* @__PURE__ */ jsx("span", { className: `${baseClass}__title`, children: title })
-    ] });
-    if (href) {
-      return /* @__PURE__ */ jsx("a", { ...rest, ref, className: classes, href, children: content });
+import { MOTION_HOVER_SHOW_DELAY_MS, MOTION_HOVER_HIDE_DELAY_MS } from "../../tokens/motion.js";
+const PREVIEW_EDGE_MARGIN = 8;
+let closeOpenPreview = null;
+function clipBounds(el) {
+  const bounds = { top: 0, left: 0, right: window.innerWidth, bottom: window.innerHeight };
+  for (let node = el.parentElement; node; node = node.parentElement) {
+    const { overflowX, overflowY } = getComputedStyle(node);
+    const rect = node.getBoundingClientRect();
+    if (overflowX !== "visible") {
+      bounds.left = Math.max(bounds.left, rect.left);
+      bounds.right = Math.min(bounds.right, rect.right);
+    }
+    if (overflowY !== "visible") {
+      bounds.top = Math.max(bounds.top, rect.top);
+      bounds.bottom = Math.min(bounds.bottom, rect.bottom);
     }
-    return /* @__PURE__ */ jsx(
-      "span",
-      {
-        ...rest,
-        ref,
-        className: classes,
-        children: content
-      }
-    );
   }
-);
+  return bounds;
+}
+const SourceChip = React.forwardRef(({ title, index, icon = "language", href, excerpt, source, logo, meta, className = "", ...rest }, ref) => {
+  const baseClass = "ds-source-chip";
+  const hasPreview = Boolean(excerpt);
+  const [visible, setVisible] = useState(false);
+  const showTimeoutRef = useRef(void 0);
+  const hideTimeoutRef = useRef(void 0);
+  const hostRef = useRef(null);
+  const panelRef = useRef(null);
+  const panelId = useId();
+  const clearTimers = () => {
+    clearTimeout(showTimeoutRef.current);
+    clearTimeout(hideTimeoutRef.current);
+  };
+  const show = () => {
+    clearTimeout(hideTimeoutRef.current);
+    showTimeoutRef.current = setTimeout(() => setVisible(true), MOTION_HOVER_SHOW_DELAY_MS);
+  };
+  const hide = () => {
+    clearTimeout(showTimeoutRef.current);
+    hideTimeoutRef.current = setTimeout(() => setVisible(false), MOTION_HOVER_HIDE_DELAY_MS);
+  };
+  const showNow = () => {
+    clearTimers();
+    setVisible(true);
+  };
+  useEffect(() => clearTimers, []);
+  useEffect(() => {
+    if (!visible) return;
+    const close = () => {
+      clearTimers();
+      setVisible(false);
+    };
+    closeOpenPreview?.();
+    closeOpenPreview = close;
+    const onKeyDown = (e) => {
+      if (e.key === "Escape") close();
+    };
+    const onPointerDown = (e) => {
+      if (!hostRef.current?.contains(e.target)) close();
+    };
+    document.addEventListener("keydown", onKeyDown);
+    document.addEventListener("pointerdown", onPointerDown);
+    return () => {
+      if (closeOpenPreview === close) closeOpenPreview = null;
+      document.removeEventListener("keydown", onKeyDown);
+      document.removeEventListener("pointerdown", onPointerDown);
+    };
+  }, [visible]);
+  useLayoutEffect(() => {
+    const host = hostRef.current;
+    const panel = panelRef.current;
+    if (!visible || !host || !panel) return;
+    const bounds = clipBounds(host);
+    const anchor = host.getBoundingClientRect();
+    const width = panel.offsetWidth;
+    const height = panel.offsetHeight;
+    const roomAbove = anchor.top - bounds.top - PREVIEW_EDGE_MARGIN;
+    const roomBelow = bounds.bottom - anchor.bottom - PREVIEW_EDGE_MARGIN;
+    const side = roomAbove >= height || roomAbove >= roomBelow ? "top" : "bottom";
+    const minLeft = bounds.left + PREVIEW_EDGE_MARGIN;
+    const maxLeft = bounds.right - PREVIEW_EDGE_MARGIN - width;
+    const left = Math.max(minLeft, Math.min(anchor.left, maxLeft));
+    panel.dataset.side = side;
+    panel.style.setProperty("--ds-source-chip-shift", `${Math.round(left - anchor.left)}px`);
+  }, [visible]);
+  const element = href ? "a" : hasPreview ? "button" : "span";
+  const classes = [
+    baseClass,
+    href ? `${baseClass}--link` : "",
+    element !== "span" ? `${baseClass}--interactive` : "",
+    visible ? `${baseClass}--open` : "",
+    className
+  ].filter(Boolean).join(" ");
+  const logoMark = logo ? typeof logo === "string" ? /* @__PURE__ */ jsx("img", { src: logo, alt: "" }) : logo : null;
+  const leading = index !== void 0 ? /* @__PURE__ */ jsx("span", { className: `${baseClass}__index`, children: /* @__PURE__ */ jsx("span", { className: `${baseClass}__numeral`, children: index }) }) : logoMark ? /* @__PURE__ */ jsx("span", { className: `${baseClass}__logo`, "aria-hidden": "true", children: logoMark }) : icon ? /* @__PURE__ */ jsx("span", { className: `${baseClass}__icon`, "aria-hidden": "true", children: typeof icon === "string" ? /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", children: icon }) : icon }) : null;
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    leading,
+    /* @__PURE__ */ jsx("span", { className: `${baseClass}__title`, children: title })
+  ] });
+  const describedBy = hasPreview ? panelId : void 0;
+  const chip = element === "a" ? /* @__PURE__ */ jsx(
+    "a",
+    {
+      "aria-describedby": describedBy,
+      ...rest,
+      ref,
+      className: classes,
+      href,
+      children: content
+    }
+  ) : element === "button" ? /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "aria-describedby": describedBy,
+      ...rest,
+      ref,
+      className: classes,
+      children: content
+    }
+  ) : /* @__PURE__ */ jsx(
+    "span",
+    {
+      ...rest,
+      ref,
+      className: classes,
+      children: content
+    }
+  );
+  if (!hasPreview) return chip;
+  const handleBlur = (event) => {
+    if (!event.currentTarget.contains(event.relatedTarget)) hide();
+  };
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ref: hostRef,
+      className: `${baseClass}-host`,
+      onMouseEnter: show,
+      onMouseLeave: hide,
+      onFocus: show,
+      onBlur: handleBlur,
+      onClick: showNow,
+      children: [
+        chip,
+        /* @__PURE__ */ jsxs(
+          "span",
+          {
+            ref: panelRef,
+            id: panelId,
+            role: "tooltip",
+            className: `${baseClass}__preview${visible ? ` ${baseClass}__preview--visible` : ""}`,
+            children: [
+              (logo || source || meta || href) && /* @__PURE__ */ jsxs("span", { className: `${baseClass}__preview-top`, children: [
+                logoMark && /* @__PURE__ */ jsx("span", { className: `${baseClass}__logo`, "aria-hidden": "true", children: logoMark }),
+                source && /* @__PURE__ */ jsx("span", { className: `${baseClass}__preview-source`, children: source }),
+                meta && /* @__PURE__ */ jsx("span", { className: `${baseClass}__preview-meta`, children: meta }),
+                href && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: `${baseClass}__preview-open material-symbols-rounded`,
+                    "aria-hidden": "true",
+                    children: "arrow_outward"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx("span", { className: `${baseClass}__preview-title`, children: title }),
+              /* @__PURE__ */ jsx("span", { className: `${baseClass}__preview-excerpt`, children: excerpt })
+            ]
+          }
+        )
+      ]
+    }
+  );
+});
 SourceChip.displayName = "SourceChip";
 export {
   SourceChip

package/components/StatusDot/StatusDot.css

@@ -1,7 +1,7 @@
 /* ============================================
    STATUS DOT COMPONENT
    Bare presence/status indicator with optional
-   label and live pulse
+   label, hollow outline and live pulse
    ============================================ */
 
 /* Base */
@@ -16,6 +16,7 @@
   position: relative;
   flex-shrink: 0;
   border-radius: var(--radius-pill);
+  background-color: var(--ds-status-dot-color);
 }
 
 .ds-status-dot__label {
@@ -29,7 +30,14 @@
 }
 
 /* Sizes — the dot rides the icon scale at half-diameter, so it can never
-   drift from the glyphs it sits beside. */
+   drift from the glyphs it sits beside. `xs` is the one step off it: the
+   list-row mark sits on the gap scale, because no icon token is that small
+   and 8px matches a title's cap height. */
+
+.ds-status-dot--xs .ds-status-dot__indicator {
+  width: var(--gap-200); /* 8px */
+  height: var(--gap-200);
+}
 
 .ds-status-dot--sm .ds-status-dot__indicator {
   width: calc(var(--icon-size-500) / 2); /* 10px */
@@ -49,24 +57,39 @@
 /* Variants — the plain-surface icon steps, tuned to hold on bare
    containers where the status text tints wash out. */
 
-.ds-status-dot--info .ds-status-dot__indicator {
-  background-color: var(--color-status-info-icon);
+.ds-status-dot--info {
+  --ds-status-dot-color: var(--color-status-info-icon);
+}
+
+.ds-status-dot--positive {
+  --ds-status-dot-color: var(--color-status-positive-icon);
 }
 
-.ds-status-dot--positive .ds-status-dot__indicator {
-  background-color: var(--color-status-positive-icon);
+.ds-status-dot--warning {
+  --ds-status-dot-color: var(--color-status-warning-icon);
 }
 
-.ds-status-dot--warning .ds-status-dot__indicator {
-  background-color: var(--color-status-warning-icon);
+.ds-status-dot--error {
+  --ds-status-dot-color: var(--color-status-error-icon);
 }
 
-.ds-status-dot--error .ds-status-dot__indicator {
-  background-color: var(--color-status-error-icon);
+.ds-status-dot--neutral {
+  --ds-status-dot-color: var(--color-status-neutral-icon);
+}
+
+/* Outline — the hollow dot: the role's colour drawn as an inset ring, so
+   the mark keeps its box and its seat while reading as "nothing here yet".
+   The two small sizes take the hairline; the larger two the heavier step,
+   so the ring keeps its proportion to the diameter. */
+
+.ds-status-dot--outline .ds-status-dot__indicator {
+  background-color: transparent;
+  box-shadow: inset 0 0 0 var(--border-025) var(--ds-status-dot-color);
 }
 
-.ds-status-dot--neutral .ds-status-dot__indicator {
-  background-color: var(--color-status-neutral-icon);
+.ds-status-dot--outline.ds-status-dot--md .ds-status-dot__indicator,
+.ds-status-dot--outline.ds-status-dot--lg .ds-status-dot__indicator {
+  box-shadow: inset 0 0 0 var(--border-050) var(--ds-status-dot-color);
 }
 
 /* Pulse — a ring of the dot's own colour swelling out and fading, on the
@@ -77,7 +100,7 @@
   position: absolute;
   inset: 0;
   border-radius: var(--radius-pill);
-  background-color: inherit;
+  background-color: var(--ds-status-dot-color);
   animation: ds-status-dot-pulse var(--motion-duration-loop-shimmer) var(--motion-ease-standard)
     infinite;
 }

package/components/StatusDot/StatusDot.d.ts

@@ -3,8 +3,14 @@ import { default as React } from 'react';
 type StatusDotOwnProps = {
     /** Status role the dot carries — coloured through the plain-surface `--color-status-*-icon` steps. */
     variant?: 'info' | 'positive' | 'warning' | 'error' | 'neutral';
-    /** Dot diameter, derived from the icon scale (half of `--icon-size-500/md/lg`). */
-    size?: 'sm' | 'md' | 'lg';
+    /** Dot diameter, derived from the icon scale (half of `--icon-size-500/600/800`); `xs` is the 8px list-row mark, sized on the gap scale. */
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+    /**
+     * Draws the dot hollow: a ring in the role's colour around an empty
+     * centre, for a settled or empty state that still holds its seat beside
+     * filled dots.
+     */
+    outline?: boolean;
     /**
      * Radiates a repeating ring from the dot for a live state — recording,
      * online now, deploy in flight. The ring stills under reduced motion.
@@ -16,6 +22,12 @@ type StatusDotOwnProps = {
      * a colour alone announces nothing.
      */
     label?: string;
+    /**
+     * Renders the dot as decoration: no `role="status"`, hidden from assistive
+     * technology. For a dot repeated down a list, where the host announces the
+     * state in the row's own text and a live region per row would be noise.
+     */
+    decorative?: boolean;
     /** Additional CSS classes */
     className?: string;
 };
@@ -23,8 +35,8 @@ export interface StatusDotProps extends StatusDotOwnProps, Omit<React.ComponentP
 }
 /**
  * StatusDot — the bare presence/status indicator: a small dot in one of the
- * five status roles, with an optional visible label and an optional live
- * pulse. Where Badge carries a text label on a tinted fill, StatusDot is the
+ * five status roles, filled or hollow, with an optional visible label and
+ * an optional live pulse. Where Badge carries a text label on a tinted fill, StatusDot is the
  * mark alone — for table rows, avatars, nav items, and anywhere a full badge
  * is too loud.
  *

package/components/StatusDot/StatusDot.js

@@ -2,19 +2,39 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import React from "react";
 import "./StatusDot.css";
 const StatusDot = React.forwardRef(
-  ({ variant = "neutral", size = "md", pulse = false, label, className = "", ...rest }, ref) => {
+  ({
+    variant = "neutral",
+    size = "md",
+    outline = false,
+    pulse = false,
+    label,
+    decorative = false,
+    className = "",
+    ...rest
+  }, ref) => {
     const baseClass = "ds-status-dot";
     const classes = [
       baseClass,
       `${baseClass}--${variant}`,
       `${baseClass}--${size}`,
+      outline && `${baseClass}--outline`,
       pulse && `${baseClass}--pulse`,
       className
     ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ jsxs("span", { ...rest, ref, className: classes, role: "status", children: [
-      /* @__PURE__ */ jsx("span", { className: `${baseClass}__indicator`, "aria-hidden": "true" }),
-      label && /* @__PURE__ */ jsx("span", { className: `${baseClass}__label`, children: label })
-    ] });
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        ...rest,
+        ref,
+        className: classes,
+        role: decorative ? void 0 : "status",
+        "aria-hidden": decorative ? true : rest["aria-hidden"],
+        children: [
+          /* @__PURE__ */ jsx("span", { className: `${baseClass}__indicator`, "aria-hidden": "true" }),
+          label && /* @__PURE__ */ jsx("span", { className: `${baseClass}__label`, children: label })
+        ]
+      }
+    );
   }
 );
 StatusDot.displayName = "StatusDot";

package/components/ThreadPanel/ThreadPanel.css

@@ -396,6 +396,12 @@
   flex-shrink: 0;
 }
 
+/* A generated avatar in the icon seat: a block-level sprite, so the seat
+   lays it out as a box rather than on the text baseline. */
+.ds-thread-panel__project-icon--avatar {
+  display: inline-flex;
+}
+
 .ds-thread-panel__project-label {
   flex: 1;
   min-width: 0;
@@ -525,15 +531,24 @@
   row-gap: 0;
 }
 
-/* The unread dot: a small status disc leading the title. Sized on the gap
-   scale — there is no icon token this small, and 8px matches the title's
-   cap height. */
-.ds-thread-panel__unread {
+/* The status dot: a StatusDot at its 8px list-row size leading the title.
+   The panel seats one on every row or on none, so titles share an edge. */
+.ds-thread-panel__status {
   flex: none;
-  width: var(--gap-200);
-  height: var(--gap-200);
-  border-radius: var(--radius-pill);
-  background-color: var(--color-status-info-icon);
+}
+
+/* The status read aloud: the dot is decorative, so its state rides in the
+   row's text for assistive technology only. */
+.ds-thread-panel__status-label {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
 }
 
 .ds-thread-panel__title {
@@ -610,8 +625,8 @@
 }
 
 /* The description line: the caption face on the full second line, fading
-   at the trailing edge like the title above it. Indented past the unread
-   dot's column so both lines share a left edge.
+   at the trailing edge like the title above it. Indented past the status
+   dot's column, when the panel has one, so both lines share a left edge.
    ds-allow(color): mask alpha keywords (black/transparent), not palette colours */
 .ds-thread-panel__description {
   flex-basis: 100%;
@@ -635,7 +650,7 @@
   );
 }
 
-.ds-thread-panel__thread--unread .ds-thread-panel__description {
+.ds-thread-panel--dotted .ds-thread-panel__description {
   /* The dot's width plus the row's column gap. */
   margin-left: calc(var(--gap-200) + var(--gap-200));
 }

package/components/ThreadPanel/ThreadPanel.d.ts

@@ -9,6 +9,14 @@ export interface ThreadPanelThreadAction {
     /** Destructive styling (the error text colour) for delete-like actions. */
     destructive?: boolean;
 }
+/**
+ * What a thread's leading dot reports. Fill says whether the thread wants
+ * the reader, colour says what it wants, motion says it is live right now:
+ * `idle` is a hollow neutral ring, `working` a pulsing neutral dot, and
+ * `unread`, `waiting` and `error` solid dots in the info, warning and error
+ * roles.
+ */
+export type ThreadPanelThreadStatus = 'idle' | 'working' | 'unread' | 'waiting' | 'error';
 export interface ThreadPanelThread {
     /** Stable identifier: `activeThreadId` matches against it and `onThreadSelect` reports it. */
     id: string;
@@ -24,7 +32,9 @@ export interface ThreadPanelThread {
     actions?: ThreadPanelThreadAction[];
     /** Quiet second line under the title in the caption face — a repo, an environment, a one-line summary. Overflows under the same trailing mask as the title. */
     description?: string;
-    /** The thread holds unseen activity: a small status dot leads the row. The dot is decorative — put the state in `meta` or `description` when it must be read aloud. */
+    /** The thread's state, drawn as the dot leading the row: `idle` (nothing new, nothing running), `working` (an agent is running now), `unread` (finished, not yet seen), `waiting` (blocked on the reader) or `error` (stopped on a failure). Once any thread in the panel carries a status every row draws a dot, the rest reading `idle`, so the titles share one left edge. The dot is decorative; every state but `idle` is also read aloud through `statusLabels`. */
+    status?: ThreadPanelThreadStatus;
+    /** Legacy boolean for `status: 'unread'`, ignored when `status` is set. @deprecated Use `status: 'unread'` instead. */
     unread?: boolean;
     /** Trailing icon before the meta — Material Symbol name (string) or custom element (ReactNode), e.g. `cloud` for a session that lives remotely. */
     icon?: string | React.ReactNode;
@@ -52,8 +62,10 @@ export interface ThreadPanelProject {
     id: string;
     /** The project's name. */
     label: string;
-    /** Leading icon on the row — Material Symbol name (string) or custom element (ReactNode). Defaults to `folder`. */
+    /** Leading icon on the row — Material Symbol name (string) or custom element (ReactNode). Omit it and the row draws the project's generated PixelAvatar, which is the default mark. */
     icon?: string | React.ReactNode;
+    /** Seed for the generated PixelAvatar a project wears when it has no `icon`. Defaults to `label`; pass a stable id so a renamed project keeps its character. The panel spreads the inks across its projects, so neighbours differ in colour as well as shape. */
+    pixelAvatar?: string;
     /** Small trailing annotation in the caption face, e.g. how recently the project was touched. */
     meta?: string;
     /** Optional href — the row renders as an `<a>` instead of a `<button>`. */
@@ -79,6 +91,8 @@ type ThreadPanelOwnProps = {
     threadActions?: ThreadPanelThreadAction[];
     /** Fires with the thread's id and the chosen action's id. */
     onThreadAction?: (threadId: string, actionId: string) => void;
+    /** Spoken text for each thread status, read after the row's title; the dot itself is decorative. Merged over the English defaults (Working, Unread, Needs input, Failed). `idle` is silent unless given a label here. */
+    statusLabels?: Partial<Record<ThreadPanelThreadStatus, string>>;
     /** Accessible name for a row's menu trigger; the thread's title is appended after it. */
     threadMenuLabel?: string;
     /** Id of the thread being renamed: its row swaps to an inline text field, prefilled with the title and selected. The host owns the state, like everything else. */
@@ -148,8 +162,8 @@ export interface ThreadPanelProps extends ThreadPanelOwnProps, Omit<React.Compon
  * control rows, an optional projects section with its own new-project
  * button, the grouped thread history (the one region that scrolls), and a
  * footer for the profile row and host furniture like a theme toggle.
- * Thread rows scale from a bare title to the full detail anatomy: an
- * unread dot, a quiet description line, a trailing glyph, a pin marker,
+ * Thread rows scale from a bare title to the full detail anatomy: a
+ * leading status dot, a quiet description line, a trailing glyph, a pin marker,
  * and the meta caption.
  *
  * Fully controlled and stateless: the host owns the active thread, the

package/components/ThreadPanel/ThreadPanel.js

@@ -3,9 +3,25 @@ import React from "react";
 import { Avatar } from "../Avatar/Avatar.js";
 import { DropdownMenu } from "../DropdownMenu/DropdownMenu.js";
 import { Kbd } from "../Kbd/Kbd.js";
+import { PixelAvatar } from "../PixelAvatar/PixelAvatar.js";
+import { StatusDot } from "../StatusDot/StatusDot.js";
 import "./ThreadPanel.css";
 import "../../fonts/material-symbols.css";
+import { distinctPixelInks } from "../PixelAvatar/pixelInks.js";
 const baseClass = "ds-thread-panel";
+const STATUS_DOTS = {
+  idle: { variant: "neutral", outline: true },
+  working: { variant: "neutral", pulse: true },
+  unread: { variant: "info" },
+  waiting: { variant: "warning" },
+  error: { variant: "error" }
+};
+const DEFAULT_STATUS_LABELS = {
+  working: "Working",
+  unread: "Unread",
+  waiting: "Needs input",
+  error: "Failed"
+};
 function ActionRow({
   className,
   href,
@@ -96,6 +112,7 @@ const ThreadPanel = React.forwardRef(
     onThreadSelect,
     threadActions,
     onThreadAction,
+    statusLabels,
     threadMenuLabel = "Thread options",
     renamingThreadId,
     onThreadRename,
@@ -128,12 +145,20 @@ const ThreadPanel = React.forwardRef(
     className = "",
     ...rest
   }, ref) => {
+    const dotted = groups.some(
+      (group) => group.threads.some((thread) => thread.status || thread.unread)
+    );
+    const labels = { ...DEFAULT_STATUS_LABELS, ...statusLabels };
     const classes = [
       baseClass,
       expanded && `${baseClass}--expanded`,
+      dotted && `${baseClass}--dotted`,
       className
     ].filter(Boolean).join(" ");
     const iconClass = "material-symbols-rounded";
+    const projectInks = distinctPixelInks(
+      (projects ?? []).map((project) => project.pixelAvatar ?? project.label)
+    );
     const showHeader = Boolean(logo || logoText || onExpandedChange);
     const showNew = Boolean(newThreadLabel || onNewThread || newThreadHref);
     const showFooter = Boolean(footerSlot || profile);
@@ -252,7 +277,7 @@ const ThreadPanel = React.forwardRef(
                 }
               )
             ] }),
-            /* @__PURE__ */ jsx("ul", { className: `${baseClass}__list`, "aria-label": projectsLabel, children: projects.map((project) => {
+            /* @__PURE__ */ jsx("ul", { className: `${baseClass}__list`, "aria-label": projectsLabel, children: projects.map((project, projectIndex) => {
               const active = project.id === activeProjectId;
               return /* @__PURE__ */ jsx("li", { className: `${baseClass}__row`, children: /* @__PURE__ */ jsxs(
                 ActionRow,
@@ -266,12 +291,25 @@ const ThreadPanel = React.forwardRef(
                   ariaCurrent: active ? project.href ? "page" : "true" : void 0,
                   title: project.label,
                   children: [
-                    /* @__PURE__ */ jsx(
+                    project.icon == null ? /* @__PURE__ */ jsx(
                       "span",
                       {
-                        className: `${baseClass}__project-icon${typeof project.icon === "string" || project.icon == null ? ` ${iconClass}` : ""}`,
+                        className: `${baseClass}__project-icon ${baseClass}__project-icon--avatar`,
                         "aria-hidden": "true",
-                        children: project.icon ?? "folder"
+                        children: /* @__PURE__ */ jsx(
+                          PixelAvatar,
+                          {
+                            name: project.pixelAvatar ?? project.label,
+                            ink: projectInks[projectIndex]
+                          }
+                        )
+                      }
+                    ) : /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: `${baseClass}__project-icon${typeof project.icon === "string" ? ` ${iconClass}` : ""}`,
+                        "aria-hidden": "true",
+                        children: project.icon
                       }
                     ),
                     /* @__PURE__ */ jsx("span", { className: `${baseClass}__project-label`, children: project.label }),
@@ -300,6 +338,8 @@ const ThreadPanel = React.forwardRef(
                           const showMenu = Boolean(
                             actions && actions.length > 0 && onThreadAction && !thread.pending
                           );
+                          const status = dotted ? thread.pending ? "working" : thread.status ?? (thread.unread ? "unread" : "idle") : void 0;
+                          const statusLabel = status && !thread.pending ? labels[status] : void 0;
                           const renaming = Boolean(
                             thread.id === renamingThreadId && onThreadRename
                           );
@@ -326,19 +366,20 @@ const ThreadPanel = React.forwardRef(
                                     className: [
                                       `${baseClass}__thread`,
                                       active && `${baseClass}__thread--active`,
-                                      thread.description && !thread.pending && `${baseClass}__thread--detailed`,
-                                      thread.unread && `${baseClass}__thread--unread`
+                                      thread.description && !thread.pending && `${baseClass}__thread--detailed`
                                     ].filter(Boolean).join(" "),
                                     href: thread.href,
                                     onClick: onThreadSelect ? () => onThreadSelect(thread.id) : void 0,
                                     ariaCurrent: active ? thread.href ? "page" : "true" : void 0,
                                     title: thread.title,
                                     children: [
-                                      thread.unread && !thread.pending && /* @__PURE__ */ jsx(
-                                        "span",
+                                      status && /* @__PURE__ */ jsx(
+                                        StatusDot,
                                         {
-                                          className: `${baseClass}__unread`,
-                                          "aria-hidden": "true"
+                                          className: `${baseClass}__status`,
+                                          size: "xs",
+                                          decorative: true,
+                                          ...STATUS_DOTS[status]
                                         }
                                       ),
                                       thread.pending ? (
@@ -359,6 +400,7 @@ const ThreadPanel = React.forwardRef(
                                           }
                                         )
                                       ) : /* @__PURE__ */ jsx("span", { className: `${baseClass}__title`, children: thread.title }),
+                                      statusLabel && /* @__PURE__ */ jsx("span", { className: `${baseClass}__status-label`, children: statusLabel }),
                                       !thread.pending && (thread.icon || thread.pinned || thread.meta) && /* @__PURE__ */ jsxs("span", { className: `${baseClass}__trail`, children: [
                                         thread.icon && /* @__PURE__ */ jsx(
                                           "span",