@robota-sdk/agent-ui-web 0.0.0-stage → 3.0.0-beta.100

package/src/components/SettingsPermissionsSection.tsx

@@ -0,0 +1,137 @@
+import { Trash2 } from 'lucide-react';
+import React, { useId } from 'react';
+
+import { SettingsPopupField } from './SettingsFields.js';
+
+import type { ISettingsPermissionRule, ISettingsSnapshot } from '@robota-sdk/agent-interface-session';
+
+const KIND_LABEL: Readonly<Record<ISettingsPermissionRule['kind'], string>> = {
+  allow: 'Allow',
+  deny: 'Deny',
+  ask: 'Ask',
+};
+
+const KIND_VERB: Readonly<Record<ISettingsPermissionRule['kind'], string>> = {
+  allow: 'allowed',
+  deny: 'denied',
+  ask: 'asked about',
+};
+
+function PermissionRuleRow({
+  rule,
+  onRequestRemove,
+}: {
+  rule: ISettingsPermissionRule;
+  onRequestRemove: (rule: ISettingsPermissionRule) => void;
+}): React.ReactElement {
+  return (
+    <li className="flex items-center justify-between gap-3 rounded-lg px-2.5 py-2 hover:bg-hover">
+      <div className="min-w-0">
+        <p className="truncate text-[13.5px] text-foreground">
+          <span className="font-medium">{KIND_LABEL[rule.kind]}</span>{' '}
+          <span className="font-mono text-[12.5px]">{rule.pattern}</span>
+        </p>
+        <p className="truncate text-[12px] text-muted-foreground">{rule.source}</p>
+      </div>
+      {rule.removable ? (
+        <button
+          type="button"
+          aria-label={`Remove rule: ${KIND_LABEL[rule.kind]} ${rule.pattern}`}
+          onClick={() => onRequestRemove(rule)}
+          className="flex-shrink-0 rounded-md p-1.5 text-muted-foreground hover:bg-hover hover:text-destructive"
+        >
+          <Trash2 size={15} strokeWidth={1.75} />
+        </button>
+      ) : null}
+    </li>
+  );
+}
+
+/**
+ * Default permission mode, the rules `/permissions` shows, and the sandbox switch (#3282 §4a).
+ * "Skip all checks" as the mode and a preset that would set it both go through
+ * `onRequestModeChange`'s parent-owned confirmation before anything is sent.
+ */
+export function SettingsPermissionsSection({
+  snapshot,
+  onRequestModeChange,
+  onToggleSandbox,
+  onRequestRemoveRule,
+}: {
+  snapshot: ISettingsSnapshot;
+  onRequestModeChange: (mode: string) => void;
+  onToggleSandbox: (enabled: boolean) => void;
+  onRequestRemoveRule: (rule: ISettingsPermissionRule) => void;
+}): React.ReactElement {
+  const sandboxLabelId = useId();
+  const { sandbox } = snapshot;
+
+  return (
+    <section aria-labelledby="settings-permissions-heading" className="flex flex-col gap-5">
+      <div>
+        <h3 id="settings-permissions-heading" className="sr-only">
+          Permissions
+        </h3>
+        <SettingsPopupField
+          label="Default permission mode"
+          value={snapshot.permissionMode.current}
+          options={snapshot.permissionMode.choices}
+          onChange={onRequestModeChange}
+        />
+      </div>
+
+      <div>
+        <h4 className="mb-1.5 text-[13px] font-medium text-foreground">Rules</h4>
+        {snapshot.permissionRules.length === 0 ? (
+          <p className="text-[13px] leading-snug text-muted-foreground">
+            No permission rules are configured — the default mode above governs every action.
+          </p>
+        ) : (
+          <ul className="space-y-0.5">
+            {snapshot.permissionRules.map((rule) => (
+              <PermissionRuleRow key={rule.id} rule={rule} onRequestRemove={onRequestRemoveRule} />
+            ))}
+          </ul>
+        )}
+      </div>
+
+      <div className="flex items-start justify-between gap-4 border-t border-border/60 pt-4">
+        <div className="min-w-0">
+          <span id={sandboxLabelId} className="text-[14px] font-medium text-foreground">
+            Sandbox
+          </span>
+          <p className="mt-0.5 text-[12.5px] leading-snug text-muted-foreground">
+            {sandbox.description}
+          </p>
+          {!sandbox.available && sandbox.unavailableReason ? (
+            <p className="mt-0.5 text-[12.5px] text-destructive">
+              Not available on this machine: {sandbox.unavailableReason}
+            </p>
+          ) : null}
+        </div>
+        <button
+          type="button"
+          role="switch"
+          aria-checked={sandbox.enabled}
+          aria-labelledby={sandboxLabelId}
+          disabled={!sandbox.available}
+          onClick={() => onToggleSandbox(!sandbox.enabled)}
+          className={`relative h-6 w-11 flex-shrink-0 rounded-full transition-colors ${
+            sandbox.enabled ? 'bg-primary' : 'bg-raised'
+          } ${!sandbox.available ? 'cursor-not-allowed opacity-50' : ''}`}
+        >
+          <span
+            className={`absolute top-0.5 h-5 w-5 rounded-full bg-white shadow transition-transform ${
+              sandbox.enabled ? 'translate-x-[22px]' : 'translate-x-0.5'
+            }`}
+          />
+        </button>
+      </div>
+    </section>
+  );
+}
+
+/** Reused by the removal confirmation copy in `SettingsScreen`. */
+export function describePermissionRuleRemoval(rule: ISettingsPermissionRule): string {
+  return `"${rule.pattern}" will no longer be ${KIND_VERB[rule.kind]} automatically.`;
+}

package/src/components/SettingsPluginsSection.tsx

@@ -0,0 +1,165 @@
+'use client';
+
+import { RefreshCw, Trash2 } from 'lucide-react';
+import React, { useId, useState } from 'react';
+
+import type { ISettingsPlugin, ISettingsSnapshot } from '@robota-sdk/agent-interface-session';
+
+function PluginRow({
+  plugin,
+  canInstall,
+  onToggleEnabled,
+  onRequestUninstall,
+}: {
+  plugin: ISettingsPlugin;
+  canInstall: boolean;
+  onToggleEnabled: (enabled: boolean) => void;
+  onRequestUninstall: () => void;
+}): React.ReactElement {
+  const labelId = useId();
+  return (
+    <li className="flex items-start justify-between gap-3 border-b border-border/60 py-3 last:border-b-0">
+      <div className="min-w-0 flex-1">
+        <span id={labelId} className="truncate text-[14px] font-medium text-foreground">
+          {plugin.name}
+        </span>
+        {plugin.description ? (
+          <p className="mt-0.5 text-[12.5px] leading-snug text-muted-foreground">{plugin.description}</p>
+        ) : null}
+      </div>
+      <div className="flex flex-shrink-0 items-center gap-2">
+        {canInstall ? (
+          <button
+            type="button"
+            aria-label={`Uninstall ${plugin.name}`}
+            onClick={onRequestUninstall}
+            className="rounded-md p-1.5 text-muted-foreground hover:bg-hover hover:text-destructive"
+          >
+            <Trash2 size={15} strokeWidth={1.75} />
+          </button>
+        ) : null}
+        <button
+          type="button"
+          role="switch"
+          aria-checked={plugin.enabled}
+          aria-labelledby={labelId}
+          onClick={() => onToggleEnabled(!plugin.enabled)}
+          className={`relative h-6 w-11 flex-shrink-0 rounded-full transition-colors ${
+            plugin.enabled ? 'bg-primary' : 'bg-raised'
+          }`}
+        >
+          <span
+            className={`absolute top-0.5 h-5 w-5 rounded-full bg-white shadow transition-transform ${
+              plugin.enabled ? 'translate-x-[22px]' : 'translate-x-0.5'
+            }`}
+          />
+        </button>
+      </div>
+    </li>
+  );
+}
+
+/**
+ * The Plugins section (#3282 §4 part b-2): every installed plugin's name, description and enabled
+ * state, an enable/disable switch, a section-level Reload, and — local surfaces only — install and
+ * uninstall, since installing runs third-party code. `canInstall` (from the snapshot) mirrors the
+ * refusal `/plugin install|uninstall` itself gives a remote device or an observer.
+ */
+export function SettingsPluginsSection({
+  snapshot,
+  onTogglePlugin,
+  onReload,
+  reloading,
+  onRequestInstall,
+  onRequestUninstall,
+}: {
+  snapshot: ISettingsSnapshot;
+  onTogglePlugin: (pluginId: string, enabled: boolean) => void;
+  onReload: () => void;
+  reloading: boolean;
+  onRequestInstall: (pluginId: string) => void;
+  onRequestUninstall: (plugin: ISettingsPlugin) => void;
+}): React.ReactElement {
+  const [installDraft, setInstallDraft] = useState('');
+  const { plugins, canInstall } = snapshot.plugins;
+  const installId = useId();
+
+  function submitInstall(): void {
+    const trimmed = installDraft.trim();
+    if (trimmed.length === 0) return;
+    onRequestInstall(trimmed);
+    setInstallDraft('');
+  }
+
+  return (
+    <section aria-labelledby="settings-plugins-heading" className="flex flex-col gap-3">
+      <div className="flex items-center justify-between gap-3">
+        <h3 id="settings-plugins-heading" className="text-[14px] font-medium text-foreground">
+          Plugins
+        </h3>
+        <button
+          type="button"
+          onClick={onReload}
+          disabled={reloading}
+          className="inline-flex items-center gap-1.5 rounded-lg bg-raised px-2.5 py-1.5 text-[13px] text-foreground hover:bg-hover disabled:opacity-60"
+        >
+          <RefreshCw size={13} strokeWidth={1.75} className={reloading ? 'animate-spin' : ''} />
+          Reload plugins
+        </button>
+      </div>
+      {plugins.length === 0 ? (
+        <p className="text-[13px] leading-snug text-muted-foreground">No plugins are installed.</p>
+      ) : (
+        <ul>
+          {plugins.map((plugin) => (
+            <PluginRow
+              key={plugin.id}
+              plugin={plugin}
+              canInstall={canInstall}
+              onToggleEnabled={(enabled) => onTogglePlugin(plugin.id, enabled)}
+              onRequestUninstall={() => onRequestUninstall(plugin)}
+            />
+          ))}
+        </ul>
+      )}
+      <div className="border-t border-border/60 pt-3">
+        {canInstall ? (
+          <div className="flex flex-col gap-1.5">
+            <label htmlFor={installId} className="text-[13px] font-medium text-foreground">
+              Install a plugin
+            </label>
+            <div className="flex gap-2">
+              <input
+                id={installId}
+                type="text"
+                placeholder="name@marketplace"
+                value={installDraft}
+                onChange={(event) => setInstallDraft(event.target.value)}
+                onKeyDown={(event) => {
+                  if (event.key === 'Enter') {
+                    event.preventDefault();
+                    submitInstall();
+                  }
+                }}
+                className="min-w-0 flex-1 rounded-lg border border-border bg-raised px-2.5 py-1.5 text-[13.5px] text-foreground"
+              />
+              <button
+                type="button"
+                onClick={submitInstall}
+                disabled={installDraft.trim().length === 0}
+                className="flex-shrink-0 rounded-lg bg-raised px-3 py-1.5 text-[13px] text-foreground hover:bg-hover disabled:opacity-60"
+              >
+                Install
+              </button>
+            </div>
+          </div>
+        ) : (
+          <p className="text-[12.5px] leading-snug text-muted-foreground">
+            Installing and uninstalling plugins runs code on this computer, so it only works from the
+            desktop app or the page opened here — not from a remote device.
+          </p>
+        )}
+      </div>
+    </section>
+  );
+}

package/src/components/SettingsProvidersSection.tsx

@@ -0,0 +1,211 @@
+'use client';
+
+import { Check } from 'lucide-react';
+import React, { useEffect, useRef, useState } from 'react';
+
+import { PopupMenu } from './PopupMenu.js';
+
+import type { ISettingsProviderProfile, ISettingsSnapshot } from '@robota-sdk/agent-interface-session';
+import type { TModelListSnapshot } from '../hooks/session-client-types.js';
+
+const BUTTON =
+  'rounded-lg px-2.5 py-1.5 text-[12.5px] font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50';
+const PRIMARY_BUTTON = `${BUTTON} bg-primary text-primary-foreground hover:opacity-90`;
+const SECONDARY_BUTTON = `${BUTTON} bg-raised text-foreground hover:bg-hover`;
+const DESTRUCTIVE_BUTTON = `${BUTTON} text-destructive hover:bg-destructive/10`;
+
+/** The "Model" action: a `PopupMenu` of this ONE profile's catalog models (#3282 §4b). */
+function ProviderModelButton({
+  profile,
+  modelList,
+  onSelect,
+}: {
+  profile: ISettingsProviderProfile;
+  modelList: TModelListSnapshot | null;
+  onSelect: (profileName: string, modelId: string) => void;
+}): React.ReactElement {
+  const [open, setOpen] = useState(false);
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const models = modelList?.groups.find((group) => group.profileName === profile.name)?.models ?? [];
+  return (
+    <span className="relative inline-block">
+      <button
+        ref={triggerRef}
+        type="button"
+        aria-haspopup="menu"
+        aria-expanded={open}
+        disabled={models.length === 0}
+        onClick={() => setOpen(true)}
+        className={SECONDARY_BUTTON}
+      >
+        Model
+      </button>
+      {open ? (
+        <PopupMenu
+          label={`Models for ${profile.name}`}
+          sections={[
+            {
+              items: models.map((model) => ({
+                key: model.id,
+                label: model.label,
+                checked: profile.model !== undefined && model.id === profile.model.id,
+                onSelect: () => onSelect(profile.name, model.id),
+              })),
+            },
+          ]}
+          triggerRef={triggerRef}
+          onClose={() => setOpen(false)}
+        />
+      ) : null}
+    </span>
+  );
+}
+
+function ProviderProfileRow({
+  profile,
+  modelList,
+  onUse,
+  onModelChange,
+  onCommand,
+  onRequestDelete,
+}: {
+  profile: ISettingsProviderProfile;
+  modelList: TModelListSnapshot | null;
+  onUse: (profileName: string) => void;
+  onModelChange: (profileName: string, modelId: string) => void;
+  onCommand: (args: string) => void;
+  onRequestDelete: (profileName: string) => void;
+}): React.ReactElement {
+  return (
+    <li className="rounded-xl border border-border/60 p-3">
+      <div className="flex items-start gap-1.5">
+        {profile.current ? (
+          <Check size={14} strokeWidth={2.25} className="mt-0.5 flex-shrink-0 text-primary" aria-hidden="true" />
+        ) : (
+          <span className="mt-0.5 w-3.5 flex-shrink-0" aria-hidden="true" />
+        )}
+        <div className="min-w-0">
+          <p className="truncate text-[14px] font-medium text-foreground">
+            {profile.name}
+            {profile.current ? <span className="sr-only"> (in use)</span> : null}
+          </p>
+          <p className="truncate text-[12.5px] text-muted-foreground">
+            {profile.providerLabel}
+            {profile.model ? ` · ${profile.model.label}` : ' · No model configured'}
+          </p>
+          {profile.connectionState ? (
+            <p className="text-[12.5px] text-destructive">{profile.connectionState}</p>
+          ) : null}
+        </div>
+      </div>
+      <div className="mt-2.5 flex flex-wrap items-center gap-1.5">
+        <button
+          type="button"
+          disabled={profile.current}
+          onClick={() => onUse(profile.name)}
+          className={PRIMARY_BUTTON}
+        >
+          Use
+        </button>
+        <ProviderModelButton profile={profile} modelList={modelList} onSelect={onModelChange} />
+        <button
+          type="button"
+          onClick={() => onCommand(`edit ${profile.name}`)}
+          className={SECONDARY_BUTTON}
+        >
+          Edit…
+        </button>
+        <button
+          type="button"
+          onClick={() => onCommand(`test ${profile.name}`)}
+          className={SECONDARY_BUTTON}
+        >
+          Test connection
+        </button>
+        <button
+          type="button"
+          onClick={() => onCommand(`duplicate ${profile.name}`)}
+          className={SECONDARY_BUTTON}
+        >
+          Duplicate…
+        </button>
+        <button
+          type="button"
+          onClick={() => onRequestDelete(profile.name)}
+          className={`${DESTRUCTIVE_BUTTON} ml-auto`}
+        >
+          Delete…
+        </button>
+      </div>
+    </li>
+  );
+}
+
+/**
+ * The configured provider profiles (#3282 §4b), each row a plain provider name, its model's label,
+ * a checkmark on the one in use, and a plain connection state when one is known. Every action goes
+ * through the same path the equivalent command does: Use/Model apply through `state.updateSettings`
+ * (the same `field` patterns Preset/Mode/Sandbox use); Edit/Test/Duplicate/Add dispatch the raw
+ * `/provider` command — driven by the SAME `ask_request` rendering the first-run setup panel and the
+ * model menu's former "Manage providers…" flow already use, so a masked API key field and a
+ * confirmation step need nothing new here.
+ */
+export function SettingsProvidersSection({
+  snapshot,
+  modelList,
+  onRequestModelList,
+  onUse,
+  onModelChange,
+  onCommand,
+  onRequestDelete,
+}: {
+  snapshot: ISettingsSnapshot;
+  modelList: TModelListSnapshot | null;
+  onRequestModelList: () => void;
+  onUse: (profileName: string) => void;
+  onModelChange: (profileName: string, modelId: string) => void;
+  /** Dispatches `/provider <args>` (Edit/Test/Duplicate) or `/provider add` (Add) unmodified. */
+  onCommand: (args: string) => void;
+  onRequestDelete: (profileName: string) => void;
+}): React.ReactElement {
+  // The "Model" button needs each profile's catalog as soon as this section is visible, not only
+  // once a person opens one — `list-models` is a cheap, observer-safe read (#3282 §2).
+  // Intentionally empty deps: fetch once per mount, not on every render.
+  useEffect(() => {
+    onRequestModelList();
+  }, []);
+
+  const { profiles } = snapshot.providers;
+
+  return (
+    <section aria-labelledby="settings-providers-heading" className="flex flex-col gap-4">
+      <h3 id="settings-providers-heading" className="sr-only">
+        Providers & Models
+      </h3>
+      {profiles.length === 0 ? (
+        <p className="text-[13.5px] text-muted-foreground">No providers configured yet.</p>
+      ) : (
+        <ul className="flex flex-col gap-3">
+          {profiles.map((profile) => (
+            <ProviderProfileRow
+              key={profile.name}
+              profile={profile}
+              modelList={modelList}
+              onUse={onUse}
+              onModelChange={onModelChange}
+              onCommand={onCommand}
+              onRequestDelete={onRequestDelete}
+            />
+          ))}
+        </ul>
+      )}
+      <button
+        type="button"
+        onClick={() => onCommand('add')}
+        className="self-start rounded-lg bg-raised px-3 py-1.5 text-[13px] font-medium text-foreground hover:bg-hover"
+      >
+        Add provider…
+      </button>
+    </section>
+  );
+}