zidane-ui 9.0.4 → 9.1.3

package/src/chat/composer/AgentPickerDialog.tsx

@@ -1,99 +0,0 @@
-/**
- * The agent dialog: every profile the session's folder offers (Build, Plan,
- * Codemode, extension profiles), on the app's modal layer. Mirrors the TUI's
- * `AgentPickerModal` (`Shift+Tab` cycles, the dialog switches).
- *
- * On commit it calls the host's `controls.setAgent`, which patches the
- * session document. The host keeps the live agent when the new profile fits
- * its composition (a note announces the switch) and rebuilds it otherwise,
- * after any in-flight run. A profile that would re-read a long prompt says
- * so (`useCacheHints`). Needs a `ModalProvider` (`zidane-ui/app`).
- */
-import { useState } from 'react';
-import { accentColor } from 'zidane/chat/pure';
-
-import { ModalShell } from '../../app/ModalProvider';
-import { useColors } from '../../appearance/AppearanceProvider';
-import { MenuRow } from '../../components/Menu';
-import type { ComposerSessionView } from '../headless/composer/host-chrome';
-import { useComposerHost, useComposerLabels } from './ComposerHostProvider';
-import { useAgentProfiles } from './use-agent-profiles';
-import { useCacheHints } from './use-cache-hints';
-
-/** Props for {@link AgentPickerDialog}. */
-export interface AgentPickerDialogProps {
-  /** The session whose agent is switched. */
-  session: ComposerSessionView;
-  /** Closes the dialog. */
-  onClose: () => void;
-  /** Called once a switch is written (refresh the app's session list). */
-  onCommitted?: () => void | Promise<void>;
-}
-
-/**
- * The agent dialog (see the header).
- *
- * @param props - The {@link AgentPickerDialogProps}.
- */
-export function AgentPickerDialog({ session, onClose, onCommitted }: AgentPickerDialogProps) {
-  const setAgent = useComposerHost().controls?.setAgent;
-  const labels = useComposerLabels();
-  const COLOR = useColors();
-  const profiles = useAgentProfiles(session.cwd ?? '');
-  const [busy, setBusy] = useState<string | null>(null);
-  const cacheHint = useCacheHints(session.id);
-
-  const select = async (id: string) => {
-    if (busy || !setAgent) {
-      return;
-    }
-
-    try {
-      setBusy(id);
-      await setAgent(session.id, id);
-      await onCommitted?.();
-      onClose();
-    } finally {
-      setBusy(null);
-    }
-  };
-
-  return (
-    <ModalShell
-      title={labels.agentDialogTitle}
-      description={labels.agentDialogDescription}
-      onClose={onClose}
-      size="medium"
-    >
-      <div className="flex flex-col gap-0.5">
-        {profiles.map((profile) => {
-          const isActive = (session.agentId ?? 'build') === profile.id;
-          const hint = isActive ? undefined : cacheHint(profile.id, { agentId: profile.id });
-          return (
-            <MenuRow
-              key={profile.id}
-              size="lg"
-              onClick={() => select(profile.id)}
-              disabled={busy !== null}
-              checked={isActive}
-              /* Profile accent dot: identity (Build vs Plan color), while the
-                 check carries selection. */
-              icon={
-                <span className="w-2 h-2 rounded-full" style={{ background: accentColor(profile.accent, COLOR) }} />
-              }
-              title={profile.label}
-              description={profile.description}
-              trailing={
-                busy === profile.id ? (
-                  <span className="zg-meta">{labels.agentSwitching}</span>
-                ) : hint ? (
-                  <span className="zg-meta">{hint}</span>
-                ) : undefined
-              }
-            />
-          );
-        })}
-      </div>
-    </ModalShell>
-  );
-}

package/src/chat/composer/ApprovalDock.tsx

@@ -1,64 +0,0 @@
-/**
- * `ApprovalBar` in the composer dock: the inline card drawn as a
- * `DockCard`, and the file-edit review opened on the app's modal layer in
- * its `ModalShell` (closed once decided, or answered from another window).
- * Reads the `ApprovalsHost` (`zidane-ui/approvals`) and needs a
- * `ModalProvider` (`zidane-ui/app`) above it.
- */
-import { useCallback } from 'react';
-
-import { ModalShell, useModal } from '../../app/ModalProvider';
-import { ApprovalBar, type ApprovalFrameProps } from '../../approvals/ApprovalBar';
-import { FileEditApproval } from '../../approvals/FileEditApproval';
-import type { ApprovalRequest } from '../../approvals/headless/host';
-import { DockCard } from './DockCard';
-
-function DockFrame({ tone, className, children }: ApprovalFrameProps) {
-  return (
-    <DockCard tone={tone} className={className}>
-      {children}
-    </DockCard>
-  );
-}
-
-function FileEditApprovalModal({ request }: { request: ApprovalRequest }) {
-  const modal = useModal();
-  return (
-    <FileEditApproval
-      request={request}
-      onDone={modal.close}
-      renderShell={({ title, description, onClose, footer, children }) => (
-        <ModalShell
-          title={title}
-          description={description}
-          onClose={onClose ?? modal.close}
-          footer={footer}
-          size="xlarge"
-        >
-          {children}
-        </ModalShell>
-      )}
-    />
-  );
-}
-
-/** Props for {@link ApprovalDock}. */
-export interface ApprovalDockProps {
-  /** The conversation whose next approval shows, `null` for a draft. */
-  sessionId: string | null;
-}
-
-/**
- * The session's next approval, docked above the prompt (see the header).
- *
- * @param props - The {@link ApprovalDockProps}.
- */
-export function ApprovalDock({ sessionId }: ApprovalDockProps) {
-  const modal = useModal();
-  // `key` remounts the review for the next request: fresh hunk selection, focus and decision state.
-  const openFileEdit = useCallback(
-    (request: ApprovalRequest) => modal.open(<FileEditApprovalModal key={request.id} request={request} />),
-    [modal],
-  );
-  return <ApprovalBar sessionId={sessionId} onFileEdit={openFileEdit} renderFrame={DockFrame} />;
-}

package/src/chat/composer/ArchivedBanner.tsx

@@ -1,44 +0,0 @@
-/**
- * Replaces the whole composer cluster when the session is archived: it
- * can't be driven until it's unarchived, so nothing that looks drivable is
- * shown. A tray (where the composer sits) with one raised action.
- */
-import type { CSSProperties } from 'react';
-
-import { Tray } from '../../components/Surface';
-import { useComposerLabels } from './ComposerHostProvider';
-
-/** Props for {@link ArchivedBanner}. */
-export interface ArchivedBannerProps {
-  /** Unarchives the session. */
-  onUnarchive: () => void;
-  /** Extra classes on the tray. */
-  className?: string;
-  /** Inline styles on the tray. */
-  style?: CSSProperties;
-}
-
-/**
- * The archived session's banner in place of its composer.
- *
- * @param props - The {@link ArchivedBannerProps}.
- */
-export function ArchivedBanner({ onUnarchive, className, style }: ArchivedBannerProps) {
-  const labels = useComposerLabels();
-  return (
-    <Tray
-      radius="xl"
-      className={`flex items-center justify-between gap-3 pl-4 pr-2 py-2${className ? ` ${className}` : ''}`}
-      {...(style ? { style } : {})}
-    >
-      <span className="text-zg-ui text-[var(--zg-text-muted)]">{labels.archivedNotice}</span>
-      <button
-        type="button"
-        onClick={onUnarchive}
-        className="zg-raised zg-press border shrink-0 inline-flex items-center justify-center h-8 px-3.5 rounded-zg-md text-zg-label font-medium text-[var(--zg-text)] cursor-pointer focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--zg-ring)]"
-      >
-        {labels.unarchive}
-      </button>
-    </Tray>
-  );
-}

package/src/chat/composer/AttachmentTiles.tsx

@@ -1,211 +0,0 @@
-/**
- * Staged attachments as tiles, shared by the composer and the queued-message
- * editor: images as thumbnails, PDFs and text files as name tiles (all open
- * the lightbox), other files as a static chip, each with a remove button. A
- * removed tile shrinks away before it leaves the list (`useAttachmentRemoval`).
- */
-import { type CSSProperties, type Dispatch, type SetStateAction, useRef, useState } from 'react';
-
-import { readExitMs } from '../../motion/presence';
-import { isPdfAttachment, isTextLike } from './attachment-ingest';
-import { useComposerLabels } from './ComposerHostProvider';
-import type { ComposerAttachment as ChatAttachment } from '../headless/composer/host';
-import type { AttachmentLabelParts } from '../transcript/renderers';
-import { AttachmentIcon } from '../transcript/prompt';
-
-/** The icon and name a file tile shows; `fallbackIcon` is the icon for a name with nothing to say. */
-export type AttachmentLabelFn = (name: string, fallbackIcon?: string) => AttachmentLabelParts;
-
-/** A generic file icon (the PDF icon for a `.pdf`) and the name. The default {@link AttachmentRowProps.attachmentLabel}. */
-export const defaultAttachmentTileLabel: AttachmentLabelFn = (name, fallbackIcon = 'i-ph-file') => ({
-  icon: /\.pdf$/i.test(name) ? 'i-ph-file-pdf' : fallbackIcon,
-  name,
-});
-
-/**
- * Removal with the tile's exit: `removeAttachment` marks it exiting, and the
- * tile's width transition (or a timer on the `exit` motion's length, when
- * motion is reduced or off and there is no transition) drops it from the list. Only a removal still in
- * flight is finalized: once the list is replaced (`clearExiting`), a late
- * timer would remove a tile of the NEW list sharing that id.
- *
- * @param setAttachments - The staged list's setter.
- */
-export function useAttachmentRemoval(setAttachments: Dispatch<SetStateAction<ChatAttachment[]>>) {
-  const [exitingIds, setExitingIds] = useState<Set<string>>(new Set());
-  const inFlight = useRef(new Set<string>());
-
-  const removeAttachment = (id: string) => {
-    inFlight.current.add(id);
-    setExitingIds((current) => {
-      const next = new Set(current);
-      next.add(id);
-
-      return next;
-    });
-    // The tile's width transitionend finalizes the removal; reduced / off motion has no
-    // transition, so without this the removed attachment stayed staged (and was sent).
-    window.setTimeout(() => finalizeRemove(id), readExitMs());
-  };
-
-  const finalizeRemove = (id: string) => {
-    if (!inFlight.current.delete(id)) {
-      return;
-    }
-    setAttachments((current) => current.filter((att) => att.id !== id));
-    setExitingIds((current) => {
-      if (!current.has(id)) {
-        return current;
-      }
-
-      const next = new Set(current);
-      next.delete(id);
-
-      return next;
-    });
-  };
-
-  /** The list was replaced (sent, synced from another window): nothing is mid-exit. */
-  const clearExiting = () => {
-    inFlight.current.clear();
-    setExitingIds(new Set());
-  };
-
-  return { exitingIds, removeAttachment, finalizeRemove, clearExiting };
-}
-
-/** Props for {@link AttachmentRow}. */
-export interface AttachmentRowProps {
-  /** The staged attachments, in order. */
-  attachments: readonly ChatAttachment[];
-  /** Ids of tiles leaving (`useAttachmentRemoval`). */
-  exitingIds: Set<string>;
-  /** Starts removing a tile. */
-  onRemove: (id: string) => void;
-  /** A leaving tile finished its exit. */
-  onExited: (id: string) => void;
-  /** Opens the lightbox on a tile, from its element. */
-  onOpenLightbox: (id: string, origin: HTMLElement) => void;
-  /** The icon and name a file tile shows. Default: {@link defaultAttachmentTileLabel}. */
-  attachmentLabel?: AttachmentLabelFn;
-  /** Classes merged on the root. */
-  className?: string;
-  /** Styles on the root. */
-  style?: CSSProperties;
-}
-
-/** Attachment previews are set into the card: the tray tone, no outline. */
-const ATTACHMENT_TILE = 'zg-tray border-0 rounded-zg-md';
-
-/**
- * A row of staged attachment tiles that collapses when its last tile leaves.
- *
- * @param props - The attachments, the removal state and the handlers.
- */
-export function AttachmentRow({
-  attachments,
-  exitingIds,
-  onRemove,
-  onExited,
-  onOpenLightbox,
-  attachmentLabel: attachmentLabelParts = defaultAttachmentTileLabel,
-  className = '',
-  style,
-}: AttachmentRowProps) {
-  const labels = useComposerLabels();
-  const hasVisible = attachments.some((att) => !exitingIds.has(att.id));
-
-  return (
-    <div className={`zg-attachment-row ${className}`} style={style} data-collapsing={!hasVisible}>
-      <div className="zg-attachment-row-inner">
-        <div className="flex flex-wrap pb-1">
-          {attachments.map((att) => {
-            const exiting = exitingIds.has(att.id);
-            // Code excerpts carry a file name + range: give them a wider tile.
-            const wide = !att.mediaType.startsWith('image/') && attachmentLabelParts(att.name).detail !== undefined;
-
-            return (
-              <div
-                key={att.id}
-                data-exiting={exiting}
-                onTransitionEnd={(event) => {
-                  if (exiting && event.propertyName === 'width' && event.currentTarget === event.target) {
-                    onExited(att.id);
-                  }
-                }}
-                className="zg-attachment-item relative group"
-                style={wide ? ({ '--zg-attachment-size': '120px' } as CSSProperties) : undefined}
-              >
-                <div className="zg-attachment-content relative">
-                  {/*
-                   * Images, PDFs and text-like attachments are clickable:
-                   * each has a preview (the image, Chromium's PDF viewer,
-                   * the decoded `<pre>` panel). Anything else renders as a
-                   * static file chip.
-                   */}
-                  {att.mediaType.startsWith('image/') ? (
-                    <button
-                      type="button"
-                      onClick={(event) => onOpenLightbox(att.id, event.currentTarget)}
-                      aria-label={labels.viewAttachment(att.name)}
-                      className={`${ATTACHMENT_TILE} w-16 h-16 overflow-hidden cursor-zoom-in block p-0`}
-                    >
-                      <img src={att.dataUrl} alt={att.name} className="w-full h-full object-cover" />
-                    </button>
-                  ) : isPdfAttachment(att) || isTextLike(att) ? (
-                    <button
-                      type="button"
-                      onClick={(event) => onOpenLightbox(att.id, event.currentTarget)}
-                      title={labels.attachmentTitle(att.name, att.mediaType || labels.attachmentTextType)}
-                      aria-label={labels.viewAttachment(att.name)}
-                      className={`${ATTACHMENT_TILE} w-full h-16 flex flex-col items-center justify-center gap-1 px-2 overflow-hidden cursor-zoom-in`}
-                    >
-                      {(() => {
-                        // A PDF named without `.pdf` (found by its signature) still shows as one.
-                        const parts = attachmentLabelParts(
-                          att.name,
-                          isPdfAttachment(att) ? 'i-ph-file-pdf' : 'i-ph-file-text',
-                        );
-                        return (
-                          <>
-                            <AttachmentIcon parts={parts} className="text-lg" />
-                            <span className="text-zg-badge text-[var(--zg-text)] truncate max-w-full leading-none">
-                              {parts.name}
-                            </span>
-                            {parts.detail && (
-                              <span className="text-[9px] text-[var(--zg-text-muted)] truncate max-w-full leading-none">
-                                {parts.detail}
-                              </span>
-                            )}
-                          </>
-                        );
-                      })()}
-                    </button>
-                  ) : (
-                    <div
-                      title={labels.attachmentTitle(att.name, att.mediaType || labels.attachmentUnknownType)}
-                      className={`${ATTACHMENT_TILE} w-16 h-16 flex flex-col items-center justify-center gap-1 px-1 overflow-hidden`}
-                    >
-                      <span className="i-ph-file text-[var(--zg-text-muted)] text-lg" aria-hidden />
-                      <span className="text-[9px] text-[var(--zg-text-muted)] truncate max-w-full leading-none">
-                        {att.name}
-                      </span>
-                    </div>
-                  )}
-                  <button
-                    type="button"
-                    onClick={() => onRemove(att.id)}
-                    aria-label={labels.removeAttachment(att.name)}
-                    className="zg-raised border absolute -top-1.5 -right-1.5 w-5 h-5 rounded-full text-[var(--zg-text-muted)] hover:text-[var(--zg-text)] flex items-center justify-center cursor-pointer p-0 opacity-0 group-hover:opacity-100 focus-visible:opacity-100"
-                  >
-                    <span className="i-ph-x text-xs" />
-                  </button>
-                </div>
-              </div>
-            );
-          })}
-        </div>
-      </div>
-    </div>
-  );
-}