open-managed-agents 0.1.0

package/dist/ui/managed-agents-console/src/forms.jsx

@@ -0,0 +1,494 @@
+// forms.jsx — Create-session / create-agent modals → window
+const { useState: useStateF } = React;
+
+function Modal({ icon, title, sub, onClose, children, footer }) {
+  const stop = (e) => e.stopPropagation();
+  return (
+    <div className="overlay" onClick={onClose}>
+      <div className="modal" onClick={stop} role="dialog" aria-modal="true">
+        <div className="modal-head">
+          <div className="ic"><Icon name={icon} size={18} /></div>
+          <div>
+            <h2>{title}</h2>
+            {sub && <p>{sub}</p>}
+          </div>
+          <span className="kebab x" onClick={onClose}><Icon name="x" size={17} /></span>
+        </div>
+        <div className="modal-body scroll">{children}</div>
+        <div className="modal-foot">{footer}</div>
+      </div>
+    </div>
+  );
+}
+
+function Labeled({ label, opt, hint, htmlFor, children }) {
+  return (
+    <div className="form-row">
+      <label className="form-label" htmlFor={htmlFor}>{label}{opt && <span className="opt">optional</span>}</label>
+      {children}
+      {hint && <div className="field-hint">{hint}</div>}
+    </div>
+  );
+}
+
+// ─────────── Create session ───────────
+function CreateSession({ agents = AGENTS, environments = ENVIRONMENTS, vaults = [], presetAgent, onClose, onCreate, onAuthExpired, apiMode = 'demo', api = window.OmaConsoleApi }) {
+  const choices = agents.filter((a) => a.status === 'active');
+  const activeEnvironments = environments.filter((environment) => !environment.archived);
+  const activePreset = presetAgent?.status === 'active' ? presetAgent : null;
+  const [agentId, setAgentId] = useStateF((activePreset && activePreset.id) || (choices[0] && choices[0].id));
+  const [env, setEnv] = useStateF(() => apiMode === 'api'
+    ? (activeEnvironments[0]?.id || '')
+    : (activeEnvironments[0]?.id || ENVIRONMENTS[0].id));
+  const [customEnv, setCustomEnv] = useStateF('');
+  const [title, setTitle] = useStateF('');
+  const [msg, setMsg] = useStateF('');
+  const [vaultIds, setVaultIds] = useStateF([]);
+  const [busy, setBusy] = useStateF(false);
+  const [error, setError] = useStateF('');
+  const [partial, setPartial] = useStateF(null);
+  const [sessionIntent] = useStateF(() => api?.createIdempotencyIntent?.());
+  const [eventIntent] = useStateF(() => api?.createIdempotencyIntent?.());
+
+  const agent = agents.find((a) => a.id === agentId);
+  const usingCustom = env === '__custom';
+  const finalEnv = usingCustom ? customEnv.trim() : env;
+  const valid = !!agentId && !!finalEnv && !busy;
+  const live = apiMode === 'api';
+  const initialMessageEvent = () => ({
+    type: 'user.message',
+    content: [{ type: 'text', text: msg.trim() }],
+  });
+
+  const demoSession = () => ({
+    id:'sesn_01' + Math.random().toString(36).slice(2, 8) + '…new',
+    short:'sesn_…' + Math.random().toString(36).slice(2, 8),
+    title: title.trim() || (msg.trim() ? msg.trim().slice(0, 42) : 'Untitled session'),
+    status: msg.trim() ? 'running' : 'idle',
+    agent: agent.name, env: finalEnv,
+    created:'Just now', updated:'Just now', dur:'—', tokens:'0 / 0', resources:0,
+  });
+
+  const submit = async () => {
+    if (!valid) return;
+    setBusy(true);
+    setError('');
+    setPartial(null);
+    if (!live) {
+      onCreate(demoSession());
+      setBusy(false);
+      return;
+    }
+    const body = {
+      agent: agentId,
+      environment_id: finalEnv,
+      ...(vaultIds.length ? { vault_ids:vaultIds } : {}),
+      ...(title.trim() ? { title: title.trim() } : {}),
+    };
+    try {
+      const session = await api.createSession(body, {
+        intent: sessionIntent,
+        agentNames: new Map(agents.map((item) => [item.id, item.name])),
+      });
+      if (!msg.trim()) {
+        onCreate({ ...session, firstMessage: { status: 'not_sent' } });
+        return;
+      }
+      try {
+        const firstMessage = await api.sendSessionEvents(session.id, [initialMessageEvent()], {
+          intent: eventIntent,
+        });
+        onCreate({ ...session, status:'running', firstMessage: { status:'sent', response:firstMessage } });
+      } catch (messageError) {
+        setPartial({ session, error: messageError.message || 'First message failed.' });
+        setError(`Session ${session.short || session.id} was created, but the first message was not accepted: ${messageError.message || 'Request failed'}`);
+        if (messageError.status === 401 && onAuthExpired) onAuthExpired();
+      }
+    } catch (createError) {
+      setError(createError.message || 'Session creation failed.');
+      if (createError.status === 401 && onAuthExpired) onAuthExpired();
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const retryFirstMessage = async () => {
+    if (!partial || !msg.trim() || busy) return;
+    setBusy(true);
+    setError('');
+    try {
+      const firstMessage = await api.sendSessionEvents(partial.session.id, [initialMessageEvent()], {
+        intent: eventIntent,
+      });
+      onCreate({ ...partial.session, status:'running', firstMessage: { status:'sent_after_retry', response:firstMessage } });
+    } catch (messageError) {
+      setError(`Session ${partial.session.short || partial.session.id} exists, but the first message retry failed: ${messageError.message || 'Request failed'}`);
+      if (messageError.status === 401 && onAuthExpired) onAuthExpired();
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <Modal icon="activity" title="Create session" sub="Start a new Managed Agents session against a local environment." onClose={onClose}
+      footer={<>
+        <span className="left">Sends to <span className="mono">POST /v1/sessions</span>{msg.trim() && <> then <span className="mono">POST /v1/sessions/:id/events</span></>}</span>
+        <button className="btn" onClick={onClose}>{partial ? 'Close' : 'Cancel'}</button>
+        {partial && <button className="btn" disabled={busy} onClick={() => onCreate(partial.session)}>Open session</button>}
+        {partial && msg.trim() && <button className="btn btn-primary" disabled={busy} onClick={retryFirstMessage} style={{ opacity: busy ? .5 : 1 }}>
+          <Icon name="send" size={15} />Retry message</button>}
+        {!partial && <button className="btn btn-primary" disabled={!valid} onClick={submit} style={{ opacity: valid ? 1 : .5 }}>
+          <Icon name="plus" size={15} />{busy ? 'Creating…' : 'Create session'}</button>}
+      </>}>
+      <Labeled label="Agent" htmlFor="create-session-agent">
+        <select id="create-session-agent" name="agent" className="selectbox" value={agentId} onChange={(e) => setAgentId(e.target.value)}>
+          {choices.map((a) => (
+            <option key={a.id} value={a.id}>{a.name} · {a.model}</option>
+          ))}
+        </select>
+        {agent && <div className="field-hint">{agent.short} · system prompt {agent.system.length} chars · {agent.tools} tools</div>}
+      </Labeled>
+
+      <Labeled label="Environment" htmlFor="create-session-environment" hint="Pick an existing environment or enter an ID manually.">
+        <select id="create-session-environment" name="environment" className="selectbox" value={env} onChange={(e) => setEnv(e.target.value)}>
+          {live && activeEnvironments.length === 0 && <option value="" disabled>Create an active environment first…</option>}
+          {activeEnvironments.map((en) => <option key={en.id} value={en.id}>{en.label} — {en.image}</option>)}
+          <option value="__custom">Enter an environment ID manually…</option>
+        </select>
+      </Labeled>
+      {live && activeEnvironments.length === 0 && !usingCustom && (
+        <div className="inline-warn" role="status"><Icon name="alert" size={14} /><span>No active live environments exist. Close this dialog and create one, or select “Enter an environment ID manually”.</span></div>
+      )}
+      {usingCustom && (
+        <Labeled label="Environment ID" htmlFor="create-session-environment-id">
+          <input id="create-session-environment-id" name="environment_id" className="input mono" placeholder="env_…" value={customEnv} onChange={(e) => setCustomEnv(e.target.value)} />
+        </Labeled>
+      )}
+
+      <Labeled label="Credential vaults" opt hint="Vaults are attached to this session. Credentials remain write-only and are matched to the agent's MCP server URLs at runtime.">
+        {vaults.length === 0 ? <div className="field-hint">No active vaults in this workspace.</div>
+          : <div className="seg-tools">{vaults.filter((vault) => !vault.archived_at).map((vault) => {
+            const selected = vaultIds.includes(vault.id);
+            return <button type="button" key={vault.id} className={'tool-toggle' + (selected ? ' on' : '')} aria-pressed={selected}
+              onClick={() => setVaultIds((current) => selected ? current.filter((id) => id !== vault.id) : [...current, vault.id])}>
+              <span className="chk">{selected && <Icon name="checkCircle" size={9} />}</span><span>{vault.display_name}</span>
+            </button>;
+          })}</div>}
+      </Labeled>
+
+      <Labeled label="Title" htmlFor="create-session-title" opt hint="Defaults to the first message if left blank.">
+        <input id="create-session-title" name="title" className="input" placeholder="e.g. Ship your first Managed Agent" value={title} onChange={(e) => setTitle(e.target.value)} />
+      </Labeled>
+
+      <Labeled label="First message" htmlFor="create-session-message" opt hint="Send an initial user.message — the session starts running immediately.">
+        <textarea id="create-session-message" name="message" className="textarea" placeholder="Send a message to start the session…" value={msg} onChange={(e) => setMsg(e.target.value)} />
+      </Labeled>
+      {error && <div className="inline-warn" role="alert"><Icon name="alert" size={14} /><span>{error}</span></div>}
+    </Modal>
+  );
+}
+
+// ─────────── Create agent ───────────
+function CreateVaultModal({ onClose, onCreated, onAuthExpired, apiMode = 'demo', api = window.OmaConsoleApi }) {
+  const [displayName, setDisplayName] = useStateF('');
+  const [busy, setBusy] = useStateF(false);
+  const [error, setError] = useStateF('');
+  const submit = async () => {
+    if (!displayName.trim() || busy) return;
+    setBusy(true); setError('');
+    try {
+      if (apiMode !== 'api') { onCreated({ id:`vlt_demo_${Date.now()}`, display_name:displayName.trim() }); return; }
+      onCreated(await api.createVault({ display_name:displayName.trim() }));
+    } catch (createError) {
+      setError(createError.message || 'Vault creation failed.');
+      if (createError.status === 401 && onAuthExpired) onAuthExpired();
+    } finally { setBusy(false); }
+  };
+  return <Modal icon="database" title="Create vault" sub="Create a workspace-scoped container for credentials." onClose={onClose}
+    footer={<><span className="left">Sends to <span className="mono">POST /v1/vaults</span></span><button className="btn" onClick={onClose}>Cancel</button><button className="btn btn-primary" disabled={!displayName.trim() || busy} onClick={submit}>{busy ? 'Creating…' : 'Create vault'}</button></>}>
+    <Labeled label="Vault name" htmlFor="create-vault-name" hint="Names are visible in the console; credential values are never shown again."><input id="create-vault-name" className="input" autoFocus value={displayName} onChange={(event) => setDisplayName(event.target.value)} /></Labeled>
+    {error && <div className="inline-warn" role="alert"><Icon name="alert" size={14} /><span>{error}</span></div>}
+  </Modal>;
+}
+
+function CreateVaultCredentialModal({ vault, onClose, onCreated, onAuthExpired, apiMode = 'demo', api = window.OmaConsoleApi }) {
+  const [displayName, setDisplayName] = useStateF('');
+  const [type, setType] = useStateF('static_bearer');
+  const [serverUrl, setServerUrl] = useStateF('');
+  const [token, setToken] = useStateF('');
+  const [expiresAt, setExpiresAt] = useStateF('');
+  const [busy, setBusy] = useStateF(false);
+  const [error, setError] = useStateF('');
+  const valid = /^https?:\/\//.test(serverUrl.trim()) && token.trim().length >= 8 && !busy;
+  const submit = async () => {
+    if (!valid) return;
+    setBusy(true); setError('');
+    const auth = type === 'static_bearer'
+      ? { type, mcp_server_url:serverUrl.trim(), token:token.trim() }
+      : { type, mcp_server_url:serverUrl.trim(), access_token:token.trim(), ...(expiresAt.trim() ? { expires_at:expiresAt.trim() } : {}) };
+    try {
+      if (apiMode !== 'api') { onCreated({ id:`vcrd_demo_${Date.now()}`, vault_id:vault.id, display_name:displayName.trim() || null, auth }); return; }
+      onCreated(await api.createVaultCredential(vault.id, { ...(displayName.trim() ? { display_name:displayName.trim() } : {}), auth }));
+    } catch (createError) {
+      setError(createError.message || 'Credential creation failed.');
+      if (createError.status === 401 && onAuthExpired) onAuthExpired();
+    } finally { setBusy(false); }
+  };
+  return <Modal icon="database" title="Add credential" sub={`Write-only credential for ${vault.display_name || vault.displayName}.`} onClose={onClose}
+    footer={<><span className="left">Sends to <span className="mono">POST /v1/vaults/:id/credentials</span></span><button className="btn" onClick={onClose}>Cancel</button><button className="btn btn-primary" disabled={!valid} onClick={submit}>{busy ? 'Saving…' : 'Save credential'}</button></>}>
+    <Labeled label="Credential name" htmlFor="credential-name" opt><input id="credential-name" className="input" value={displayName} onChange={(event) => setDisplayName(event.target.value)} /></Labeled>
+    <Labeled label="Credential type" htmlFor="credential-type"><select id="credential-type" className="selectbox" value={type} onChange={(event) => setType(event.target.value)}><option value="static_bearer">Static bearer token</option><option value="mcp_oauth">MCP OAuth access token</option></select></Labeled>
+    <Labeled label="MCP server URL" htmlFor="credential-server-url" hint="This must exactly match the URL configured on the agent."><input id="credential-server-url" className="input mono" placeholder="https://mcp.example.com/mcp" value={serverUrl} onChange={(event) => setServerUrl(event.target.value)} /></Labeled>
+    <Labeled label={type === 'static_bearer' ? 'Bearer token' : 'OAuth access token'} htmlFor="credential-token" hint="Write-only. OMA never returns or renders this value after it is submitted."><input id="credential-token" type="password" className="input mono" autoComplete="off" value={token} onChange={(event) => setToken(event.target.value)} /></Labeled>
+    {type === 'mcp_oauth' && <Labeled label="Expires at" htmlFor="credential-expires" opt hint="ISO-8601 timestamp. Leave blank only for a non-expiring access token."><input id="credential-expires" className="input mono" placeholder="2027-01-01T00:00:00Z" value={expiresAt} onChange={(event) => setExpiresAt(event.target.value)} /></Labeled>}
+    {type === 'mcp_oauth' && <div className="field-hint">Use the API for OAuth refresh-token and client-secret configuration; this initial console path safely supports access-token credentials and validation.</div>}
+    {error && <div className="inline-warn" role="alert"><Icon name="alert" size={14} /><span>{error}</span></div>}
+  </Modal>;
+}
+
+function CreateSkillModal({ onClose, onCreated, onAuthExpired, apiMode = 'demo', api = window.OmaConsoleApi }) {
+  const [title, setTitle] = useStateF('');
+  const [files, setFiles] = useStateF([]);
+  const [busy, setBusy] = useStateF(false);
+  const [error, setError] = useStateF('');
+  const valid = files.length > 0 && !busy;
+  const submit = async () => {
+    if (!valid) return;
+    setBusy(true); setError('');
+    try {
+      if (apiMode !== 'api') { onCreated({ id:`skill_demo_${Date.now()}`, display_title:title || 'Demo skill', latest_version:'1' }); return; }
+      onCreated(await api.createSkill(title.trim(), files));
+    } catch (createError) {
+      setError(createError.message || 'Skill upload failed.');
+      if (createError.status === 401 && onAuthExpired) onAuthExpired();
+    } finally { setBusy(false); }
+  };
+  return <Modal icon="fileText" title="Upload custom skill" sub="Upload a .zip bundle containing SKILL.md and any supporting files." onClose={onClose}
+    footer={<><span className="left">Sends multipart data to <span className="mono">POST /v1/skills</span></span><button className="btn" onClick={onClose}>Cancel</button><button className="btn btn-primary" disabled={!valid} onClick={submit}>{busy ? 'Uploading…' : 'Upload skill'}</button></>}>
+    <Labeled label="Display title" htmlFor="skill-title" opt><input id="skill-title" className="input" placeholder="Defaults to the skill manifest title" value={title} onChange={(event) => setTitle(event.target.value)} /></Labeled>
+    <Labeled label="Skill bundle" htmlFor="skill-files" hint="Select one .zip with a single top-level folder containing SKILL.md. The API validates the bundle and limits each request to 30 MB."><input id="skill-files" type="file" className="input" accept=".zip,application/zip" onChange={(event) => setFiles([...event.target.files])} />{files.length > 0 && <div className="field-hint">{files.map((file) => file.name).join(', ')}</div>}</Labeled>
+    {error && <div className="inline-warn" role="alert"><Icon name="alert" size={14} /><span>{error}</span></div>}
+  </Modal>;
+}
+
+function CreateAgent({ models = [], skills = [], onClose, onCreate, onAuthExpired, apiMode = 'demo', api = window.OmaConsoleApi }) {
+  const defaultModel = models.find((item) => item.default) || models[0] || null;
+  const [name, setName] = useStateF('');
+  const [provider, setProvider] = useStateF(defaultModel?.provider || '');
+  const [model, setModel] = useStateF(defaultModel?.id || '');
+  const [prompt, setPrompt] = useStateF('');
+  const [description, setDescription] = useStateF('');
+  const [mcpName, setMcpName] = useStateF('');
+  const [mcpUrl, setMcpUrl] = useStateF('');
+  const [skillIds, setSkillIds] = useStateF([]);
+  const [metadata, setMetadata] = useStateF('');
+  const [tools, setTools] = useStateF(['bash']);
+  const [toolPolicy, setToolPolicy] = useStateF('always_ask');
+  const [busy, setBusy] = useStateF(false);
+  const [error, setError] = useStateF('');
+
+  const live = apiMode === 'api';
+  const providers = [...new Set(models.map((item) => item.provider))];
+  const providerModels = models.filter((item) => item.provider === provider);
+  const selectedModel = providerModels.find((item) => item.id === model) || null;
+  const hasMcp = mcpName.trim() || mcpUrl.trim();
+  const mcpValid = !hasMcp || (mcpName.trim().length > 0 && /^https?:\/\//.test(mcpUrl.trim()));
+  const valid = name.trim().length > 0 && selectedModel !== null && mcpValid && !busy;
+  const toggle = (t) => setTools(tools.includes(t) ? tools.filter((x) => x !== t) : [...tools, t]);
+  const chooseProvider = (nextProvider) => {
+    setProvider(nextProvider);
+    const choices = models.filter((item) => item.provider === nextProvider);
+    const nextModel = choices.find((item) => item.default) || choices[0] || null;
+    setModel(nextModel?.id || '');
+  };
+  const chooseSkills = (event) => {
+    const nextSkills = [...event.target.selectedOptions].map((option) => option.value);
+    setSkillIds(nextSkills);
+    if (nextSkills.length > 0) setTools((current) => current.includes('read') ? current : [...current, 'read']);
+  };
+
+  const demoAgent = () => ({
+    id:'agent_01' + Math.random().toString(36).slice(2, 8) + '…new',
+    short:'agent_…' + Math.random().toString(36).slice(2, 8),
+    name: name.trim(), model:`${provider}/${model}`, modelProvider:provider, modelId:model,
+    status:'active', created:'Just now', updated:'Just now', version:'v1',
+    tools: tools.length + (hasMcp ? 1 : 0), system: prompt.trim() || 'No system prompt set.', description:description.trim() || null,
+    mcpServers: hasMcp ? [{ name:mcpName.trim(), url:mcpUrl.trim() }] : [], skills:skillIds.map((id) => ({ skill_id:id })), metadata:{},
+    toolset:'agent_toolset_20260401',
+    toolPermission:toolPolicy === 'always_allow' ? 'Allow automatically' : 'Ask before use',
+    sessions:[],
+  });
+
+  const submit = async () => {
+    if (!valid) return;
+    setBusy(true);
+    setError('');
+    if (!live) {
+      onCreate(demoAgent());
+      setBusy(false);
+      return;
+    }
+    let parsedMetadata;
+    try {
+      parsedMetadata = metadata.trim() ? JSON.parse(metadata) : null;
+      if (parsedMetadata !== null && (Array.isArray(parsedMetadata) || typeof parsedMetadata !== 'object' || Object.values(parsedMetadata).some((value) => typeof value !== 'string'))) {
+        throw new Error('Metadata must be a JSON object with string values.');
+      }
+    } catch (metadataError) {
+      setError(metadataError.message || 'Metadata must be valid JSON.');
+      setBusy(false);
+      return;
+    }
+    const mcpServers = hasMcp ? [{ type:'url', name:mcpName.trim(), url:mcpUrl.trim() }] : [];
+    const body = {
+      name: name.trim(),
+      model: api.modelInputForSelection(selectedModel),
+      ...(prompt.trim() ? { system: prompt.trim() } : {}),
+      ...(description.trim() ? { description:description.trim() } : {}),
+      ...(parsedMetadata ? { metadata:parsedMetadata } : {}),
+      ...(mcpServers.length ? { mcp_servers:mcpServers } : {}),
+      ...(skillIds.length ? { skills:skillIds.map((skillId) => ({ type:'custom', skill_id:skillId })) } : {}),
+      tools: [{
+        type: 'agent_toolset_20260401',
+        configs: TOOL_OPTIONS.map((tool) => ({
+          name:tool,
+          enabled:tools.includes(tool),
+          ...(tools.includes(tool) ? { permission_policy:{ type:toolPolicy } } : {}),
+        })),
+      }, ...mcpServers.map((server) => ({
+        type:'mcp_toolset',
+        mcp_server_name:server.name,
+        default_config:{ enabled:true, permission_policy:{ type:toolPolicy } },
+      }))],
+    };
+    try {
+      const agent = await api.createAgent(body);
+      onCreate(agent);
+    } catch (createError) {
+      setError(createError.message || 'Agent creation failed. Refresh the agent list before retrying if the request may have reached the server.');
+      if (createError.status === 401 && onAuthExpired) onAuthExpired();
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <Modal icon="bot" title="Create agent" sub="Define a reusable agent template — model, prompt, and tools." onClose={onClose}
+      footer={<>
+        <span className="left">Sends to <span className="mono">POST /v1/agents</span></span>
+        <button className="btn" onClick={onClose}>Cancel</button>
+        <button className="btn btn-primary" disabled={!valid} onClick={submit} style={{ opacity: valid ? 1 : .5 }}>
+          <Icon name="plus" size={15} />{busy ? 'Creating…' : 'Create agent'}</button>
+      </>}>
+      <div className="form-row two">
+        <Labeled label="Name" htmlFor="create-agent-name">
+          <input id="create-agent-name" name="name" className="input" placeholder="e.g. cwc-agent" value={name} onChange={(e) => setName(e.target.value)} />
+        </Labeled>
+        <Labeled label="Provider" htmlFor="create-agent-provider">
+          <select id="create-agent-provider" name="provider" className="selectbox mono" value={provider} onChange={(e) => chooseProvider(e.target.value)}>
+            {providers.map((item) => <option key={item} value={item}>{item}</option>)}
+          </select>
+        </Labeled>
+      </div>
+
+      <Labeled label="Model" htmlFor="create-agent-model" hint="Search the deployment-enabled Pi catalog for this provider.">
+        <input id="create-agent-model" name="model" className="input mono" list="oma-model-suggestions" value={model} onChange={(e) => setModel(e.target.value)} />
+        <datalist id="oma-model-suggestions">{providerModels.map((item) => <option key={`${item.provider}/${item.id}`} value={item.id}>{item.name}</option>)}</datalist>
+      </Labeled>
+      {selectedModel && <div className={selectedModel.credentials_configured ? 'field-hint' : 'inline-warn'} role={selectedModel.credentials_configured ? undefined : 'status'}>
+        {!selectedModel.credentials_configured && <Icon name="alert" size={14} />}
+        <span>{selectedModel.credentials_configured
+          ? `${selectedModel.provider_name || selectedModel.provider} credentials are configured on this appliance.`
+          : `Credentials are not configured for ${selectedModel.provider}/${selectedModel.id}. You can create the agent, but sessions will be rejected until the operator runs oma auth set ${selectedModel.provider} and restarts oma up.`}</span>
+      </div>}
+      {live && models.length === 0 && <div className="inline-warn" role="alert"><Icon name="alert" size={14} /><span>No deployment-enabled models were returned. Agent creation is unavailable.</span></div>}
+
+      <Labeled label="System prompt" htmlFor="create-agent-system" opt hint="Plain text. Markdown is preserved.">
+        <textarea id="create-agent-system" name="system" className="textarea" placeholder="You help me navigate…" value={prompt} onChange={(e) => setPrompt(e.target.value)} />
+      </Labeled>
+
+      <Labeled label="Description" htmlFor="create-agent-description" opt hint="A short, user-facing summary of what this agent is for.">
+        <input id="create-agent-description" name="description" className="input" value={description} onChange={(e) => setDescription(e.target.value)} />
+      </Labeled>
+
+      <Labeled label="MCP server" opt hint="Declare one URL-based MCP server. A matching MCP toolset is created automatically; attach credentials through a vault when starting a session.">
+        <div className="form-row two"><input className="input" placeholder="Name, e.g. notion" value={mcpName} onChange={(e) => setMcpName(e.target.value)} />
+          <input className="input mono" placeholder="https://mcp.example.com/mcp" value={mcpUrl} onChange={(e) => setMcpUrl(e.target.value)} /></div>
+        {hasMcp && !mcpValid && <div className="inline-warn" role="alert"><Icon name="alert" size={14} /><span>Provide both an MCP name and an http(s) URL.</span></div>}
+      </Labeled>
+
+      <Labeled label="Custom skills" opt hint="Attach uploaded workspace skills to this immutable agent version.">
+        {skills.length === 0 ? <div className="field-hint">No custom skills uploaded yet.</div>
+          : <select className="selectbox" multiple value={skillIds} onChange={chooseSkills}>
+            {skills.map((skill) => <option key={skill.id} value={skill.id}>{skill.display_title}{skill.latest_version ? ` · ${skill.latest_version}` : ''}</option>)}
+          </select>}
+        {skillIds.length > 0 && <div className="field-hint">The <span className="mono">read</span> tool is enabled automatically because custom skills require it at session admission.</div>}
+      </Labeled>
+
+      <Labeled label="Metadata" htmlFor="create-agent-metadata" opt hint="Advanced: JSON object with string values. Stored with the agent version.">
+        <textarea id="create-agent-metadata" className="textarea mono" placeholder={'{"template":"support-agent"}'} value={metadata} onChange={(e) => setMetadata(e.target.value)} />
+      </Labeled>
+
+      <Labeled label="Built-in tools" hint="Choose which sandbox-backed tools the agent may use.">
+        <div className="seg-tools">
+          {TOOL_OPTIONS.map((t) => {
+            const on = tools.includes(t);
+            const requiredForSkills = skillIds.length > 0 && t === 'read';
+            return (
+              <button type="button" key={t} className={'tool-toggle' + (on ? ' on' : '')}
+                aria-pressed={on} disabled={requiredForSkills} title={requiredForSkills ? 'Custom skills require the read tool.' : undefined} onClick={() => toggle(t)}>
+                <span className="chk">{on && <Icon name="checkCircle" size={9} />}</span>
+                <span className="mono">{t}</span>
+              </button>
+            );
+          })}
+        </div>
+      </Labeled>
+      <Labeled label="Tool approval" hint="This applies to every enabled built-in tool on this agent.">
+        <div className="env-preset-grid" role="radiogroup" aria-label="Tool approval policy">
+          <button type="button" className={'env-choice' + (toolPolicy === 'always_ask' ? ' on' : '')}
+            role="radio" aria-checked={toolPolicy === 'always_ask'} disabled={busy}
+            onClick={() => setToolPolicy('always_ask')}>
+            <span className="dot-r" />
+            <span><span className="r-main">Ask before use</span><span className="r-sub">Show Allow/Deny before each tool call.</span></span>
+          </button>
+          <button type="button" className={'env-choice' + (toolPolicy === 'always_allow' ? ' on' : '')}
+            role="radio" aria-checked={toolPolicy === 'always_allow'} disabled={busy}
+            onClick={() => setToolPolicy('always_allow')}>
+            <span className="dot-r" />
+            <span><span className="r-main">Allow automatically</span><span className="r-sub">No confirmation prompts. Sandbox and network restrictions still apply.</span></span>
+          </button>
+        </div>
+        {toolPolicy === 'always_allow' && <div className="inline-warn" role="status"><Icon name="alert" size={14} /><span>The model may run every enabled tool without asking. Use this for trusted, disposable coding sessions.</span></div>}
+      </Labeled>
+      {live && <div className="field-hint">Only the currently supported sandbox-backed tools are offered. Disabled tools are persisted explicitly.</div>}
+      {error && <div className="inline-warn" role="alert"><Icon name="alert" size={14} /><span>{error}</span></div>}
+    </Modal>
+  );
+}
+
+Object.assign(window, { Modal, CreateSession, CreateAgent, ConfirmDialog });
+
+// ─────────── Archive / delete confirmation ───────────
+function ConfirmDialog({ icon = 'archive', danger, title, message, confirmLabel, endpoint, onClose, onConfirm, busy = false, error = null }) {
+  return (
+    <div className="overlay" onClick={() => { if (!busy) onClose(); }}>
+      <div className="modal sm" onClick={(e) => e.stopPropagation()} role="dialog" aria-modal="true">
+        <div className="modal-head">
+          <div className={'ic' + (danger ? ' danger' : '')}><Icon name={icon} size={18} /></div>
+          <div><h2>{title}</h2></div>
+          <span className="kebab x" onClick={() => { if (!busy) onClose(); }}><Icon name="x" size={17} /></span>
+        </div>
+        <div className="modal-body">
+          <div className="confirm-msg">{message}</div>
+          {error && <div className="inline-warn" role="alert"><Icon name="alert" size={14} /><span>{error.message || String(error)}</span></div>}
+        </div>
+        <div className="modal-foot">
+          {endpoint && <span className="left">Sends to <span className="mono">{endpoint}</span></span>}
+          <button className="btn" disabled={busy} onClick={onClose}>Cancel</button>
+          <button className={'btn ' + (danger ? 'btn-danger' : 'btn-primary')} disabled={busy} onClick={onConfirm}>{busy ? 'Working…' : confirmLabel}</button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/dist/ui/managed-agents-console/src/icons.jsx

@@ -0,0 +1,48 @@
+// icons.jsx — compact Lucide-style icon set (stroke, 24 viewBox)
+const ICON_PATHS = {
+  activity: 'M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2',
+  bot: 'M12 8V4H8 M4 8h12a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-6a2 2 0 0 1 2-2Z M2 14h.01 M18 14h.01 M9 13v2 M15 13v2',
+  folder: 'M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z',
+  search: 'M21 21l-4.34-4.34 M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z',
+  plus: 'M5 12h14 M12 5v14',
+  chevDown: 'M6 9l6 6 6-6',
+  chevRight: 'M9 6l6 6-6 6',
+  chevLeft: 'M15 6l-6 6 6 6',
+  clock: 'M12 6v6l4 2 M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20Z',
+  layers: 'M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z M2 12.5l8.58 3.9a2 2 0 0 0 1.66 0L21 12.5 M2 17l8.58 3.9a2 2 0 0 0 1.66 0L21 17',
+  download: 'M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4 M7 10l5 5 5-5 M12 15V3',
+  play: 'M6 3l14 9-14 9Z',
+  stop: 'M9 9h6v6H9z M5 5h14v14H5z',
+  x: 'M18 6L6 18 M6 6l12 12',
+  more: 'M12 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z M12 6a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z M12 20a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z',
+  terminal: 'M4 17l6-6-6-6 M12 19h8',
+  filter: 'M22 3H2l8 9.46V19l4 2v-8.54L22 3z',
+  arrowRight: 'M5 12h14 M12 5l7 7-7 7',
+  checkCircle: 'M22 11.08V12a10 10 0 1 1-5.93-9.14 M22 4L12 14.01l-3-3',
+  fileText: 'M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z M14 2v6h6 M16 13H8 M16 17H8 M10 9H8',
+  sparkles: 'M9.94 6.5l-1.7 3.7-3.7 1.7 3.7 1.7 1.7 3.7 1.7-3.7 3.7-1.7-3.7-1.7zM18 4l-.8 1.8-1.8.8 1.8.8.8 1.8.8-1.8 1.8-.8-1.8-.8zM18 16l-.6 1.4-1.4.6 1.4.6.6 1.4.6-1.4 1.4-.6-1.4-.6z',
+  archive: 'M21 8v13H3V8 M1 3h22v5H1z M10 12h4',
+  trash: 'M3 6h18 M8 6V4h8v2 M19 6l-1 15H6L5 6 M10 11v5 M14 11v5',
+  alert: 'M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z M12 9v4 M12 17h.01',
+  info: 'M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20Z M12 10v6 M12 7h.01',
+  panelLeft: 'M3 3h18v18H3z M9 3v18',
+  copy: 'M20 9H11a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2-2v-9a2 2 0 0 0-2-2z M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1',
+  refresh: 'M3 12a9 9 0 0 1 15-6.7L21 8 M21 3v5h-5 M21 12a9 9 0 0 1-15 6.7L3 16 M3 21v-5h5',
+  cpu: 'M9 9h6v6H9z M4 7h2 M4 12h2 M4 17h2 M18 7h2 M18 12h2 M18 17h2 M7 4v2 M12 4v2 M17 4v2 M7 18v2 M12 18v2 M17 18v2 M6 6h12v12H6z',
+  zap: 'M13 2L3 14h9l-1 8 10-12h-9l1-8z',
+  hash: 'M4 9h16 M4 15h16 M10 3L8 21 M16 3l-2 18',
+  gitBranch: 'M6 3v12 M18 9a3 3 0 1 0 0-6 3 3 0 0 0 0 6z M6 21a3 3 0 1 0 0-6 3 3 0 0 0 0 6z M15 6a9 9 0 0 1-9 9',
+  database: 'M12 8c4.97 0 9-1.34 9-3s-4.03-3-9-3-9 1.34-9 3 4.03 3 9 3z M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5 M3 12c0 1.66 4 3 9 3s9-1.34 9-3',
+  send: 'M14.54 9.46L4 14l16 6-6-16-4.54 10.54z M14.54 9.46L20 4',
+};
+function Icon({ name, size = 16, sw = 1.75, style, className }) {
+  const d = ICON_PATHS[name];
+  return (
+    <svg className={className} width={size} height={size} viewBox="0 0 24 24" fill="none"
+      stroke="currentColor" strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round"
+      style={{ flex:'0 0 auto', ...style }}>
+      {d.split(' M').map((seg, i) => <path key={i} d={(i ? 'M' : '') + seg} />)}
+    </svg>
+  );
+}
+window.Icon = Icon;

package/dist/ui/managed-agents-console/src/skills.jsx

@@ -0,0 +1,21 @@
+// skills.jsx — workspace custom-skill inventory. Skill bundles are uploaded
+// separately, then attached to an immutable agent version during authoring.
+function SkillsView({ skills = [], mode, onCreate, readOnly = false }) {
+  const live = mode === 'api';
+  return <div className="main-scroll scroll fade-in">
+    <PageHead title="Skills" sub="Upload reusable custom skill bundles, then attach them to an agent version."
+      action="Upload skill" onAction={onCreate} readOnly={readOnly} endpoint="POST /v1/skills" />
+    <div className="inline-warn" role="status"><Icon name="alert" size={14} /><span>OMA supports custom skill bundles. Anthropic-hosted prebuilt skills are not provided by this appliance.</span></div>
+    {!live ? <div className="field-hint" style={{ marginTop:14 }}>Demo mode does not persist uploaded skill bundles.</div>
+      : skills.length === 0 ? <EmptyState icon="fileText" title="No custom skills" message="Upload a bundle containing SKILL.md and its supporting files, then select it when creating an agent."
+        actionLabel={!readOnly ? 'Upload skill' : null} onAction={onCreate} />
+      : <div className="panel" style={{ marginTop:14 }}>
+        <div className="thead"><span className="th grow">Skill</span><span className="th" style={{ width:130 }}>Latest version</span><span className="th" style={{ width:110 }}>Created</span></div>
+        {skills.map((skill) => <div className="trow" key={skill.id} style={{ cursor:'default' }}>
+          <span className="td grow"><span className="cell-strong">{skill.display_title}</span><div className="mono" style={{ fontSize:11.5, color:'var(--faint)', marginTop:3 }}>{skill.id}</div></span>
+          <span className="td mono" style={{ width:130, color:'var(--soft)' }}>{skill.latest_version || '—'}</span>
+          <span className="td mono" style={{ width:110, color:'var(--faint)' }}>{skill.created_at ? new Date(skill.created_at).toLocaleDateString() : '—'}</span>
+        </div>)}
+      </div>}
+  </div>;
+}