zidane-ui 9.1.1 → 9.1.3

package/src/chat/SessionFilterMenu.tsx

@@ -1,397 +0,0 @@
-/**
- * The multi-axis session filter menu behind the sidebar search row's faders
- * button: view (grouping), status, project, last activity, sort. Each axis
- * is one row showing its current value and opening a submenu of choices;
- * an axis shows when its prop is set.
- *
- * Radix `DropdownMenu` for keyboard nav (↑/↓, → opens a submenu, ← closes,
- * Space/Enter picks), focus management and ARIA; we supply the look: the
- * floating surface (`.zg-float`) and menu rows (`.zg-menu-row`).
- */
-import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
-import { Fragment, type CSSProperties, type ReactNode } from 'react';
-
-import { IconButton } from '../components/IconButton';
-import { MenuNote } from '../components/Menu';
-import type { SessionGroupBy, SessionSortBy } from './headless/session-list';
-import { useChatLabels } from './useChatLabels';
-
-/** Which sessions the status filter shows: `active`, `archived`, or `all`. */
-export type SessionArchiveFilter = 'active' | 'archived' | 'all';
-/** Last-activity window of the activity filter: sessions active within `1d`, `3d`, `7d`, or `30d`, or `all`. */
-export type SessionActivityFilter = 'all' | '1d' | '3d' | '7d' | '30d';
-/**
- * A choice of the view axis: a grouping of the list model, `host`, one
- * section per host, which the app lays out itself (the desktop sidebar's Per host),
- * or `agent`, one group per agent.
- */
-export type SessionView = SessionGroupBy | 'host' | 'agent';
-
-/** Where an extra row sits: with the view, the filters or the sort. */
-export type SessionFilterPlacement = 'view' | 'filter' | 'sort';
-
-/** An extra row of the menu: one choice among options, an on/off toggle, or several picks. */
-export type SessionFilterExtra =
-  | {
-      kind: 'choice';
-      /** Unique among the extras. */
-      id: string;
-      /** The row's label. */
-      label: string;
-      /** The group it sits in. */
-      placement: SessionFilterPlacement;
-      /** The current choice, as the row shows it. */
-      value: string;
-      /** Muted at the default; accent otherwise. */
-      atDefault: boolean;
-      /** The choices, in menu order. */
-      options: readonly { id: string; label: string }[];
-      /** The chosen option's id. */
-      current: string;
-      /** Called with the option the user picks. */
-      onChange: (next: string) => void;
-    }
-  | {
-      kind: 'toggle';
-      /** Unique among the extras. */
-      id: string;
-      /** The row's label. */
-      label: string;
-      /** The group it sits in. */
-      placement: SessionFilterPlacement;
-      /** On. */
-      checked: boolean;
-      /** Called with the new state. */
-      onChange: (checked: boolean) => void;
-    }
-  | {
-      kind: 'multi';
-      /** Unique among the extras. */
-      id: string;
-      /** The row's label. */
-      label: string;
-      /** The group it sits in. */
-      placement: SessionFilterPlacement;
-      /** What is picked, as the row shows it. */
-      value: string;
-      /** The options, in menu order. */
-      options: readonly { id: string; label: string }[];
-      /** The picked options' ids. */
-      current: readonly string[];
-      /** Called with the picked ids. */
-      onChange: (next: readonly string[]) => void;
-    };
-
-/** A row that does something and closes the menu (Save view as space). */
-export interface SessionFilterAction {
-  /** Unique among the actions. */
-  id: string;
-  /** The row's label. */
-  label: string;
-  /** An icon class before the label. */
-  icon?: string;
-  /** Runs it. */
-  onSelect: () => void;
-}
-
-/** One axis: its value, the choices in menu order (default: the app's), and the change handler. */
-export interface SessionFilterAxis<T extends string> {
-  /** Currently selected choice. */
-  value: T;
-  /** Called with the choice the user picks. */
-  onChange: (next: T) => void;
-  /** Choices to offer, in menu order. Omit to offer every choice of that axis in the default order. */
-  options?: readonly T[];
-}
-
-/** The project axis: `null` is every project; `options` are the project names. */
-export interface SessionProjectAxis {
-  /** Selected project name, or `null` for every project. */
-  value: string | null;
-  /** Project names to offer. When empty, the submenu shows a hint instead. */
-  options: readonly string[];
-  /** Called with the picked project name, or `null` when the user picks every project. */
-  onChange: (next: string | null) => void;
-}
-
-/** Props for {@link SessionFilterMenu}. Each axis shows only when its prop is set. */
-export interface SessionFilterMenuProps<V extends SessionView = SessionGroupBy> {
-  /** Grouping ("Per directory" is the default). `host` is offered only when listed in `options`. */
-  view?: SessionFilterAxis<V>;
-  /** Archive filter axis: show active, archived, or all sessions. */
-  status?: SessionFilterAxis<SessionArchiveFilter>;
-  /** Project filter axis: limit the list to one project. */
-  project?: SessionProjectAxis;
-  /** Last-activity filter axis: limit the list to sessions active within a window (`1d` to `30d`, or `all`). */
-  activity?: SessionFilterAxis<SessionActivityFilter>;
-  /** Sort axis: `alphabetical`, `createdTime`, or `recency`. */
-  sort?: SessionFilterAxis<SessionSortBy>;
-  /** More rows, each in the group its `placement` names, after the built-in ones. */
-  extras?: readonly SessionFilterExtra[];
-  /** Rows that act, in a last group. */
-  actions?: readonly SessionFilterAction[];
-  /** Extra classes on the root element (the faders trigger button). */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-const VIEWS: readonly SessionView[] = ['project', 'none', 'date', 'state'];
-const STATUSES: readonly SessionArchiveFilter[] = ['active', 'archived', 'all'];
-const ACTIVITIES: readonly SessionActivityFilter[] = ['1d', '3d', '7d', '30d', 'all'];
-const SORTS: readonly SessionSortBy[] = ['alphabetical', 'createdTime', 'recency'];
-const ALL_PROJECTS = '__all__';
-
-/* Radix exposes the keyboard cursor as `data-highlighted` and an open submenu as `data-state=open`. */
-const ROW_CLASS =
-  'zg-menu-row outline-none data-[highlighted]:bg-[var(--zg-row-active)] data-[state=open]:bg-[var(--zg-row-active)]';
-
-/* `zg-menu-motion`: the shared menu open / close (Radix keeps the content mounted through the exit animation). */
-const SURFACE_CLASS = 'zg-float zg-menu-motion zg-radix-menu z-zg-float p-1';
-
-/**
- * Renders the faders button and the dropdown menu of session list filters. Each axis is a row that opens a submenu of choices.
- *
- * @param props - The {@link SessionFilterMenuProps}.
- */
-export function SessionFilterMenu<V extends SessionView = SessionGroupBy>({
-  view,
-  status,
-  project,
-  activity,
-  sort,
-  extras = NO_EXTRAS,
-  actions = NO_ACTIONS,
-  className,
-  style,
-}: SessionFilterMenuProps<V>) {
-  const labels = useChatLabels();
-  const choices = <T extends string>(ids: readonly T[], names: Record<T, string>) =>
-    ids.map((id) => ({ id, label: names[id] }));
-  const extraRows = (placement: SessionFilterPlacement) =>
-    extras.filter((e) => e.placement === placement).map((extra) => <ExtraRow key={`x-${extra.id}`} extra={extra} />);
-
-  // Separated groups, as the app lays them out: view | status, project, activity | sort.
-  const groups: ReactNode[][] = [
-    [
-      view && (
-        <FilterSub
-          key="view"
-          label={labels.filterView}
-          value={labels.filterViews[view.value]}
-          atDefault={view.value === 'project'}
-          options={choices<SessionView>(view.options ?? VIEWS, labels.filterViews)}
-          current={view.value}
-          onChange={(v) => view.onChange(v as V)}
-        />
-      ),
-      ...extraRows('view'),
-    ],
-    [
-      status && (
-        <FilterSub
-          key="status"
-          label={labels.filterStatus}
-          value={labels.filterStatuses[status.value]}
-          atDefault={status.value === 'active'}
-          options={choices(status.options ?? STATUSES, labels.filterStatuses)}
-          current={status.value}
-          onChange={(v) => status.onChange(v as SessionArchiveFilter)}
-        />
-      ),
-      project && (
-        <FilterSub
-          key="project"
-          label={labels.filterProject}
-          value={project.value ?? labels.filterAllProjects}
-          atDefault={project.value === null}
-          options={[
-            { id: ALL_PROJECTS, label: labels.filterAllProjectsOption },
-            ...project.options.map((p) => ({ id: p, label: p })),
-          ]}
-          current={project.value ?? ALL_PROJECTS}
-          onChange={(v) => project.onChange(v === ALL_PROJECTS ? null : v)}
-          emptyHint={project.options.length === 0 ? labels.filterNoProjects : undefined}
-        />
-      ),
-      activity && (
-        <FilterSub
-          key="activity"
-          label={labels.filterActivity}
-          value={labels.filterActivities[activity.value]}
-          atDefault={activity.value === 'all'}
-          options={choices(activity.options ?? ACTIVITIES, labels.filterActivities)}
-          current={activity.value}
-          onChange={(v) => activity.onChange(v as SessionActivityFilter)}
-        />
-      ),
-      ...extraRows('filter'),
-    ],
-    [
-      sort && (
-        <FilterSub
-          key="sort"
-          label={labels.filterSort}
-          value={labels.filterSorts[sort.value]}
-          atDefault={sort.value === 'recency'}
-          options={choices(sort.options ?? SORTS, labels.filterSorts)}
-          current={sort.value}
-          onChange={(v) => sort.onChange(v as SessionSortBy)}
-        />
-      ),
-      ...extraRows('sort'),
-    ],
-    actions.map((action) => (
-      <DropdownMenu.Item key={`a-${action.id}`} data-size="sm" className={ROW_CLASS} onSelect={action.onSelect}>
-        {action.icon && <span aria-hidden className={`${action.icon} text-zg-ui text-[var(--zg-text-muted)]`} />}
-        <span className="flex-1 truncate">{action.label}</span>
-      </DropdownMenu.Item>
-    )),
-  ].map((group) => group.filter(Boolean));
-  const shown = groups.filter((group) => group.length > 0);
-
-  return (
-    <DropdownMenu.Root modal={false}>
-      <DropdownMenu.Trigger asChild>
-        <IconButton icon="i-ph-faders-horizontal" label={labels.filterSessions} className={className} style={style} />
-      </DropdownMenu.Trigger>
-      <DropdownMenu.Portal>
-        <DropdownMenu.Content
-          align="end"
-          sideOffset={6}
-          className={`${SURFACE_CLASS} min-w-[14rem]`}
-          // Don't hand focus back to the trigger on close: a focus ring on
-          // it after picking an option reads as noise.
-          onCloseAutoFocus={(event) => event.preventDefault()}
-        >
-          {shown.map((group, i) => (
-            <Fragment key={i}>
-              {i > 0 && <DropdownMenu.Separator className="zg-menu-sep" />}
-              {group}
-            </Fragment>
-          ))}
-        </DropdownMenu.Content>
-      </DropdownMenu.Portal>
-    </DropdownMenu.Root>
-  );
-}
-
-const NO_EXTRAS: readonly SessionFilterExtra[] = [];
-const NO_ACTIONS: readonly SessionFilterAction[] = [];
-
-function ExtraRow({ extra }: { extra: SessionFilterExtra }) {
-  if (extra.kind === 'choice') {
-    return (
-      <FilterSub
-        label={extra.label}
-        value={extra.value}
-        atDefault={extra.atDefault}
-        options={extra.options}
-        current={extra.current}
-        onChange={extra.onChange}
-      />
-    );
-  }
-  if (extra.kind === 'toggle') {
-    return (
-      <DropdownMenu.CheckboxItem
-        data-size="sm"
-        className={ROW_CLASS}
-        checked={extra.checked}
-        onCheckedChange={(checked) => extra.onChange(checked === true)}
-        // A toggle keeps the menu open: several filters are set in one go.
-        onSelect={(event) => event.preventDefault()}
-      >
-        <span className="flex-1 truncate">{extra.label}</span>
-        <DropdownMenu.ItemIndicator className="inline-flex">
-          <span aria-hidden className="i-ph-check text-zg-ui text-[var(--zg-accent)]" />
-        </DropdownMenu.ItemIndicator>
-      </DropdownMenu.CheckboxItem>
-    );
-  }
-  return (
-    <DropdownMenu.Sub>
-      <DropdownMenu.SubTrigger data-size="sm" className={ROW_CLASS}>
-        <span className="flex-1 truncate">{extra.label}</span>
-        <span className={extra.current.length === 0 ? 'text-[var(--zg-text-muted)]' : 'text-[var(--zg-accent)]'}>
-          {extra.value}
-        </span>
-        <span className="i-ph-caret-right text-zg-label text-[var(--zg-text-muted)] shrink-0" aria-hidden />
-      </DropdownMenu.SubTrigger>
-      <DropdownMenu.Portal>
-        <DropdownMenu.SubContent
-          className={`${SURFACE_CLASS} min-w-[10rem] max-h-[60vh] overflow-y-auto`}
-          sideOffset={6}
-          alignOffset={-4}
-        >
-          {extra.options.map((option) => (
-            <DropdownMenu.CheckboxItem
-              key={option.id}
-              data-size="sm"
-              className={ROW_CLASS}
-              checked={extra.current.includes(option.id)}
-              onCheckedChange={(checked) =>
-                extra.onChange(
-                  checked === true
-                    ? [...extra.current.filter((id) => id !== option.id), option.id]
-                    : extra.current.filter((id) => id !== option.id),
-                )
-              }
-              onSelect={(event) => event.preventDefault()}
-            >
-              <span className="flex-1 truncate">{option.label}</span>
-              <DropdownMenu.ItemIndicator className="inline-flex">
-                <span aria-hidden className="i-ph-check text-zg-ui text-[var(--zg-accent)]" />
-              </DropdownMenu.ItemIndicator>
-            </DropdownMenu.CheckboxItem>
-          ))}
-        </DropdownMenu.SubContent>
-      </DropdownMenu.Portal>
-    </DropdownMenu.Sub>
-  );
-}
-
-interface FilterSubProps {
-  /** Left-side label on the parent row. */
-  label: string;
-  /** Right-side displayed value on the parent row. */
-  value: string;
-  /** Muted at the default; accent otherwise (signals "filtered"). */
-  atDefault: boolean;
-  options: readonly { id: string; label: string }[];
-  current: string;
-  onChange: (next: string) => void;
-  /** Empty-state copy when the only option is the "All" sentinel. */
-  emptyHint?: string;
-}
-
-function FilterSub({ label, value, atDefault, options, current, onChange, emptyHint }: FilterSubProps) {
-  return (
-    <DropdownMenu.Sub>
-      <DropdownMenu.SubTrigger data-size="sm" className={ROW_CLASS}>
-        <span className="flex-1 truncate">{label}</span>
-        <span className={atDefault ? 'text-[var(--zg-text-muted)]' : 'text-[var(--zg-accent)]'}>{value}</span>
-        <span className="i-ph-caret-right text-zg-label text-[var(--zg-text-muted)] shrink-0" aria-hidden />
-      </DropdownMenu.SubTrigger>
-      <DropdownMenu.Portal>
-        <DropdownMenu.SubContent
-          className={`${SURFACE_CLASS} min-w-[10rem] max-h-[60vh] overflow-y-auto`}
-          sideOffset={6}
-          alignOffset={-4}
-        >
-          <DropdownMenu.RadioGroup value={current} onValueChange={onChange}>
-            {options.map((option) => (
-              <DropdownMenu.RadioItem key={option.id} value={option.id} data-size="sm" className={ROW_CLASS}>
-                <span className="flex-1 truncate">{option.label}</span>
-                <DropdownMenu.ItemIndicator className="inline-flex">
-                  <span aria-hidden className="i-ph-check text-zg-ui text-[var(--zg-accent)]" />
-                </DropdownMenu.ItemIndicator>
-              </DropdownMenu.RadioItem>
-            ))}
-          </DropdownMenu.RadioGroup>
-          {emptyHint && options.length === 1 && <MenuNote>{emptyHint}</MenuNote>}
-        </DropdownMenu.SubContent>
-      </DropdownMenu.Portal>
-    </DropdownMenu.Sub>
-  );
-}

package/src/chat/SessionGroupHeader.tsx

@@ -1,177 +0,0 @@
-/**
- * A group's heading in a session list (a project, a day, a state): a glyph,
- * the label as a collapse toggle (its caret shows on hover or focus, and
- * stays once collapsed), and an optional trailing action revealed like a row's 3-dots.
- * With `onOpen` (a project that has a page: the project home), the label
- * opens it instead and the collapse toggle is a chevron after the action.
- * Plus the "show more" row that ends a capped group.
- */
-import type { CSSProperties, ReactNode } from 'react';
-
-import { Caret } from './transcript/frame';
-import { useChatLabels } from './useChatLabels';
-
-/** Props for {@link GroupGlyph}. */
-export interface GroupGlyphProps {
-  /** Icon class name drawn at `text-sm`, for example `i-ph-folder`. */
-  icon: string;
-  /** Extra classes on the root element. */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-/**
- * A fixed glyph in the header's icon column.
- *
- * @param props - Glyph props: the `icon` class.
- */
-export function GroupGlyph({ icon, className, style }: GroupGlyphProps) {
-  return (
-    <span
-      aria-hidden
-      className={['inline-flex items-center justify-center w-[18px] h-[18px] shrink-0', className]
-        .filter(Boolean)
-        .join(' ')}
-      style={style}
-    >
-      <span className={`${icon} text-sm`} />
-    </span>
-  );
-}
-
-/** Props for {@link SessionGroupHeader}. */
-export interface SessionGroupHeaderProps {
-  /** Group id, passed to `onToggle` when the label is clicked. */
-  id: string;
-  /** Group title shown next to the icon. */
-  label: string;
-  /** Whether the group's rows are hidden. Drives `aria-expanded` and the caret. */
-  collapsed: boolean;
-  /** The icon column: a `GroupGlyph`, or a host's own control (a project icon picker). */
-  icon?: ReactNode;
-  /** Trailing control (a "new session here" button), revealed on hover and focus. */
-  action?: ReactNode;
-  /** Called with the group `id` when the user toggles the label (or, with `onOpen`, the chevron). */
-  onToggle: (id: string) => void;
-  /** Called with the group `id` when the user clicks the label: it opens the group's page. Absent: the label toggles. */
-  onOpen?: (id: string) => void;
-  /** The group's page is the one shown (`onOpen`): the heading wears the active row's chip. */
-  active?: boolean;
-  /** A right-click on the heading (the group's own actions menu). */
-  onContextMenu?: (event: React.MouseEvent<HTMLLIElement>) => void;
-  /** Extra class names for the heading's `<li>` (an app's sticky headers). */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-/**
- * Renders a group heading in a session list. The label is a button that toggles collapse; the caret shows on hover or focus and stays visible once collapsed.
- *
- * @param props - Header props: `id`, `label`, `collapsed`, `icon`, `action`, `onToggle`, and `className`.
- */
-export function SessionGroupHeader({
-  id,
-  label,
-  collapsed,
-  icon,
-  action,
-  onToggle,
-  onOpen,
-  active = false,
-  onContextMenu,
-  className = '',
-  style,
-}: SessionGroupHeaderProps) {
-  const labels = useChatLabels();
-  const toggleTitle = collapsed ? labels.expandGroup(label) : labels.collapseGroup(label);
-  // Hidden at rest while expanded; hover or keyboard focus reveals it.
-  const caretClass = `shrink-0 ${collapsed ? 'opacity-100' : 'opacity-0 group-hover:opacity-100 group-focus-within:opacity-100'}`;
-  if (onOpen) {
-    return (
-      <li
-        className={`zg-group-head group flex items-center gap-1.5 -mx-2 px-3 pt-3 pb-1 text-sm text-[var(--zg-text-muted)] select-none ${className}`}
-        style={style}
-        onContextMenu={onContextMenu}
-        data-active={active ? 'true' : undefined}
-      >
-        {icon}
-        <button
-          type="button"
-          onClick={() => onOpen(id)}
-          aria-current={active ? 'page' : undefined}
-          title={labels.openGroup(label)}
-          className={`zg-press-soft flex flex-1 items-center min-w-0 bg-transparent border-0 cursor-pointer p-0 font-medium hover:text-[var(--zg-text)] transition-colors ${
-            active ? 'text-[var(--zg-text)]' : 'text-[var(--zg-text-muted)]'
-          }`}
-        >
-          <span className="truncate">{label}</span>
-        </button>
-        {action}
-        <button
-          type="button"
-          onClick={() => onToggle(id)}
-          aria-expanded={!collapsed}
-          aria-label={toggleTitle}
-          title={toggleTitle}
-          className={`zg-press-soft shrink-0 inline-flex items-center justify-center w-5 h-5 bg-transparent border-0 cursor-pointer p-0 text-[var(--zg-text-muted)] hover:text-[var(--zg-text)] transition-colors ${caretClass}`}
-        >
-          <Caret open={!collapsed} />
-        </button>
-      </li>
-    );
-  }
-  return (
-    <li
-      className={`group flex items-center gap-1.5 -mx-2 px-3 pt-3 pb-1 text-sm text-[var(--zg-text-muted)] select-none ${className}`}
-      style={style}
-      onContextMenu={onContextMenu}
-    >
-      {icon}
-      <button
-        type="button"
-        onClick={() => onToggle(id)}
-        aria-expanded={!collapsed}
-        title={toggleTitle}
-        className="zg-press-soft flex flex-1 items-center gap-1 min-w-0 bg-transparent border-0 cursor-pointer p-0 font-medium text-[var(--zg-text-muted)] hover:text-[var(--zg-text)] transition-colors"
-      >
-        <span className="truncate">{label}</span>
-        <Caret open={!collapsed} className={caretClass} />
-      </button>
-      {action}
-    </li>
-  );
-}
-
-/** Props for {@link ShowMoreRow}. */
-export interface ShowMoreRowProps {
-  /** Number of rows still hidden, shown in parentheses after the label. */
-  hiddenCount: number;
-  /** Called when the user clicks the row to reveal the hidden rows. */
-  onExpand: () => void;
-  /** Extra classes on the root element. */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-/**
- * Ends a capped group: reveals the rest of it. Aligned under the rows' titles.
- *
- * @param props - Row props: `hiddenCount` and `onExpand`.
- */
-export function ShowMoreRow({ hiddenCount, onExpand, className, style }: ShowMoreRowProps) {
-  const labels = useChatLabels();
-  return (
-    <li className={className} style={style}>
-      <button
-        type="button"
-        onClick={onExpand}
-        className="zg-press-soft w-full text-left bg-transparent border-0 cursor-pointer rounded-zg-md pl-7 pr-2 py-1 text-zg-label text-[var(--zg-text-muted)] hover:text-[var(--zg-text)] transition-colors"
-      >
-        {labels.showMore} <span className="zg-meta">({hiddenCount})</span>
-      </button>
-    </li>
-  );
-}

package/src/chat/SessionHostHeader.tsx

@@ -1,66 +0,0 @@
-/**
- * A host's section header in a session list grouped by host (the desktop
- * app's sidebar, with saved servers): the host's glyph, name and connection
- * dot, and the collapse toggle. A server that can't be reached says so next
- * to its name; its rows below are its last known sessions.
- */
-import type { CSSProperties } from 'react';
-
-import { hostReachable, hostStatusLabel, type HostView } from './headless/hosts';
-import { HostStatusDot } from './HostStatusDot';
-import { useChatLabels } from './useChatLabels';
-
-/** Props for {@link SessionHostHeader}. */
-export interface SessionHostHeaderProps {
-  /** The section's id, handed back to `onToggle`. */
-  id: string;
-  /** The host the section lists. */
-  host: HostView;
-  /** The host's sessions are folded away. */
-  collapsed: boolean;
-  /** The collapse toggle was clicked. */
-  onToggle: (id: string) => void;
-  /** Extra class names for the header's `<li>` (an app's sticky headers). */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-/**
- * A host's header row (an `<li>`) in a session list grouped by host.
- *
- * @param props - The {@link SessionHostHeaderProps}.
- */
-export function SessionHostHeader({ id, host, collapsed, onToggle, className = '', style }: SessionHostHeaderProps) {
-  const labels = useChatLabels();
-  const offline = !hostReachable(host);
-
-  return (
-    <li
-      className={`group flex items-center gap-1.5 -mx-2 px-3 pt-4 pb-0.5 text-zg-meta uppercase tracking-wide text-[var(--zg-text-muted)] select-none ${className}`}
-      style={style}
-      data-host-id={host.id}
-    >
-      <span aria-hidden className="inline-flex items-center justify-center w-[18px] h-[18px] shrink-0">
-        <span className={`${host.kind === 'local' ? 'i-ph-laptop' : 'i-ph-hard-drives'} text-zg-ui`} />
-      </span>
-      <button
-        type="button"
-        onClick={() => onToggle(id)}
-        aria-expanded={!collapsed}
-        title={collapsed ? labels.hostExpand(host.name) : labels.hostCollapse(host.name)}
-        className="zg-press-soft flex flex-1 items-center gap-1.5 min-w-0 bg-transparent border-0 cursor-pointer p-0 font-semibold text-inherit hover:text-[var(--zg-text)] transition-colors"
-      >
-        <span className="truncate">{host.name}</span>
-        {host.kind === 'server' && <HostStatusDot host={host} />}
-        {offline && <span className="normal-case tracking-normal font-normal">{hostStatusLabel(host, labels)}</span>}
-        <span
-          aria-hidden
-          className={`i-ph-caret-down text-xs shrink-0 [transition:opacity_var(--zg-motion-hover),transform_var(--zg-motion-snap)] ${
-            collapsed ? 'opacity-100 -rotate-90' : 'opacity-0 group-hover:opacity-100 rotate-0'
-          }`}
-        />
-      </button>
-    </li>
-  );
-}