zidane-ui 9.0.4 → 9.1.3

package/src/chat/HostTranscript.tsx

@@ -1,101 +0,0 @@
-/**
- * `Transcript` over a `ChatHost`: reads `host.transcript(sessionId)`,
- * shows a loading line until its history has arrived, an "Earlier messages"
- * control while older events exist, and binds the rows' actions to the host
- * (full tool output, stopping a call, continuing a failed run through
- * `send`). An action the host leaves out hides its control.
- *
- *   <ChatProvider host={host}>
- *     <HostTranscript sessionId={id} onOpenSession={setActive} />
- *   </ChatProvider>
- */
-import { useMemo } from 'react';
-
-import { useChatHost } from './ChatProvider';
-import { useReadable } from './headless/store';
-import { DEFAULT_TRANSCRIPT_OPTIONS, Transcript, type TranscriptProps } from './Transcript';
-import { type TranscriptActions, TranscriptActionsProvider } from './transcript/actions';
-import { useChatLabels } from './useChatLabels';
-
-/** Props for {@link HostTranscript}: the {@link TranscriptProps} minus the ones the host supplies (`events`, `streaming`, `sessionId`), plus `sessionId` and `onOpenSession`. */
-export interface HostTranscriptProps extends Omit<TranscriptProps, 'events' | 'streaming' | 'sessionId'> {
-  /** Id of the session whose transcript to show. Passed to `host.transcript`. */
-  sessionId: string;
-  /** Shows another session the transcript names (a worker, a reporting session). Absent: names are plain text. */
-  onOpenSession?(sessionId: string): void;
-}
-
-const RING_STYLE = { borderColor: 'var(--zg-border)', color: 'var(--zg-text-muted)' };
-
-/**
- * Renders a session's transcript from the {@link ChatHost} in context, with loading, earlier-messages, and row actions wired to the host.
- *
- * @param props - The {@link HostTranscriptProps}; other props pass through to {@link Transcript}.
- */
-export function HostTranscript({ sessionId, onOpenSession, ...props }: HostTranscriptProps) {
-  const host = useChatHost();
-  const labels = useChatLabels();
-  const transcript = useMemo(() => host.transcript(sessionId), [host, sessionId]);
-  const state = useReadable(transcript);
-
-  const actions = useMemo<TranscriptActions>(
-    () => ({
-      sessionId,
-      ...(host.toolOutput ? { toolOutput: (callId: string) => host.toolOutput!(sessionId, callId) } : {}),
-      ...(host.cancelTool ? { cancelTool: (callId: string) => host.cancelTool!(sessionId, callId) } : {}),
-      ...(onOpenSession ? { openSession: onOpenSession } : {}),
-      ...(host.send ? { resume: (prompt: string) => void host.send!({ sessionId, prompt }) } : {}),
-    }),
-    [host, sessionId, onOpenSession],
-  );
-
-  if (!state.hydrated) {
-    return (
-      <div role="status" aria-busy className="pl-2 pr-1 py-1 text-sm text-[var(--zg-text-muted)]">
-        <span className="zg-shimmer">{labels.transcriptLoading}</span>
-      </div>
-    );
-  }
-
-  const loading = Boolean(state.loadingEarlier);
-  // The control is a row of the transcript: no ring when its rows draw no icons.
-  const icons = props.options?.showRowIcons ?? DEFAULT_TRANSCRIPT_OPTIONS.showRowIcons;
-  return (
-    <TranscriptActionsProvider value={actions}>
-      {state.hasEarlier && transcript.loadEarlier && (
-        // Same inset as the transcript's own rows (`pl-2 pr-1`), so the ring sits on the rail.
-        <div className="pl-2 pr-1 pt-1 select-none">
-          <div className="relative flex items-center gap-3 pb-3">
-            {icons && (
-              <span aria-hidden className="relative z-10 inline-flex items-center shrink-0 h-[22.4px]">
-                <span
-                  className="zg-state-tween relative flex items-center justify-center w-4 h-4 rounded-full border-2"
-                  style={RING_STYLE}
-                >
-                  {loading ? <span className="zg-arc" /> : <span className="i-ph-arrow-up text-zg-badge" />}
-                </span>
-              </span>
-            )}
-            <button
-              type="button"
-              data-testid="load-earlier-history"
-              disabled={loading}
-              onClick={() => transcript.loadEarlier?.()}
-              aria-busy={loading}
-              aria-label={loading ? labels.loadingEarlierHistory : labels.loadEarlierHistory}
-              className="zg-disclosure zg-press-subtle flex items-center gap-2 w-fit h-[22.4px] -mx-1.5 px-1.5 rounded-zg-sm text-sm text-[var(--zg-text-muted)] disabled:cursor-default"
-            >
-              <span className={loading ? 'zg-shimmer' : undefined}>
-                {loading ? labels.loadingEarlierMessages : labels.earlierHistory}
-              </span>
-              {!loading && (
-                <span aria-hidden className="i-ph-caret-up text-zg-meta shrink-0 text-[var(--zg-text-subtle)]" />
-              )}
-            </button>
-          </div>
-        </div>
-      )}
-      <Transcript {...props} events={state.events} streaming={state.running} sessionId={sessionId} />
-    </TranscriptActionsProvider>
-  );
-}

package/src/chat/PdfPreview.tsx

@@ -1,65 +0,0 @@
-/**
- * A PDF attachment in the browser's own viewer (pages, zoom, search, print),
- * sized for the lightbox. A `data:` source becomes an object URL first: a
- * frame does not load a data URL of several megabytes, and the object URL is
- * freed when the preview closes. Any other source (an object URL, the desktop
- * app's `zg-media:` address) is framed as it is.
- */
-import { useEffect, useRef, type CSSProperties } from 'react';
-
-/** Props for {@link PdfPreview}. */
-export interface PdfPreviewProps {
-  /** The PDF: a `data:` URL or any URL the page can load. */
-  src: string;
-  /** The PDF's name, the frame's title. */
-  name: string;
-  /** Extra classes on the root element. */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-/**
- * Renders a PDF in a frame showing the browser's PDF viewer.
- *
- * @param props - The PDF's `src` (a `data:` URL or any URL the page can load) and its `name`, the frame's title.
- */
-export function PdfPreview({ src, name, className, style }: PdfPreviewProps) {
-  const frameRef = useRef<HTMLIFrameElement | null>(null);
-  const inline = src.startsWith('data:');
-  useEffect(() => {
-    const frame = frameRef.current;
-    if (!inline || !frame) return;
-    const objectUrl = URL.createObjectURL(dataUrlToBlob(src));
-    frame.src = objectUrl;
-    return () => URL.revokeObjectURL(objectUrl);
-  }, [inline, src]);
-  return (
-    <div className={['zg-lightbox-pdf zg-raised border', className].filter(Boolean).join(' ')} style={style}>
-      <iframe
-        ref={frameRef}
-        src={inline ? undefined : src}
-        title={name}
-        className="block w-full h-full border-0"
-        data-testid="pdf-preview"
-      />
-    </div>
-  );
-}
-
-/**
- * Always a PDF blob, whatever the data URL's header claims: a transcript from
- * another host could pair a PDF attachment with `data:text/html`, which would
- * then run as a page framed in the app.
- */
-function dataUrlToBlob(dataUrl: string): Blob {
-  const comma = dataUrl.indexOf(',');
-  const header = dataUrl.slice(5, comma);
-  const type = 'application/pdf';
-  const payload = dataUrl.slice(comma + 1);
-  if (!header.includes(';base64')) return new Blob([decodeURIComponent(payload)], { type });
-  const binary = atob(payload);
-  const bytes = new Uint8Array(binary.length);
-  for (let i = 0; i < binary.length; i += 1) bytes[i] = binary.charCodeAt(i);
-  return new Blob([bytes], { type });
-}

package/src/chat/SessionFilterMenu.tsx

@@ -1,237 +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, or `host`, one
- * section per host, which the app lays out itself (the desktop sidebar's Per host).
- */
-export type SessionView = SessionGroupBy | 'host';
-
-/** 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>;
-  /** 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,
-  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] }));
-
-  // 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)}
-        />
-      ),
-    ],
-    [
-      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)}
-        />
-      ),
-    ],
-    [
-      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)}
-        />
-      ),
-    ],
-  ].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>
-  );
-}
-
-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,136 +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.
- * 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. */
-  onToggle: (id: string) => void;
-  /** 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,
-  onContextMenu,
-  className = '',
-  style,
-}: SessionGroupHeaderProps) {
-  const labels = useChatLabels();
-  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={collapsed ? labels.expandGroup(label) : labels.collapseGroup(label)}
-        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>
-        {/* Hidden at rest while expanded; hover or keyboard focus reveals it. */}
-        <Caret
-          open={!collapsed}
-          className={`shrink-0 ${collapsed ? 'opacity-100' : 'opacity-0 group-hover:opacity-100 group-focus-within:opacity-100'}`}
-        />
-      </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>
-  );
-}