@1agh/maude 0.45.1 → 0.46.0

package/apps/studio/client/panels/CapabilityBar.jsx

@@ -0,0 +1,101 @@
+// The model / effort / mode picker row (feature-acp-panel-dynamic-claude-code-
+// capabilities) — replaces the two hardcoded MODELS/EFFORTS `<select>`s that
+// used to live in ChatPanel.jsx's Composer. Model/effort/mode come from the
+// LIVE ACP session (`modes`/`configOptions`) — never a static list. Any OTHER
+// advertised option (e.g. an "Agent persona" selector) is deliberately NOT
+// rendered here — user call: keep this row to the three controls people
+// actually reach for, not every generic config option the session offers.
+
+import { flattenSelectOptions } from './acp-capabilities.js';
+
+function OptionSelect({ id, label, currentValue, options, onChange, disabled }) {
+  const flat = flattenSelectOptions(options);
+  if (!flat.length) return null;
+  return (
+    <select
+      className="chat-select"
+      value={currentValue ?? ''}
+      aria-label={label}
+      title={flat.find((o) => o.value === currentValue)?.description || label}
+      disabled={disabled}
+      onChange={(e) => onChange(id, e.target.value)}
+    >
+      {flat.map((o) => (
+        <option key={o.value} value={o.value}>
+          {o.name || o.value}
+        </option>
+      ))}
+    </select>
+  );
+}
+
+export default function CapabilityBar({ modes, configOptions, onSetMode, onSetConfig, disabled }) {
+  const modeList = modes?.availableModes ?? [];
+  const model = configOptions?.model ?? null;
+  const effort = configOptions?.effort ?? null;
+  const fast = configOptions?.fast ?? null;
+
+  // Nothing arrived yet — the session is still establishing (a fresh chat
+  // spawns `claude` on first view; see ChatThread's warmedOnVisibleRef). Show
+  // a placeholder instead of rendering nothing at all, so this row doesn't
+  // read as "the picker disappeared" while it's just still connecting.
+  if (!modeList.length && !model && !effort && !fast) {
+    return (
+      <span className="chat-caps chat-caps--connecting" data-testid="chat-caps-connecting">
+        Connecting…
+      </span>
+    );
+  }
+
+  return (
+    <div className="chat-caps" data-testid="chat-caps-bar">
+      {modeList.length ? (
+        <select
+          className="chat-select"
+          value={modes?.currentModeId ?? ''}
+          aria-label="Permission mode"
+          data-testid="chat-mode-picker"
+          title={modeList.find((m) => m.id === modes?.currentModeId)?.description || 'Permission mode'}
+          disabled={disabled}
+          onChange={(e) => onSetMode(e.target.value)}
+        >
+          {modeList.map((m) => (
+            <option key={m.id} value={m.id}>
+              {m.name || m.id}
+            </option>
+          ))}
+        </select>
+      ) : null}
+      {model ? (
+        <OptionSelect
+          id={model.id}
+          label="Model"
+          currentValue={model.currentValue}
+          options={model.options}
+          onChange={onSetConfig}
+          disabled={disabled}
+        />
+      ) : null}
+      {effort ? (
+        <OptionSelect
+          id={effort.id}
+          label="Effort"
+          currentValue={effort.currentValue}
+          options={effort.options}
+          onChange={onSetConfig}
+          disabled={disabled}
+        />
+      ) : null}
+      {fast ? (
+        <OptionSelect
+          id={fast.id}
+          label="Fast mode"
+          currentValue={fast.currentValue}
+          options={fast.options}
+          onChange={onSetConfig}
+          disabled={disabled}
+        />
+      ) : null}
+    </div>
+  );
+}