zidane-ui 9.1.1 → 9.1.3

package/src/chat/sidebar/SidebarSessionRow.tsx

@@ -1,317 +0,0 @@
-/**
- * One chat in the sidebar list: status dot, editable title (badges where it
- * names something), what its run is doing or how long ago it was active,
- * its host, project, environment and artifacts on a second line, and the
- * actions menu (3-dots or right-click; the rows are `sessionMenuItems`).
- *
- * The row itself is `SessionListRow`; the live parts come from the app's
- * {@link SidebarLive} (`createSidebarLive`), the platform menu rows from the
- * `SidebarHost` in context.
- */
-import { Fragment, memo, useCallback, useMemo, useState, type CSSProperties } from 'react';
-import type { SessionEnvironmentSummary } from 'zidane/chat';
-import { highlightSegments, searchHighlightRanges, type Space } from 'zidane/chat/pure';
-
-import { SessionListRow } from '../SessionListRow';
-import type { SidebarRowDecoration } from '../headless/sidebar/query';
-import { ReferenceText } from '../transcript/ReferenceText';
-import { useReferenceMatches } from '../transcript/references';
-import type { RowProject } from './RowChips';
-import { SidebarDecoration } from './SidebarDecoration';
-import { sessionMenuItems, useEnvironmentActions } from './session-menu';
-import type { SidebarLive } from './sidebar-live';
-import { useSidebarHost } from './SidebarHostProvider';
-import { useSidebarLabels } from './useSidebarLabels';
-
-/**
- * Excerpt line with the query occurrences as accent `<mark>` spans. Ranges come from the TUI's highlighter
- * (`searchHighlightRanges`) so emphasis matches it exactly.
- */
-const ExcerptHighlight = memo(({ text, query }: { text: string; query: string }) => {
-  const segments = useMemo(() => highlightSegments(text, searchHighlightRanges(text, query)), [text, query]);
-  return (
-    <>
-      {segments.map((segment, i) =>
-        segment.highlighted ? (
-          <mark key={i} className="bg-transparent text-[var(--zg-accent)] font-medium">
-            {segment.text}
-          </mark>
-        ) : (
-          <Fragment key={i}>{segment.text}</Fragment>
-        ),
-      )}
-    </>
-  );
-});
-
-ExcerptHighlight.displayName = 'ExcerptHighlight';
-
-/** What a row does; one stable bag for every row of a list, so the rows' memo holds. */
-export interface SidebarRowHandlers {
-  /** Opens the session. */
-  onSelect: (sessionId: string) => void;
-  /** The rename field's text changed. */
-  onRenameValueChange: (value: string) => void;
-  /** Confirms the rename. */
-  onRenameCommit: () => void | Promise<void>;
-  /** Abandons the rename. */
-  onRenameCancel: () => void;
-  /** Starts renaming the session. */
-  onStartRename: (sessionId: string, currentTitle: string) => void;
-  /** Deletes the session (after a confirmation). */
-  onDelete: (sessionId: string, title: string, environment?: SessionEnvironmentSummary) => void;
-  /** Archives or restores it. */
-  onSetArchived: (sessionId: string, archived: boolean) => void;
-  /** Stars or unstars it. */
-  onSetFavorite: (sessionId: string, favorite: boolean) => void;
-  /** Sets its failed environment up again. */
-  onRetryEnvironment: (sessionId: string) => void;
-  /** Runs one of its environment's commands. */
-  onRunEnvironmentAction: (sessionId: string, actionId: string, label: string) => void;
-  /** Moves it to a space. */
-  onMoveToSpace: (sessionId: string, spaceId: string) => void;
-  /** Moves it to another environment of its host ("Move to…"). Absent: no row. */
-  onMoveSession?: (sessionId: string) => void;
-  /** Its menu opened. */
-  onOpenMenu: (sessionId: string) => void;
-  /** Its menu closed. */
-  onCloseMenu: (sessionId: string) => void;
-}
-
-/** Props of {@link SidebarSessionRow}. */
-export interface SidebarSessionRowProps extends SidebarRowHandlers {
-  /** The session's key. */
-  sessionId: string;
-  /** Its title. */
-  title: string;
-  /** The session's folder (`''`: none): which extensions' references its title shows. */
-  cwd?: string;
-  /** A remote host's id: no Finder for its folder. */
-  hostId?: string;
-  /** Show the host chip on the badge line (off under a header that already names the host). */
-  hostBadge?: boolean;
-  /** The space it is in. */
-  spaceId?: string;
-  /** The orchestration Main: in every space, never moved. */
-  isMain?: boolean;
-  /** The open session. */
-  isActive: boolean;
-  /** Its title is being edited. */
-  isRenaming: boolean;
-  /** Archived. */
-  archived: boolean;
-  /** Starred. */
-  favorite?: boolean;
-  /** The rename field's text. */
-  renameValue: string;
-  /** Its menu is the open one. */
-  menuOpen: boolean;
-  /** A content-search excerpt under the title, with the query highlighted. Regular rows keep their 28px. */
-  excerpt?: string;
-  /** The query the excerpt highlights. */
-  excerptQuery?: string;
-  /** In the favorites section: the project, first on the badge line (keep its identity stable for the memo). */
-  project?: RowProject;
-  /** Last activity (ms): the trailing relative time. Absent for search results. */
-  updatedAt?: number;
-  /** Non-local execution environment: badge, plus a retry action once it failed. */
-  environment?: SessionEnvironmentSummary;
-  /** Run details in the trailing slot; off: "Working". */
-  runDetails: boolean;
-  /** Artifacts on a second line (run details and artifacts both on). */
-  artifactBadges: boolean;
-  /** The spaces to move it between while Spaces is on; `null` off. */
-  spaces: readonly Space[] | null;
-  /** The app's live row parts (`createSidebarLive`, built once). */
-  live: SidebarLive;
-  /** What extensions put on the row (`createDecorator`): an icon and chips beside the title, a subtitle. */
-  decoration?: SidebarRowDecoration | null;
-  /** Extra classes on the row. */
-  className?: string;
-  /** Inline styles on the row. */
-  style?: CSSProperties;
-}
-
-/** Renders one session of the sidebar list. Memoized: keep every prop stable. */
-export const SidebarSessionRow = memo(
-  ({
-    sessionId,
-    title,
-    cwd,
-    hostId,
-    hostBadge = true,
-    spaceId,
-    isMain,
-    isActive,
-    isRenaming,
-    archived,
-    favorite = false,
-    renameValue,
-    menuOpen,
-    onSelect,
-    onRenameValueChange,
-    onRenameCommit,
-    onRenameCancel,
-    onStartRename,
-    onDelete,
-    onSetArchived,
-    onSetFavorite,
-    onRetryEnvironment,
-    onRunEnvironmentAction,
-    onMoveToSpace,
-    onMoveSession,
-    onOpenMenu,
-    onCloseMenu,
-    excerpt,
-    excerptQuery,
-    project,
-    updatedAt,
-    environment,
-    runDetails,
-    artifactBadges,
-    spaces,
-    live,
-    decoration,
-    className,
-    style,
-  }: SidebarSessionRowProps) => {
-    const { SessionStatusDot, RowMeta, RowArtifacts } = live;
-    const host = useSidebarHost();
-    const labels = useSidebarLabels();
-    /** A new commit or pull request just arrived: the row sweeps once. */
-    const [arrived, setArrived] = useState(false);
-
-    const environmentActions = useEnvironmentActions(sessionId, menuOpen && environment?.state === 'ready');
-
-    const menuItems = useMemo(
-      () =>
-        sessionMenuItems(
-          {
-            id: sessionId,
-            title,
-            cwd: cwd ?? '',
-            archived,
-            favorite,
-            ...(hostId ? { hostId } : {}),
-            ...(spaceId ? { spaceId } : {}),
-            ...(isMain ? { isMain } : {}),
-            ...(environment ? { environment } : {}),
-          },
-          { spaces, environmentActions, host },
-          {
-            rename: () => onStartRename(sessionId, title),
-            setFavorite: (next) => onSetFavorite(sessionId, next),
-            setArchived: (next) => onSetArchived(sessionId, next),
-            remove: () => onDelete(sessionId, title, environment),
-            retryEnvironment: () => onRetryEnvironment(sessionId),
-            runEnvironmentAction: (actionId, label) => onRunEnvironmentAction(sessionId, actionId, label),
-            moveToSpace: (space) => onMoveToSpace(sessionId, space),
-            ...(onMoveSession ? { moveSession: () => onMoveSession(sessionId) } : {}),
-          },
-          labels,
-        ),
-      [
-        sessionId,
-        title,
-        cwd,
-        hostId,
-        spaceId,
-        isMain,
-        archived,
-        favorite,
-        environment,
-        spaces,
-        environmentActions,
-        host,
-        labels,
-        onStartRename,
-        onDelete,
-        onSetArchived,
-        onSetFavorite,
-        onRetryEnvironment,
-        onRunEnvironmentAction,
-        onMoveToSpace,
-        onMoveSession,
-      ],
-    );
-
-    const handleSelect = useCallback(() => onSelect(sessionId), [sessionId, onSelect]);
-    const handleOpenMenu = useCallback(() => onOpenMenu(sessionId), [sessionId, onOpenMenu]);
-    const handleCloseMenu = useCallback(() => onCloseMenu(sessionId), [sessionId, onCloseMenu]);
-    const onStartRenameRow = useCallback(() => onStartRename(sessionId, title), [sessionId, title, onStartRename]);
-    // Badges only when the title names something; a plain title stays text, so a new one writes in word by word.
-    const hasReferences = useReferenceMatches(title, cwd ?? '', 'title').length > 0;
-
-    return (
-      <SessionListRow
-        id={sessionId}
-        title={title}
-        active={isActive}
-        archived={archived}
-        status={archived ? undefined : <SessionStatusDot sessionId={sessionId} />}
-        titleDisplay={
-          hasReferences ? <ReferenceText text={title} cwd={cwd ?? ''} surface="title" links={false} /> : undefined
-        }
-        {...(decoration && (decoration.icon || decoration.chips.length > 0 || decoration.component)
-          ? { badges: <SidebarDecoration decoration={decoration} sessionId={sessionId} /> }
-          : {})}
-        meta={
-          typeof updatedAt === 'number' ? (
-            <RowMeta sessionId={sessionId} updatedAt={updatedAt} details={runDetails} />
-          ) : undefined
-        }
-        sub={
-          excerpt ? (
-            <ExcerptHighlight text={excerpt} query={excerptQuery ?? ''} />
-          ) : isRenaming ? undefined : decoration?.subtitle ? (
-            <>
-              <span data-testid="row-subtitle" className="block truncate text-xs leading-4 text-[var(--zg-text-muted)]">
-                {decoration.subtitle}
-              </span>
-              <RowArtifacts
-                sessionId={sessionId}
-                enabled={artifactBadges}
-                onArrival={setArrived}
-                onSelect={onSelect}
-                {...(cwd !== undefined ? { cwd } : {})}
-                {...(hostId && hostBadge ? { hostId } : {})}
-                {...(project ? { project } : {})}
-                {...(environment ? { environment } : {})}
-              />
-            </>
-          ) : (
-            <RowArtifacts
-              sessionId={sessionId}
-              enabled={artifactBadges}
-              onArrival={setArrived}
-              onSelect={onSelect}
-              {...(cwd !== undefined ? { cwd } : {})}
-              {...(hostId && hostBadge ? { hostId } : {})}
-              {...(project ? { project } : {})}
-              {...(environment ? { environment } : {})}
-            />
-          )
-        }
-        subClassName={
-          excerpt ? 'text-xs leading-4 pt-0.5 whitespace-nowrap overflow-hidden text-[var(--zg-text-muted)]' : undefined
-        }
-        onSelect={handleSelect}
-        renaming={isRenaming}
-        renameValue={renameValue}
-        onStartRename={onStartRenameRow}
-        onRenameChange={onRenameValueChange}
-        onRenameCommit={onRenameCommit}
-        onRenameCancel={onRenameCancel}
-        menuItems={menuItems}
-        menuOpen={menuOpen}
-        onOpenMenu={handleOpenMenu}
-        onCloseMenu={handleCloseMenu}
-        arrived={arrived}
-        {...(className ? { className } : {})}
-        {...(style ? { style } : {})}
-      />
-    );
-  },
-);
-
-SidebarSessionRow.displayName = 'SidebarSessionRow';

package/src/chat/sidebar/SidebarToggleButton.tsx

@@ -1,48 +0,0 @@
-/**
- * The one sidebar toggle, for both states. An app renders it fixed next to
- * the window's native controls so it never moves or re-mounts while the
- * aside animates. Its name follows a budget-forced collapse too, so it never
- * lies about the state.
- */
-import type { CSSProperties } from 'react';
-
-import { IconButton } from '../../components/IconButton';
-import { useLayoutBudgetOptional } from '../../workspace/LayoutBudget';
-import { useSidebarLabels } from './useSidebarLabels';
-
-/** Props of {@link SidebarToggleButton}. */
-export interface SidebarToggleButtonProps {
-  /** The user collapsed the sidebar: the name says Expand. */
-  collapsed: boolean;
-  /** Toggles it. */
-  onClick: () => void;
-  /** Positioning and drag-region classes. */
-  className?: string;
-  /** Inline positioning. */
-  style?: CSSProperties;
-}
-
-/**
- * Renders the sidebar toggle.
- *
- * @param props - The state, the toggle, `className` and `style`.
- */
-export function SidebarToggleButton({
-  collapsed: collapsedProp,
-  onClick,
-  className = '',
-  style,
-}: SidebarToggleButtonProps) {
-  const labels = useSidebarLabels();
-  const budget = useLayoutBudgetOptional();
-  const collapsed = collapsedProp || (budget?.sidebarForcedCollapsed ?? false);
-  return (
-    <IconButton
-      icon="i-ph-sidebar"
-      label={collapsed ? labels.expandSidebar : labels.collapseSidebar}
-      onClick={onClick}
-      style={style}
-      className={`zg-hit-extend ${className}`}
-    />
-  );
-}