zidane-ui 9.1.1 → 9.1.3

package/src/settings/sections/environments/EnvironmentsSection.tsx

@@ -1,549 +0,0 @@
-/**
- * Settings › Environments: where new sessions run, over the settings host's
- * `environments` group. One card per kind the host registers (Local with its
- * OS sandbox, Worktree, any provider), drawn from its descriptors, so a new
- * provider shows up here with no change.
- *
- * The default picker on top, then a card per kind: icon, name, description,
- * status, on/off switch, and its options below it while it is on. Choice
- * options with details or long labels stack as a radio list, short ones sit
- * in a segmented control.
- *
- * Every edit goes through `update` (validated against the kind's schema
- * there; secrets stored host-side and never returned, only "configured").
- * The list is read again after each edit and whenever the settings it
- * depends on change elsewhere.
- */
-import { useCallback, useEffect, useState, type CSSProperties } from 'react';
-import type { EnvironmentDescriptor, EnvironmentFieldDescriptor, EnvironmentSettingsChange } from 'zidane/chat';
-import { parseMachineKind } from 'zidane/chat/pure';
-
-import { HostBadge } from '../../../chat/HostBadge';
-import { constant, useReadable, type Readable } from '../../../chat/headless/store';
-import { BTN_SECONDARY } from '../../../components/button';
-import {
-  ErrorNote,
-  FormCard,
-  FormSection,
-  INPUT_CLASS as WELL_INPUT_CLASS,
-  MetaChip,
-  RowText,
-  Switch,
-} from '../../../components/Form';
-import { Segmented } from '../../../components/Segmented';
-import { environmentKindIcon } from '../../../git/headless/environment';
-import type { MachineLinksStatus } from '../../../machines/headless/host';
-import { hostSettingsFocus } from '../../../machines/headless/settings-focus';
-import { useMachinesHost } from '../../../machines/MachinesProvider';
-import { toSettingsError, type SettingsError } from '../../headless/host';
-import { useSettingsHost } from '../../SettingsProvider';
-import { SettingsPanel, SettingsPanelBody, useSettingsSection } from '../../section';
-import { SettingsTutorial } from '../../SettingsTutorial';
-import { useCatalogSharedLabels, useSettingsValues } from '../shared/catalog';
-import { useSectionLabels } from '../use-section-labels';
-import { DEFAULT_ENVIRONMENTS_SECTION_LABELS, type EnvironmentsSectionLabels } from './labels';
-
-/** The Environments section's strings, overridable through `LabelsProvider`. */
-export function useEnvironmentsSectionLabels(): EnvironmentsSectionLabels {
-  return useSectionLabels(DEFAULT_ENVIRONMENTS_SECTION_LABELS);
-}
-
-type FieldValue = EnvironmentFieldDescriptor['value'] | null;
-type Update = (change: EnvironmentSettingsChange) => Promise<void>;
-
-const INPUT_CLASS = `${WELL_INPUT_CLASS} !w-64 max-w-full`;
-
-/** Props for {@link EnvironmentsSection}. */
-export interface EnvironmentsSectionProps {
-  /** The folder new sessions would start in (`null`: none; kinds are described without one). */
-  cwd: string | null;
-  /** Extra classes on the root. */
-  className?: string;
-  /** Inline styles on the root. */
-  style?: CSSProperties;
-}
-
-/**
- * Renders the environment kinds of the nearest `SettingsProvider`'s host. Without the host's
- * `update` every control is read-only; without `verify` there is no connection test.
- *
- * @param props - The folder, `className` and `style`.
- */
-export function EnvironmentsSection({ cwd, className, style }: EnvironmentsSectionProps) {
-  const host = useSettingsHost().environments;
-  const l = useEnvironmentsSectionLabels();
-  const shared = useCatalogSharedLabels();
-  const settings = useSettingsValues();
-  const [descriptors, setDescriptors] = useState<readonly EnvironmentDescriptor[] | null>(null);
-  const [error, setError] = useState<SettingsError | null>(null);
-
-  // The settings the descriptors depend on: read again when any of them changes.
-  const dependency = JSON.stringify([
-    settings?.environments ?? null,
-    settings?.sandbox ?? null,
-    settings?.sandboxNetwork ?? null,
-    settings?.sandboxAllowWrite ?? null,
-  ]);
-
-  const reload = useCallback(async () => {
-    if (!host) return;
-    try {
-      setDescriptors(await host.list(cwd ?? ''));
-    } catch (err) {
-      setError(toSettingsError(err));
-    }
-  }, [host, cwd]);
-
-  useEffect(() => {
-    // eslint-disable-next-line react-hooks/set-state-in-effect -- the kinds land when the host answers
-    void reload();
-  }, [reload, dependency]);
-
-  const write = host?.update;
-  const update = useCallback(
-    async (change: EnvironmentSettingsChange) => {
-      if (!write) return;
-      setError(null);
-      try {
-        await write(change);
-      } catch (err) {
-        setError(toSettingsError(err));
-      }
-      await reload();
-    },
-    [write, reload],
-  );
-  const onUpdate = write ? update : undefined;
-
-  if (!descriptors) {
-    return (
-      <SettingsPanel className={className} style={style}>
-        <SettingsPanelBody>
-          {host && (
-            <p className="text-xs text-[var(--zg-text-muted)] px-1 m-0">
-              {error ? shared.catalogError(error) : l.environmentsSectionLoading}
-            </p>
-          )}
-        </SettingsPanelBody>
-      </SettingsPanel>
-    );
-  }
-
-  const enabled = descriptors.filter((d) => d.enabled);
-  const defaultKind = descriptors.find((d) => d.isDefault)?.kind ?? 'local';
-
-  return (
-    <SettingsPanel className={className} style={style}>
-      <SettingsPanelBody>
-        <div className="space-y-5">
-          <SettingsTutorial topic="environments" />
-          {error && (
-            <ErrorNote>
-              <span className="flex items-start gap-2">
-                <span aria-hidden className="i-ph-warning-circle text-sm shrink-0 mt-px" />
-                <span className="min-w-0">{shared.catalogError(error)}</span>
-              </span>
-            </ErrorNote>
-          )}
-
-          <FormSection>
-            <div className="flex flex-col items-start gap-3 px-3 py-3">
-              <RowText
-                label={l.environmentsSectionDefault}
-                description={l.environmentsSectionDefaultHint}
-                truncate={false}
-              />
-              <Segmented
-                value={defaultKind}
-                onChange={(kind) => void update({ kind, makeDefault: true })}
-                options={enabled.map((d) => ({
-                  value: d.kind,
-                  label: d.label,
-                  icon: environmentKindIcon(d.kind),
-                  ...(onUpdate ? {} : { disabled: true }),
-                }))}
-                ariaLabel={l.environmentsSectionDefault}
-                className="max-w-full overflow-x-auto"
-              />
-            </div>
-          </FormSection>
-
-          <FormSection layout="cards">
-            {descriptors.map((descriptor) => (
-              <EnvironmentCard
-                key={descriptor.kind}
-                descriptor={descriptor}
-                baseLabel={descriptors.find((d) => d.kind === parseMachineKind(descriptor.kind)?.base)?.label}
-                onUpdate={onUpdate}
-              />
-            ))}
-          </FormSection>
-        </div>
-      </SettingsPanelBody>
-    </SettingsPanel>
-  );
-}
-
-function EnvironmentCard({
-  descriptor,
-  baseLabel,
-  onUpdate,
-}: {
-  descriptor: EnvironmentDescriptor;
-  /** A machine's kind: the label of the kind it runs (`Local` for `local@desk`), its machine shown as a badge. */
-  baseLabel?: string | undefined;
-  onUpdate?: Update;
-}) {
-  const l = useEnvironmentsSectionLabels();
-  const shared = useCatalogSharedLabels();
-  const verify = useSettingsHost().environments?.verify;
-  const { kind } = descriptor;
-  const isLocal = kind === 'local';
-  const [test, setTest] = useState<{ state: 'running' } | { state: 'done'; ok: boolean; text: string } | null>(null);
-  const runTest = () => {
-    if (!verify) return;
-    setTest({ state: 'running' });
-    verify(kind)
-      .then((result) =>
-        setTest({
-          state: 'done',
-          ok: result.ok,
-          text: result.ok ? (result.detail ?? l.environmentsSectionConnected) : result.reason,
-        }),
-      )
-      .catch((err: unknown) => setTest({ state: 'done', ok: false, text: shared.catalogError(toSettingsError(err)) }));
-  };
-  const fields = descriptor.enabled ? descriptor.fields.filter((field) => field.visible) : [];
-  const setValue = (key: string, value: FieldValue) => void onUpdate?.({ kind, values: { [key]: value ?? null } });
-
-  return (
-    <FormCard>
-      <div className="flex items-start gap-3 px-4 py-3.5">
-        <span
-          aria-hidden
-          className={`zg-tray shrink-0 inline-flex items-center justify-center w-8 h-8 rounded-zg-md ${
-            descriptor.enabled ? 'text-[var(--zg-text)]' : 'text-[var(--zg-text-muted)]'
-          }`}
-        >
-          <span className={`${environmentKindIcon(kind)} text-base`} />
-        </span>
-        <div className="flex-1 min-w-0">
-          <div className="flex items-center gap-2 flex-wrap">
-            <span
-              className={`text-sm font-medium ${descriptor.enabled ? 'text-[var(--zg-text)]' : 'text-[var(--zg-text-muted)]'}`}
-            >
-              {descriptor.machine ? (baseLabel ?? descriptor.label) : descriptor.label}
-            </span>
-            {descriptor.machine && <MachineBadge machine={descriptor.machine} />}
-            {descriptor.isDefault && <MetaChip tone="accent">{l.environmentsSectionDefaultChip}</MetaChip>}
-            {descriptor.enabled && !descriptor.available && (
-              <MetaChip tone="danger">{l.environmentsSectionNotReady}</MetaChip>
-            )}
-          </div>
-          {descriptor.description && (
-            <div className="text-xs text-[var(--zg-text-muted)] mt-0.5">{descriptor.description}</div>
-          )}
-          {test?.state === 'done' && (
-            <div
-              role="status"
-              className={`flex items-start gap-1.5 text-xs mt-1.5 ${test.ok ? 'text-[var(--zg-success)]' : 'text-[var(--zg-danger)]'}`}
-            >
-              <span aria-hidden className={`${test.ok ? 'i-ph-check-circle' : 'i-ph-x-circle'} text-sm shrink-0`} />
-              <span className="min-w-0">{test.text}</span>
-            </div>
-          )}
-          {descriptor.enabled && !descriptor.available && descriptor.reason && (
-            <div className="text-xs text-[var(--zg-text-muted)] mt-1">
-              <span className="text-[var(--zg-danger)]">{l.environmentsSectionNotAvailable}</span>
-              {descriptor.reason}
-            </div>
-          )}
-        </div>
-        {descriptor.canVerify && descriptor.enabled && verify && (
-          <button
-            type="button"
-            onClick={runTest}
-            disabled={test?.state === 'running'}
-            className={`${BTN_SECONDARY} self-center`}
-          >
-            {test?.state === 'running' ? (
-              <>
-                <span aria-hidden className="i-ph-circle-notch animate-spin text-xs" />
-                {l.environmentsSectionTesting}
-              </>
-            ) : (
-              l.environmentsSectionTest
-            )}
-          </button>
-        )}
-        {isLocal ? (
-          <span className="zg-meta shrink-0 self-center">{l.environmentsSectionAlwaysOn}</span>
-        ) : (
-          <button
-            type="button"
-            role="switch"
-            aria-checked={descriptor.enabled}
-            aria-label={
-              descriptor.enabled
-                ? l.environmentsSectionTurnOff(descriptor.label)
-                : l.environmentsSectionTurnOn(descriptor.label)
-            }
-            title={descriptor.enabled ? l.environmentsSectionOffered : l.environmentsSectionHidden}
-            disabled={!onUpdate}
-            onClick={() => void onUpdate?.({ kind, enabled: !descriptor.enabled })}
-            className="shrink-0 self-center bg-transparent border-0 p-0 cursor-pointer rounded-full focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--zg-ring)]"
-          >
-            <Switch on={descriptor.enabled} />
-          </button>
-        )}
-      </div>
-
-      {fields.length > 0 && (
-        <div className="border-t border-[var(--zg-hairline)] p-1">
-          {fields.map((field) => (
-            <FieldRow
-              key={field.key}
-              field={field}
-              readOnly={!onUpdate}
-              onChange={(value) => setValue(field.key, value)}
-            />
-          ))}
-        </div>
-      )}
-    </FormCard>
-  );
-}
-
-const NO_LINKS: Readable<MachineLinksStatus> = constant({ shares: [], uses: [] });
-
-/**
- * A machine kind's machine as a host badge: its name and a dot for online or offline. The machine is a
- * saved server lent to this computer; the badge opens that server's page in Settings › Hosts once this
- * computer's links say which saved server it is.
- */
-function MachineBadge({ machine }: { machine: NonNullable<EnvironmentDescriptor['machine']> }) {
-  const { links } = useMachinesHost();
-  const { uses } = useReadable(links?.state ?? NO_LINKS);
-  const { select } = useSettingsSection();
-  const hostId = uses.find((use) => use.machineName === machine.name)?.hostId;
-  return (
-    <HostBadge
-      host={{
-        id: hostId ?? machine.id,
-        kind: 'server',
-        name: machine.name,
-        status: machine.status === 'online' ? 'connected' : 'offline',
-      }}
-      {...(hostId ? { onOpen: () => select('hosts', hostSettingsFocus(hostId)) } : {})}
-    />
-  );
-}
-
-interface FieldProps {
-  field: EnvironmentFieldDescriptor;
-  readOnly: boolean;
-  onChange: (value: FieldValue) => void;
-}
-
-function FieldRow({ field, readOnly, onChange }: FieldProps) {
-  if (field.type === 'boolean') {
-    const on = field.value === true;
-    return (
-      <button
-        type="button"
-        role="switch"
-        aria-checked={on}
-        disabled={readOnly}
-        onClick={() => onChange(!on)}
-        className="zg-press-subtle flex items-center gap-4 w-full text-left px-3 py-2.5 rounded-zg-sm bg-transparent border-0 cursor-pointer text-[var(--zg-text)] hover:before:bg-[var(--zg-row-hover)] transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-[var(--zg-ring)]"
-      >
-        <FieldLabel field={field} />
-        <Switch on={on} />
-      </button>
-    );
-  }
-  if (field.type === 'choice' && field.choices?.length) {
-    return <ChoiceField field={field} readOnly={readOnly} onChange={onChange} />;
-  }
-  if (field.type === 'secret') return <SecretRow field={field} readOnly={readOnly} onChange={onChange} />;
-  return <TextRow field={field} readOnly={readOnly} onChange={onChange} />;
-}
-
-function FieldLabel({ field, note }: { field: EnvironmentFieldDescriptor; note?: string }) {
-  return (
-    <div className="flex-1 min-w-0">
-      <div className="text-zg-ui text-[var(--zg-text)]">{field.label}</div>
-      {field.description && <div className="text-xs text-[var(--zg-text-muted)] mt-0.5">{field.description}</div>}
-      {note && <div className="zg-meta mt-1">{note}</div>}
-    </div>
-  );
-}
-
-/**
- * Short, detail-free options (Allow / Deny) sit inline as a segmented control; anything with details
- * or long labels stacks as a radio list, so the label column never gets squeezed.
- */
-function ChoiceField({ field, readOnly, onChange }: FieldProps) {
-  const choices = field.choices ?? [];
-  const current = typeof field.value === 'string' ? field.value : '';
-  const compact = choices.length <= 3 && choices.every((choice) => !choice.description && choice.label.length <= 14);
-
-  if (compact) {
-    return (
-      <div className="flex items-center gap-4 px-3 py-2.5">
-        <FieldLabel field={field} />
-        <Segmented
-          value={current}
-          onChange={(value) => onChange(value)}
-          options={choices.map((choice) => ({
-            value: choice.value,
-            label: choice.label,
-            ...(readOnly ? { disabled: true } : {}),
-          }))}
-          ariaLabel={field.label}
-          className="shrink-0"
-        />
-      </div>
-    );
-  }
-
-  return (
-    <div className="px-3 py-2.5">
-      <FieldLabel field={field} />
-      {/* Up to three options sit side by side as tiles; more stack. The chosen tile is the one raised off the tray. */}
-      <div
-        role="radiogroup"
-        aria-label={field.label}
-        className="zg-tray mt-2.5 grid gap-1 p-1 rounded-zg-lg"
-        style={choices.length <= 3 ? { gridTemplateColumns: `repeat(${choices.length}, minmax(0, 1fr))` } : undefined}
-      >
-        {choices.map((choice) => {
-          const selected = choice.value === current;
-          return (
-            <button
-              key={choice.value}
-              type="button"
-              role="radio"
-              aria-checked={selected}
-              disabled={readOnly}
-              onClick={() => !selected && onChange(choice.value)}
-              className={`zg-press-subtle flex items-start gap-2.5 w-full h-full text-left px-3 py-2.5 rounded-zg-md cursor-pointer transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-[var(--zg-ring)] ${
-                selected
-                  ? 'zg-raised border ring-1 ring-[color-mix(in_srgb,var(--zg-accent)_45%,transparent)]'
-                  : 'border border-transparent bg-transparent hover:before:bg-[var(--zg-row-hover)]'
-              }`}
-            >
-              <span
-                aria-hidden
-                className={`mt-[3px] shrink-0 inline-flex items-center justify-center w-3.5 h-3.5 rounded-full border ${
-                  selected ? 'border-[var(--zg-accent)]' : 'border-[var(--zg-text-muted)]'
-                }`}
-              >
-                {selected && <span className="w-1.5 h-1.5 rounded-full bg-[var(--zg-accent)]" />}
-              </span>
-              <span className="min-w-0">
-                <span className="block text-zg-ui text-[var(--zg-text)]">{choice.label}</span>
-                {choice.description && (
-                  <span className="block text-xs text-[var(--zg-text-muted)] mt-0.5">{choice.description}</span>
-                )}
-              </span>
-            </button>
-          );
-        })}
-      </div>
-    </div>
-  );
-}
-
-/** String / path / number: free input, committed on blur or Enter; empty resets to the default. */
-function TextRow({ field, readOnly, onChange }: FieldProps) {
-  const l = useEnvironmentsSectionLabels();
-  const current = field.value === undefined ? '' : String(field.value);
-  const [draft, setDraft] = useState(current);
-
-  useEffect(() => {
-    // eslint-disable-next-line react-hooks/set-state-in-effect -- a value saved elsewhere replaces the draft
-    setDraft(current);
-  }, [current]);
-
-  const commit = () => {
-    const next = draft.trim();
-    if (next === current) return;
-    onChange(next === '' ? null : field.type === 'number' ? Number(next) : next);
-  };
-
-  return (
-    <div className="flex items-center gap-4 px-3 py-2.5">
-      <FieldLabel field={field} note={field.fromEnv ? l.environmentsSectionFromEnv(field.fromEnv) : undefined} />
-      <input
-        type={field.type === 'number' ? 'number' : 'text'}
-        value={draft}
-        readOnly={readOnly}
-        onChange={(e) => setDraft(e.target.value)}
-        onBlur={commit}
-        onKeyDown={(e) => {
-          if (e.key === 'Enter') {
-            e.preventDefault();
-            e.currentTarget.blur();
-          }
-        }}
-        spellCheck={false}
-        placeholder={field.placeholder ?? (field.default !== undefined ? String(field.default) : '')}
-        aria-label={field.label}
-        className={`${INPUT_CLASS} shrink-0`}
-      />
-    </div>
-  );
-}
-
-/** Write-only: the stored value never comes back, only whether one is configured. */
-function SecretRow({ field, readOnly, onChange }: FieldProps) {
-  const l = useEnvironmentsSectionLabels();
-  const [draft, setDraft] = useState('');
-  const storedHere = field.configured === true && !field.fromEnv;
-  const status = field.fromEnv
-    ? l.environmentsSectionUsingEnv(field.fromEnv)
-    : field.configured
-      ? l.environmentsSectionSecretSaved
-      : l.environmentsSectionSecretUnset;
-
-  const commit = () => {
-    if (!draft.trim()) return;
-    onChange(draft.trim());
-    setDraft('');
-  };
-
-  return (
-    <div className="flex items-center gap-4 px-3 py-2.5">
-      <FieldLabel field={field} note={status} />
-      <div className="shrink-0 flex items-center gap-2">
-        <input
-          type="password"
-          autoComplete="off"
-          value={draft}
-          readOnly={readOnly}
-          onChange={(e) => setDraft(e.target.value)}
-          onBlur={commit}
-          onKeyDown={(e) => {
-            if (e.key === 'Enter') {
-              e.preventDefault();
-              e.currentTarget.blur();
-            }
-          }}
-          placeholder={
-            field.configured
-              ? l.environmentsSectionSecretReplace
-              : (field.placeholder ?? l.environmentsSectionSecretPlaceholder)
-          }
-          aria-label={field.label}
-          className={INPUT_CLASS}
-        />
-        {storedHere && !readOnly && (
-          <button type="button" className={BTN_SECONDARY} onClick={() => onChange(null)}>
-            {l.environmentsSectionClear}
-          </button>
-        )}
-      </div>
-    </div>
-  );
-}

package/src/settings/sections/environments/labels.ts

@@ -1,31 +0,0 @@
-/**
- * The Environments section's strings. Overridable through `LabelsProvider`.
- */
-
-/** The default English strings of the Environments section. */
-export const DEFAULT_ENVIRONMENTS_SECTION_LABELS = {
-  environmentsSectionLoading: 'Loading environments…',
-  environmentsSectionDefault: 'Default for new sessions',
-  environmentsSectionDefaultHint: 'Pick another one per session in the composer.',
-  environmentsSectionDefaultChip: 'Default',
-  environmentsSectionNotReady: 'Not ready',
-  environmentsSectionNotAvailable: 'Not available. ',
-  environmentsSectionTesting: 'Testing…',
-  environmentsSectionTest: 'Test connection',
-  environmentsSectionConnected: 'Connected.',
-  environmentsSectionAlwaysOn: 'Always on',
-  environmentsSectionTurnOff: (label: string) => `Turn off ${label}`,
-  environmentsSectionTurnOn: (label: string) => `Turn on ${label}`,
-  environmentsSectionOffered: 'Offered for new sessions',
-  environmentsSectionHidden: 'Hidden from new sessions',
-  environmentsSectionFromEnv: (name: string) => `From $${name}`,
-  environmentsSectionUsingEnv: (name: string) => `Using $${name}`,
-  environmentsSectionSecretSaved: 'Saved in a file only you can read, never in settings',
-  environmentsSectionSecretUnset: 'Not set',
-  environmentsSectionSecretReplace: 'Replace…',
-  environmentsSectionSecretPlaceholder: 'Paste a key',
-  environmentsSectionClear: 'Clear',
-};
-
-/** The shape of the Environments section's label dictionary. */
-export type EnvironmentsSectionLabels = typeof DEFAULT_ENVIRONMENTS_SECTION_LABELS;