diff --git a/config/recurring-timer-baseline.txt b/config/recurring-timer-baseline.txt index 89443a4430d..cea5d3b42c5 100644 --- a/config/recurring-timer-baseline.txt +++ b/config/recurring-timer-baseline.txt @@ -73,6 +73,7 @@ 1 src/main/wsl/host-lifecycle/wsl-hosts-policy-live-update.ts 1 src/main/wsl/orcad/wsl-orcad-connect-stop-fence.ts 1 src/renderer/src/app-shell/use-app-session-persistence.ts +1 src/renderer/src/components/agent-pane/use-secret-request-card.ts 1 src/renderer/src/components/browser-pane/browser-client-page-position-driver.ts 1 src/renderer/src/components/contextual-tours/use-contextual-tour.ts 1 src/renderer/src/components/editor/setup-contextual-copy.ts diff --git a/src/main/cloud-secrets/cloud-secrets-client.test.ts b/src/main/cloud-secrets/cloud-secrets-client.test.ts index 4305bbda085..03410c45d03 100644 --- a/src/main/cloud-secrets/cloud-secrets-client.test.ts +++ b/src/main/cloud-secrets/cloud-secrets-client.test.ts @@ -34,6 +34,29 @@ const VIEW = { } describe('createCloudSecretsClient', () => { + it('reads who owns a sandbox and whether it is shared, failing closed on an unknown owner', async () => { + const answers = [ + { owner: { userId: 'u2', displayName: 'Ada', isCaller: false }, sharedWorkspace: true }, + { owner: { userId: 'u1', displayName: 'Me', isCaller: true }, sharedWorkspace: false }, + { owner: null, sharedWorkspace: true }, + { owner: null } + ] + const { client, seen } = fakeControlPlane(() => Response.json(answers.shift())) + expect(await client.workspaceSharing('sbx 1')).toEqual({ + shared: true, + ownerName: 'Ada', + isOwner: false + }) + expect(await client.workspaceSharing('sbx')).toEqual({ + shared: false, + ownerName: null, + isOwner: true + }) + expect((await client.workspaceSharing('sbx')).isOwner).toBe(false) + expect((await client.workspaceSharing('sbx')).isOwner).toBe(true) + expect(seen[0].url).toBe('https://control.test/v1/agent-sources?workspaceId=sbx+1') + }) + it('addresses scope, name and repo on the wire and sends the value only in the body', async () => { const { client, seen } = fakeControlPlane(({ method }) => Response.json(method === 'GET' ? { secrets: [VIEW] } : { secret: VIEW }) diff --git a/src/main/cloud-secrets/cloud-secrets-client.ts b/src/main/cloud-secrets/cloud-secrets-client.ts index 19f9aeb88bb..d797bc8585c 100644 --- a/src/main/cloud-secrets/cloud-secrets-client.ts +++ b/src/main/cloud-secrets/cloud-secrets-client.ts @@ -1,6 +1,7 @@ // Orca Cloud secrets on the sandbox control plane. Write-only for values: requests carry them, no // response or error does, and nothing here logs a request body. import { + CloudAgentSourcesResponseSchema, CloudEnvRefreshResponseSchema, CloudSecretBatchResponseSchema, CloudSecretDeleteResponseSchema, @@ -12,7 +13,8 @@ import { type CloudSecretsErrorCode, type CloudSecretTarget, type CloudSecretView, - type CloudSecretsEffective + type CloudSecretsEffective, + type CloudWorkspaceSharing } from '../../shared/cloud-secrets/cloud-secrets-wire' import { isEnvironmentProviderError } from '../environment-providers/environment-provider-driver' import { @@ -30,6 +32,8 @@ export type CloudSecretsClient = { ): Promise effective(repo?: string, signal?: AbortSignal): Promise refreshEnv(sandboxId: string): Promise + /** Who owns a sandbox and whether teammates share it (GET /v1/agent-sources?workspaceId=). */ + workspaceSharing(sandboxId: string): Promise } function withRepo(path: string, repo: string | undefined): string { @@ -94,7 +98,23 @@ export function createCloudSecretsClient( CloudEnvRefreshResponseSchema, { kind: 'control' } ) - ).applied + ).applied, + workspaceSharing: async (sandboxId) => { + const sources = await call( + 'GET', + `v1/agent-sources?${new URLSearchParams({ workspaceId: sandboxId })}`, + CloudAgentSourcesResponseSchema, + { kind: 'control' } + ) + const owner = sources.owner ?? null + const shared = sources.sharedWorkspace === true + return { + shared, + ownerName: owner && !owner.isCaller ? owner.displayName : null, + // Unknown owner: only an unshared workspace is safely the caller's own. + isOwner: owner ? owner.isCaller : !shared + } + } } } diff --git a/src/main/cloud-secrets/cloud-secrets-ipc.ts b/src/main/cloud-secrets/cloud-secrets-ipc.ts index 502a3502990..6c13f5e87b1 100644 --- a/src/main/cloud-secrets/cloud-secrets-ipc.ts +++ b/src/main/cloud-secrets/cloud-secrets-ipc.ts @@ -68,7 +68,8 @@ const CHANNELS = [ 'cloudSecrets:batch', 'cloudSecrets:effective', 'cloudSecrets:refreshEnv', - 'cloudSecrets:saveDesktopKey' + 'cloudSecrets:saveDesktopKey', + 'cloudSecrets:workspaceSharing' ] as const async function attempt( @@ -179,6 +180,17 @@ export function registerCloudSecretsHandlers(userDataPath: string): void { } return attempt(client, (c) => c.put({ scope: 'personal' }, envName, value)) }) + // Reads the control plane only; never wakes the sandbox. + ipcMain.handle('cloudSecrets:workspaceSharing', (_event, raw: unknown) => { + const request = RefreshRequest.safeParse(raw) + if (!request.success) { + return invalid + } + const sandboxId = sandboxIdFor(userDataPath, request.data.runtimeEnvironmentId) + return sandboxId + ? attempt(client, (c) => c.workspaceSharing(sandboxId)) + : { ok: false, error: 'not_found' } + }) ipcMain.handle('cloudSecrets:refreshEnv', (_event, raw: unknown) => { const request = RefreshRequest.safeParse(raw) if (!request.success) { diff --git a/src/preload/api/cloud-secrets-bridge.ts b/src/preload/api/cloud-secrets-bridge.ts index a311162c9f2..8a0381587a2 100644 --- a/src/preload/api/cloud-secrets-bridge.ts +++ b/src/preload/api/cloud-secrets-bridge.ts @@ -5,7 +5,8 @@ import type { CloudSecretView, CloudSecretsEffective, CloudSecretsResult, - CloudSecretsStatus + CloudSecretsStatus, + CloudWorkspaceSharing } from '../../shared/cloud-secrets/cloud-secrets-wire' /** Desktop only. Values go in; only names, scopes and last-4 hints come back. */ @@ -29,6 +30,10 @@ export type CloudSecretsApi = { effective: (request: { repo?: string }) => Promise> /** Best-effort nudge so a running workspace picks up new values now; the server also does it on write. */ refreshEnv: (request: { runtimeEnvironmentId: string }) => Promise> + /** Who owns an Orca Cloud workspace and whether teammates share it (control plane only). */ + workspaceSharing: (request: { + runtimeEnvironmentId: string + }) => Promise> /** Saves one of this computer's Agent API Keys as a personal Cloud secret (the value never leaves main). */ saveDesktopKey: (request: { agent: string @@ -44,5 +49,6 @@ export const cloudSecretsApi: CloudSecretsApi = { batch: (request) => ipcRenderer.invoke('cloudSecrets:batch', request), effective: (request) => ipcRenderer.invoke('cloudSecrets:effective', request), refreshEnv: (request) => ipcRenderer.invoke('cloudSecrets:refreshEnv', request), - saveDesktopKey: (request) => ipcRenderer.invoke('cloudSecrets:saveDesktopKey', request) + saveDesktopKey: (request) => ipcRenderer.invoke('cloudSecrets:saveDesktopKey', request), + workspaceSharing: (request) => ipcRenderer.invoke('cloudSecrets:workspaceSharing', request) } diff --git a/src/renderer/src/App.tsx b/src/renderer/src/App.tsx index 51127280e98..67208a753ce 100644 --- a/src/renderer/src/App.tsx +++ b/src/renderer/src/App.tsx @@ -7,6 +7,8 @@ import { BrowserWebAuthnAccountDialog } from './components/browser-webauthn-acco import { BrowserExtensionInstallDialog } from './components/browser-extension-install-dialog' import { PlansDialogHost } from './components/billing/plans/PlansDialogHost' import { CloudMoveToComputerDialogMount } from './components/orca-cloud/CloudMoveToComputerDialogMount' +import { CloudSecretsAskDialogHost } from './components/cloud-secrets-ask/CloudSecretsMissingNotice' +import { SecretRequestUnseenNotifier } from './components/agent-pane/SecretRequestUnseenNotifier' import { TeamDialogHost } from './components/billing/team/TeamDialogHost' import { BrowserPagePrompts } from './components/browser-pane/browser-page-prompts' import { LinkRoutingPreferenceDialogProvider } from './components/link-routing-preference-dialog' @@ -122,6 +124,8 @@ function App(): React.JSX.Element { + + diff --git a/src/renderer/src/components/agent-host-panel/cloud-sections/CloudMissingSecretRow.tsx b/src/renderer/src/components/agent-host-panel/cloud-sections/CloudMissingSecretRow.tsx new file mode 100644 index 00000000000..2917af5db7f --- /dev/null +++ b/src/renderer/src/components/agent-host-panel/cloud-sections/CloudMissingSecretRow.tsx @@ -0,0 +1,212 @@ +import React from 'react' +import { Loader2 } from 'lucide-react' +import { useTranslate } from '@/i18n/use-translate' +import { Button } from '@/components/ui/button' +import { Label } from '@/components/ui/label' +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue +} from '@/components/ui/select' +import { SecretValueInput } from '@/components/settings/cloud-secrets/SecretValueInput' +import { + cloudSecretScopeLabel, + cloudSecretsErrorCopy +} from '@/components/settings/cloud-secrets/cloud-secrets-copy' +import type { + CloudSecretScope, + CloudSecretsErrorCode +} from '../../../../../shared/cloud-secrets/cloud-secrets-wire' +import { parseScope, writableScopes } from '../../cloud-secrets-ask/cloud-secrets-ask-model' +import { + isGuestInSharedWorkspace, + type CloudPanelAddSecret, + type CloudPanelSectionsData +} from './use-cloud-panel-sections' + +/** A declared name nobody provides: Missing chip, then Add (members: Add mine) opens an inline field. */ +export function CloudMissingSecretRow({ + name, + data, + expanded, + onExpand, + onCollapse, + onAdd, + autoFocus +}: { + name: string + data: CloudPanelSectionsData + expanded: boolean + onExpand: () => void + onCollapse: () => void + onAdd: CloudPanelAddSecret + autoFocus: boolean +}): React.JSX.Element { + const t = useTranslate() + const id = React.useId() + const admin = data.effective.caller.canWrite.org + // A teammate's Personal values don't reach someone else's shared workspace. + const guest = isGuestInSharedWorkspace(data) + const scopes = writableScopes(data.effective.caller, { + repo: data.repoKey !== null, + shared: true + }).filter((option) => !guest || option !== 'personal') + const canAdd = scopes.length > 0 + const [value, setValue] = React.useState('') + const [scope, setScope] = React.useState(scopes[0] ?? 'personal') + const [saving, setSaving] = React.useState(false) + const [error, setError] = React.useState(null) + const addLabel = + admin || guest + ? t('agentHostPanel.env.add', 'Add') + : t('agentHostPanel.env.addMine', 'Add mine') + const save = async (): Promise => { + if (!value || saving) { + return + } + setSaving(true) + setError(null) + const refusal = await onAdd(name, value, scope) + setSaving(false) + if (refusal) { + setError(refusal) + return + } + setValue('') + onCollapse() + } + return ( +
  • +
    + {name} + + {t('agentHostPanel.env.missing', 'Missing')} + + {expanded ? null : !canAdd ? ( + + {data.sharing?.ownerName + ? t('agentHostPanel.env.askOwner', 'Ask {{owner}}, an owner or an admin to add it.', { + owner: data.sharing.ownerName + }) + : t('agentHostPanel.keys.askAdmin', 'Ask an owner or admin to add one.')} + + ) : ( + + )} +
    + {expanded && canAdd ? ( +
    + +
    +
    { + if (event.key === 'Enter') { + event.preventDefault() + void save() + } else if (event.key === 'Escape') { + event.stopPropagation() + onCollapse() + } + }} + > + { + setValue(next) + setError(null) + }} + placeholder={t('agentHostPanel.env.valuePlaceholder', 'Value')} + invalid={error !== null} + disabled={saving} + autoFocus={autoFocus} + describedBy={error ? `${id}-error` : `${id}-help`} + /> +
    + {scopes.length > 1 || scopes[0] !== 'personal' ? ( + + ) : ( + + {cloudSecretScopeLabel('personal', t)} + + )} +
    + {error ? ( + + ) : null} +
    +

    + {admin || guest + ? t('cloudSecrets.editor.help', 'Write-only. You won’t see it again after saving.') + : t( + 'agentHostPanel.env.memberHelp', + 'Saved to your personal Cloud secrets, so only your workspaces get it.' + )} +

    +
    + + +
    +
    +
    + ) : null} +
    • + ) +} diff --git a/src/renderer/src/components/agent-host-panel/cloud-sections/CloudPanelSections.fixture.tsx b/src/renderer/src/components/agent-host-panel/cloud-sections/CloudPanelSections.fixture.tsx new file mode 100644 index 00000000000..c1e3ef34c31 --- /dev/null +++ b/src/renderer/src/components/agent-host-panel/cloud-sections/CloudPanelSections.fixture.tsx @@ -0,0 +1,191 @@ +import React from 'react' +import { defineFixture } from '../../../component-fixtures/component-fixture' +import type { + CloudSecretsCaller, + CloudSecretsEffective, + CloudWorkspaceSharing +} from '../../../../../shared/cloud-secrets/cloud-secrets-wire' +import { CloudPanelSections } from './CloudPanelSections' +import { cloudPanelSectionsData, type CloudPanelSectionsLoad } from './use-cloud-panel-sections' + +const UPDATED = 1_731_000_000_000 +const PRECEDENCE: CloudSecretsEffective['precedence'] = { + env: ['repo', 'personal', 'org'], + agent_key: ['org', 'repo', 'personal'] +} + +const ADMIN: CloudSecretsCaller = { + userId: 'u_ada', + orgId: 'org_acme', + orgRole: 'admin', + canWrite: { personal: true, org: true, repo: true } +} +const MEMBER: CloudSecretsCaller = { + userId: 'u_bo', + orgId: 'org_acme', + orgRole: 'member', + canWrite: { personal: true, org: false, repo: false } +} + +function effective(caller: CloudSecretsCaller): CloudSecretsEffective { + return { + caller, + precedence: PRECEDENCE, + secrets: [ + { + name: 'OPENAI_API_KEY', + kind: 'agent_key', + scope: 'org', + hint: 'M3kz', + updatedAt: UPDATED, + shadowed: [{ scope: 'personal', hint: '9f2c' }] + }, + { + name: 'ANTHROPIC_API_KEY', + kind: 'agent_key', + scope: 'repo', + hint: 'a71b', + updatedAt: UPDATED, + shadowed: [] + }, + { + name: 'DATABASE_URL', + kind: 'env', + scope: 'repo', + hint: null, + updatedAt: UPDATED, + shadowed: [{ scope: 'personal', hint: null }] + }, + { + name: 'NPM_TOKEN', + kind: 'env', + scope: 'personal', + hint: null, + updatedAt: UPDATED, + shadowed: [] + }, + { + name: 'SENTRY_DSN', + kind: 'env', + scope: 'org', + hint: null, + updatedAt: UPDATED, + shadowed: [] + } + ] + } +} + +function ready( + caller: CloudSecretsCaller, + options: { asleep?: boolean; sharing?: CloudWorkspaceSharing } = {} +): CloudPanelSectionsLoad { + return { + status: 'ready', + data: cloudPanelSectionsData({ + effective: effective(caller), + envVarNames: ['DATABASE_URL', 'NPM_TOKEN', 'SENTRY_DSN', 'STRIPE_TEST_KEY'], + repoKey: 'github.com/acme/web', + asleep: options.asleep ?? false, + sharing: options.sharing ?? null + }) + } +} + +const SHARED_GUEST: CloudWorkspaceSharing = { + shared: true, + ownerName: 'Ada Lovelace', + isOwner: false +} + +const noop = (): void => {} +const saved = async (): Promise => null + +/** Stands in for the panel shell (gap-agents' AgentHostPanel): 460 px, sections 2 and 3 only. */ +function Frame({ + load, + initialExpanded = null +}: { + load: CloudPanelSectionsLoad + initialExpanded?: string | null +}): React.JSX.Element { + return ( +
    +
    + +
    +
    + ) +} + +export const admin = defineFixture({ width: 520, render: () => }) + +export const adminAdding = defineFixture({ + width: 520, + render: () => +}) + +export const member = defineFixture({ width: 520, render: () => }) + +export const memberAdding = defineFixture({ + width: 520, + render: () => +}) + +export const asleep = defineFixture({ + width: 520, + render: () => +}) + +/** D13: a teammate in Ada's shared workspace. Their Personal values don't apply there. */ +export const shared = defineFixture({ + width: 520, + render: () => +}) + +export const sharedAsleep = defineFixture({ + width: 520, + render: () => +}) + +export const sharedAdmin = defineFixture({ + width: 520, + render: () => ( + + ) +}) + +export const loading = defineFixture({ + width: 520, + render: () => +}) + +export const failed = defineFixture({ + width: 520, + render: () => +}) + +export const empty = defineFixture({ + width: 520, + render: () => ( + + ) +}) diff --git a/src/renderer/src/components/agent-host-panel/cloud-sections/CloudPanelSections.tsx b/src/renderer/src/components/agent-host-panel/cloud-sections/CloudPanelSections.tsx new file mode 100644 index 00000000000..b3d701f987f --- /dev/null +++ b/src/renderer/src/components/agent-host-panel/cloud-sections/CloudPanelSections.tsx @@ -0,0 +1,387 @@ +import React from 'react' +import { useTranslate, type Translate } from '@/i18n/use-translate' +import { Button } from '@/components/ui/button' +import { InlineError } from '@/components/ui/inline-error' +import { maskedHint } from '@/components/settings/cloud-secrets/CloudSecretList' +import { + cloudSecretScopeLabel, + cloudSecretsErrorCopy +} from '@/components/settings/cloud-secrets/cloud-secrets-copy' +import { cn } from '@/lib/utils' +import type { + CloudSecretScope, + CloudSecretsErrorCode +} from '../../../../../shared/cloud-secrets/cloud-secrets-wire' +import { CloudMissingSecretRow } from './CloudMissingSecretRow' +import { LoadingRows, PanelSection } from './PanelSection' +import { + cloudEnvRows, + cloudKeyRows, + type CloudKeyOwner, + type CloudKeyRow, + type ShadowedKey +} from './cloud-panel-sections-model' +import { + isGuestInSharedWorkspace, + type CloudPanelAddSecret, + type CloudPanelSectionsLoad +} from './use-cloud-panel-sections' + +const OWNER_LABEL: Record, string> = { + claude: 'Claude', + codex: 'Codex', + gemini: 'Gemini', + cursor: 'Cursor', + copilot: 'Copilot' +} + +function ownerLabel(owner: CloudKeyOwner, t: Translate): string { + switch (owner) { + case 'gateway': + return t('agentHostPanel.keys.gateway', 'AI Gateway') + case 'aws': + return 'AWS' + case 'other': + return t('agentHostPanel.keys.other', 'Other') + case 'claude': + case 'codex': + case 'gemini': + case 'cursor': + case 'copilot': + return OWNER_LABEL[owner] + } +} + +/** A read that failed: transport problems say where, without the save-oriented "Nothing was changed". */ +export function cloudPanelLoadErrorTitle(code: CloudSecretsErrorCode, t: Translate): string { + return code === 'unavailable' || code === 'timeout' || code === 'unknown' + ? t('agentHostPanel.unreachable', 'Couldn’t reach Orca Cloud.') + : cloudSecretsErrorCopy(code, t) +} + +function shadowedReason(shadowedBy: CloudSecretScope, t: Translate): string { + return shadowedBy === 'org' + ? t('cloudAgents.source.shadowedByTeam', 'Not used while the team key is set.') + : t('cloudAgents.source.shadowedByRepo', 'Not used while the repository key is set.') +} + +function ShadowedKeyLine({ name, entry }: { name: string; entry: ShadowedKey }): React.JSX.Element { + const t = useTranslate() + return ( +
  • + + {name} {maskedHint(entry.hint)} + + + {cloudSecretScopeLabel(entry.scope, t)} · {shadowedReason(entry.shadowedBy, t)} + +
    • + ) +} + +function KeyRow({ + row, + onEdit +}: { + row: CloudKeyRow + onEdit?: (row: CloudKeyRow) => void +}): React.JSX.Element { + const t = useTranslate() + const scope = cloudSecretScopeLabel(row.scope, t) + const detail = row.editable + ? row.shadowed.length > 0 + ? t('agentHostPanel.keys.overrides', '{{scope}} · overrides {{others}}', { + scope, + others: row.shadowed.map((entry) => cloudSecretScopeLabel(entry.scope, t)).join(', ') + }) + : scope + : t('agentHostPanel.keys.readOnly', '{{scope}} · only owners and admins can change it', { + scope + }) + return ( +
  • + {ownerLabel(row.owner, t)} +
    +
    + + {row.name} {maskedHint(row.hint)} + + {detail} +
    + {row.shadowed.length > 0 ? ( +
      + {row.shadowed.map((entry) => ( + + ))} +
    + ) : null} +
    + {row.editable && onEdit ? ( + + ) : ( + + )} +
    • + ) +} + +/** + * Panel section 2 on Orca Cloud: the agent keys a workspace gets from Cloud secrets, the winning + * scope first and any key it hides listed disabled with the reason. Desktop keys never appear here; + * the shell appends its "Use in Orca Cloud" offer through `extraRows`. + */ +export function CloudAgentKeysSection({ + load, + number, + onEdit, + onManage, + onRetry, + extraRows +}: { + load: CloudPanelSectionsLoad + number?: React.ReactNode + onEdit?: (row: CloudKeyRow) => void + /** Opens Cloud secrets (Settings), where keys are added. */ + onManage?: () => void + onRetry: () => void + extraRows?: React.ReactNode +}): React.JSX.Element { + const t = useTranslate() + const rows = load.status === 'ready' ? cloudKeyRows(load.data.effective) : [] + return ( + + {load.status === 'ready' && load.data.sharing?.shared ? ( + + ) : null} + {load.status === 'loading' ? ( + + ) : load.status === 'failed' ? ( + + ) : rows.length === 0 && !extraRows ? ( +
    +

    + {t('agentHostPanel.keys.empty', 'No agent keys in Cloud secrets.')}{' '} + {load.data.effective.caller.canWrite.org + ? null + : t( + 'agentHostPanel.keys.emptyMember', + 'Add your own, or ask an owner or admin for a team key.' + )} +

    + {onManage ? ( + + ) : null} +
    + ) : ( +
      + {rows.map((row) => ( + + ))} + {extraRows} +
    + )} +     + ) +} + +/** + * Panel section 3 on Orca Cloud: the variables the workspace gets (winning scope and what it + * overrides), then the environment's declared names nobody provides, each with an inline Add + * (members: Add mine, Personal only). + */ +export function CloudEnvironmentPanelSection({ + load, + number, + onRetry, + onAdd, + focusSecret, + initialExpanded = null, + showLoadError = true +}: { + load: CloudPanelSectionsLoad + number?: React.ReactNode + onRetry: () => void + onAdd: CloudPanelAddSecret + /** Off when section 2 already shows the shared read's error. */ + showLoadError?: boolean + /** Deep link `{ secret: NAME }`: that missing row opens with its field focused. */ + focusSecret?: string + /** Fixtures only: a row shown already expanded. */ + initialExpanded?: string | null +}): React.JSX.Element { + const t = useTranslate() + const [expanded, setExpanded] = React.useState(focusSecret ?? initialExpanded) + const data = load.status === 'ready' ? load.data : null + const rows = data ? cloudEnvRows(data.effective, data.missing) : [] + const missingCount = data?.missing.length ?? 0 + return ( + + {t('agentHostPanel.asleepFooter', 'Changes reach the sandbox when it wakes.')} +

    + ) : null + } + > + {load.status === 'loading' ? ( + + ) : load.status === 'failed' ? ( + showLoadError ? ( + + ) : null + ) : rows.length === 0 ? ( +

    + {t('agentHostPanel.env.empty', 'No variables from Cloud secrets yet.')} +

    + ) : ( + <> + + {missingCount > 0 + ? t('cloudSecretsAsk.missing', '{{count}} secrets missing', { + count: missingCount, + defaultValue_one: '{{count}} secret missing' + }) + : ''} + +
      + {rows.map((row) => + row.kind === 'set' ? ( +
    • + {row.name} + + {cloudSecretScopeLabel(row.scope, t)} + + {row.overrides.length > 0 ? ( + + {t('agentHostPanel.env.overrides', 'overrides {{scopes}}', { + scopes: row.overrides + .map((scope) => cloudSecretScopeLabel(scope, t)) + .join(', ') + })} + + ) : null} +
      • + ) : data ? ( + setExpanded(row.name)} + onCollapse={() => setExpanded(null)} + onAdd={onAdd} + autoFocus={expanded === row.name && focusSecret === row.name} + /> + ) : null + )} +
    + + )} +     + ) +} + +/** Both Cloud sections, as the panel shell mounts them under section 1. */ +export function CloudPanelSections({ + load, + onRetry, + onAdd, + onEdit, + onManage, + focusSecret, + keysExtraRows, + initialExpanded, + className +}: { + load: CloudPanelSectionsLoad + onRetry: () => void + onAdd: CloudPanelAddSecret + onEdit?: (row: CloudKeyRow) => void + onManage?: () => void + focusSecret?: string + keysExtraRows?: React.ReactNode + initialExpanded?: string | null + className?: string +}): React.JSX.Element { + return ( +
    + + +
    + ) +} diff --git a/src/renderer/src/components/agent-host-panel/cloud-sections/PanelSection.tsx b/src/renderer/src/components/agent-host-panel/cloud-sections/PanelSection.tsx new file mode 100644 index 00000000000..e512ff8cac0 --- /dev/null +++ b/src/renderer/src/components/agent-host-panel/cloud-sections/PanelSection.tsx @@ -0,0 +1,55 @@ +import React from 'react' +import { useTranslate } from '@/i18n/use-translate' +import { Skeleton } from '@/components/ui/skeleton' + +/** The section frame the panel shell uses: numbered h3, help line, then rows. */ +export function PanelSection({ + number, + title, + help, + children, + footer +}: { + number?: React.ReactNode + title: string + help?: string + children: React.ReactNode + footer?: React.ReactNode +}): React.JSX.Element { + const id = React.useId() + return ( +
    +
    +

    + {number !== undefined ? ( + + {number} + + ) : null} + {title} +

    + {help ?

    {help}

    : null} +
    + {children} + {footer} +
    + ) +} + +export function LoadingRows(): React.JSX.Element { + const t = useTranslate() + return ( +
    + {[0, 1].map((row) => ( +
    + + + +
    + ))} + + {t('agentHostPanel.loadingSecrets', 'Loading Cloud secrets…')} + +
    + ) +} diff --git a/src/renderer/src/components/agent-host-panel/cloud-sections/cloud-panel-sections-model.test.ts b/src/renderer/src/components/agent-host-panel/cloud-sections/cloud-panel-sections-model.test.ts new file mode 100644 index 00000000000..325eeaca5b0 --- /dev/null +++ b/src/renderer/src/components/agent-host-panel/cloud-sections/cloud-panel-sections-model.test.ts @@ -0,0 +1,114 @@ +import { describe, expect, it } from 'vitest' +import type { + CloudEffectiveSecret, + CloudSecretsCaller, + CloudSecretsEffective +} from '../../../../../shared/cloud-secrets/cloud-secrets-wire' +import { + cloudEnvRows, + cloudKeyOwner, + cloudKeyRows, + withoutCallerPersonal +} from './cloud-panel-sections-model' +import { cloudPanelSectionsData } from './use-cloud-panel-sections' + +const MEMBER: CloudSecretsCaller = { + userId: 'u', + orgId: 'o', + orgRole: 'member', + canWrite: { personal: true, org: false, repo: false } +} + +function secret(patch: Partial & { name: string }): CloudEffectiveSecret { + return { kind: 'env', scope: 'org', hint: null, updatedAt: 0, shadowed: [], ...patch } +} + +function effective(secrets: CloudEffectiveSecret[]): CloudSecretsEffective { + return { + caller: MEMBER, + precedence: { env: ['repo', 'personal', 'org'], agent_key: ['org', 'repo', 'personal'] }, + secrets + } +} + +describe('cloudKeyOwner', () => { + it('maps credential names to their agent', () => { + expect(cloudKeyOwner('ANTHROPIC_AUTH_TOKEN')).toBe('claude') + expect(cloudKeyOwner('OPENAI_BASE_URL')).toBe('codex') + expect(cloudKeyOwner('GEMINI_API_KEY')).toBe('gemini') + expect(cloudKeyOwner('AI_GATEWAY_API_KEY')).toBe('gateway') + expect(cloudKeyOwner('AWS_REGION')).toBe('aws') + }) +}) + +describe('cloudKeyRows', () => { + it('lists agent keys only, by agent, with the keys each one hides', () => { + const rows = cloudKeyRows( + effective([ + secret({ name: 'DATABASE_URL' }), + secret({ + name: 'OPENAI_API_KEY', + kind: 'agent_key', + scope: 'org', + hint: 'M3kz', + shadowed: [{ scope: 'personal', hint: '9f2c' }] + }), + secret({ name: 'ANTHROPIC_API_KEY', kind: 'agent_key', scope: 'personal', hint: 'a1' }) + ]) + ) + expect(rows.map((row) => row.name)).toEqual(['ANTHROPIC_API_KEY', 'OPENAI_API_KEY']) + // A member can change their own Personal key, never the team's. + expect(rows.map((row) => row.editable)).toEqual([true, false]) + expect(rows[1].shadowed).toEqual([{ scope: 'personal', hint: '9f2c', shadowedBy: 'org' }]) + }) +}) + +describe('cloudEnvRows', () => { + it('lists set variables with what they override, then missing names', () => { + const rows = cloudEnvRows( + effective([ + secret({ + name: 'DATABASE_URL', + scope: 'repo', + shadowed: [{ scope: 'personal', hint: null }] + }), + secret({ name: 'OPENAI_API_KEY', kind: 'agent_key' }) + ]), + ['STRIPE_KEY'] + ) + expect(rows).toEqual([ + { kind: 'set', name: 'DATABASE_URL', scope: 'repo', overrides: ['personal'] }, + { kind: 'missing', name: 'STRIPE_KEY' } + ]) + }) +}) + +describe('shared workspaces (D13)', () => { + const values = effective([ + secret({ name: 'NPM_TOKEN', scope: 'personal' }), + secret({ name: 'SENTRY_DSN', scope: 'personal', shadowed: [{ scope: 'org', hint: null }] }), + secret({ name: 'DATABASE_URL', scope: 'repo', shadowed: [{ scope: 'personal', hint: null }] }) + ]) + + it("drops a teammate's Personal values: the next scope wins or the name goes missing", () => { + expect(withoutCallerPersonal(values).secrets).toEqual([ + secret({ name: 'SENTRY_DSN', scope: 'org' }), + secret({ name: 'DATABASE_URL', scope: 'repo' }) + ]) + }) + + it('applies only to a teammate who is not the owner', () => { + const declared = ['NPM_TOKEN', 'SENTRY_DSN', 'DATABASE_URL'] + const base = { effective: values, envVarNames: declared, repoKey: null, asleep: false } + expect( + cloudPanelSectionsData({ + ...base, + sharing: { shared: true, ownerName: 'Ada', isOwner: false } + }).missing + ).toEqual(['NPM_TOKEN']) + expect( + cloudPanelSectionsData({ ...base, sharing: { shared: true, ownerName: null, isOwner: true } }) + .missing + ).toEqual([]) + }) +}) diff --git a/src/renderer/src/components/agent-host-panel/cloud-sections/cloud-panel-sections-model.ts b/src/renderer/src/components/agent-host-panel/cloud-sections/cloud-panel-sections-model.ts new file mode 100644 index 00000000000..583102e0ce4 --- /dev/null +++ b/src/renderer/src/components/agent-host-panel/cloud-sections/cloud-panel-sections-model.ts @@ -0,0 +1,153 @@ +// Rows for the Orca Cloud panel's sections 2 (API keys from Cloud secrets) and 3 (Environment). +// Pure: names, scopes and hints only. +import { AGENT_CREDENTIAL_NAMES } from '../../../../../shared/agent-credentials/agent-credential-names' +import type { + CloudEffectiveSecret, + CloudSecretScope, + CloudSecretsCaller, + CloudSecretsEffective +} from '../../../../../shared/cloud-secrets/cloud-secrets-wire' +import { effectiveOfKind } from '../../cloud-secrets-ask/cloud-secrets-ask-model' + +/** Which agent a Cloud-secret key serves, for the row label. Shared names (gateway, AWS) say so. */ +export type CloudKeyOwner = + | 'claude' + | 'codex' + | 'gemini' + | 'cursor' + | 'copilot' + | 'gateway' + | 'aws' + | 'other' + +const OWNER_ORDER: readonly CloudKeyOwner[] = [ + 'claude', + 'codex', + 'gemini', + 'cursor', + 'copilot', + 'gateway', + 'aws', + 'other' +] + +export function cloudKeyOwner(name: string): CloudKeyOwner { + if (AGENT_CREDENTIAL_NAMES.claude.includes(name)) { + return 'claude' + } + if (AGENT_CREDENTIAL_NAMES.codex.includes(name)) { + return 'codex' + } + if (name.startsWith('GEMINI_') || name.startsWith('GOOGLE_')) { + return 'gemini' + } + if (name.startsWith('CURSOR_')) { + return 'cursor' + } + if (name.startsWith('COPILOT_')) { + return 'copilot' + } + if (name === 'AI_GATEWAY_API_KEY') { + return 'gateway' + } + if (name.startsWith('AWS_')) { + return 'aws' + } + return 'other' +} + +export type ShadowedKey = { + scope: CloudSecretScope + hint: string | null + /** Why it's not used: the winner's scope ('org' reads "team key", 'repo' "repository key"). */ + shadowedBy: CloudSecretScope +} + +export type CloudKeyRow = { + owner: CloudKeyOwner + name: string + scope: CloudSecretScope + hint: string | null + /** The caller may change the winning value (members can't touch Shared or Repository). */ + editable: boolean + shadowed: ShadowedKey[] +} + +export function canWriteScope( + caller: Pick, + scope: CloudSecretScope +): boolean { + return scope === 'org' + ? caller.canWrite.org + : scope === 'repo' + ? caller.canWrite.repo + : caller.canWrite.personal +} + +/** Section 2: one row per agent key name, the winner first, the keys it hides listed under it. */ +export function cloudKeyRows(effective: CloudSecretsEffective): CloudKeyRow[] { + return effectiveOfKind(effective, 'agent_key') + .map((secret) => ({ + owner: cloudKeyOwner(secret.name), + name: secret.name, + scope: secret.scope, + hint: secret.hint, + editable: canWriteScope(effective.caller, secret.scope), + shadowed: secret.shadowed.map((entry) => ({ + scope: entry.scope, + hint: entry.hint, + shadowedBy: secret.scope + })) + })) + .sort( + (a, b) => + OWNER_ORDER.indexOf(a.owner) - OWNER_ORDER.indexOf(b.owner) || a.name.localeCompare(b.name) + ) +} + +export type CloudEnvRow = + | { + kind: 'set' + name: string + scope: CloudSecretScope + /** Scopes this value overrides, in precedence order. */ + overrides: CloudSecretScope[] + } + | { kind: 'missing'; name: string } + +/** + * Section 3: variables the workspace gets (with the scope that wins), then the environment's declared + * names nobody provides. + */ +export function cloudEnvRows( + effective: CloudSecretsEffective, + missing: readonly string[] +): CloudEnvRow[] { + const set: CloudEnvRow[] = effectiveOfKind(effective, 'env').map( + (secret: CloudEffectiveSecret) => ({ + kind: 'set', + name: secret.name, + scope: secret.scope, + overrides: secret.shadowed.map((entry) => entry.scope) + }) + ) + return [...set, ...missing.map((name): CloudEnvRow => ({ kind: 'missing', name }))] +} + +/** + * What a teammate who doesn't own a shared workspace actually gets there: the owner's Personal values + * apply, not theirs, so the caller's Personal winners give way to the next scope (or drop out). + */ +export function withoutCallerPersonal(effective: CloudSecretsEffective): CloudSecretsEffective { + const secrets: CloudEffectiveSecret[] = [] + for (const secret of effective.secrets) { + const chain = [{ scope: secret.scope, hint: secret.hint }, ...secret.shadowed].filter( + (entry) => entry.scope !== 'personal' + ) + const [winner, ...rest] = chain + if (winner) { + secrets.push({ ...secret, scope: winner.scope, hint: winner.hint, shadowed: rest }) + } + } + return { ...effective, secrets } +} diff --git a/src/renderer/src/components/agent-host-panel/cloud-sections/use-cloud-panel-sections.ts b/src/renderer/src/components/agent-host-panel/cloud-sections/use-cloud-panel-sections.ts new file mode 100644 index 00000000000..788a52a1a62 --- /dev/null +++ b/src/renderer/src/components/agent-host-panel/cloud-sections/use-cloud-panel-sections.ts @@ -0,0 +1,142 @@ +// Data for the Orca Cloud panel's sections 2–3. Both reads go to the control plane (effective Cloud +// secrets and the org environment list), never to the sandbox, so an asleep sandbox stays asleep. +import { useCallback, useEffect, useState } from 'react' +import type { + CloudSecretScope, + CloudSecretsEffective, + CloudSecretsErrorCode, + CloudWorkspaceSharing +} from '../../../../../shared/cloud-secrets/cloud-secrets-wire' +import { withoutCallerPersonal } from './cloud-panel-sections-model' +import { + environmentForRepo, + missingSecretNames +} from '../../cloud-secrets-ask/cloud-secrets-ask-model' + +export type CloudPanelSectionsData = { + effective: CloudSecretsEffective + /** The environment's declared names nobody provides (empty without an environment). */ + missing: string[] + /** `github.com/owner/name`, for Repository writes; null when the workspace repo isn't on GitHub. */ + repoKey: string | null + /** Asleep: show what the control plane knows and say changes land on wake. Never wake to check. */ + asleep: boolean + /** Shared with teammates (D13), and whose workspace it is; null when unknown. */ + sharing: CloudWorkspaceSharing | null +} + +/** A teammate's view of someone else's shared workspace: only their non-Personal values apply. */ +export function isGuestInSharedWorkspace(data: Pick): boolean { + return data.sharing !== null && data.sharing.shared && !data.sharing.isOwner +} + +export function cloudPanelSectionsData(args: { + effective: CloudSecretsEffective + envVarNames: readonly string[] | null + repoKey: string | null + asleep: boolean + sharing: CloudWorkspaceSharing | null +}): CloudPanelSectionsData { + const guest = isGuestInSharedWorkspace(args) + const effective = guest ? withoutCallerPersonal(args.effective) : args.effective + return { + effective, + missing: args.envVarNames ? missingSecretNames(args.envVarNames, effective) : [], + repoKey: args.repoKey, + asleep: args.asleep, + sharing: args.sharing + } +} + +const NOT_CONFIGURED: CloudSecretsErrorCode = 'not_configured' + +export type CloudPanelSectionsLoad = + | { status: 'loading' } + | { status: 'failed'; error: CloudSecretsErrorCode } + | { status: 'ready'; data: CloudPanelSectionsData } + +/** Saves one value for a missing name; resolves to the refusal code, or null once saved. */ +export type CloudPanelAddSecret = ( + name: string, + value: string, + scope: CloudSecretScope +) => Promise + +export function useCloudPanelSections(args: { + repoKey: string | null + /** The sandbox's runtime environment, refreshed after a save while it's awake. */ + runtimeEnvironmentId: string | null + asleep: boolean +}): { load: CloudPanelSectionsLoad; reload: () => void; addSecret: CloudPanelAddSecret } { + const { repoKey, runtimeEnvironmentId, asleep } = args + const [load, setLoad] = useState({ status: 'loading' }) + const [generation, setGeneration] = useState(0) + + useEffect(() => { + const secrets = window.api.cloudSecrets + if (!secrets) { + setLoad({ status: 'failed', error: NOT_CONFIGURED }) + return + } + let cancelled = false + void (async () => { + const [effective, list, sharing] = await Promise.all([ + secrets.effective(repoKey ? { repo: repoKey } : {}).catch(() => null), + window.api.orcaCloudEnvironments?.list().catch(() => null) ?? Promise.resolve(null), + runtimeEnvironmentId + ? secrets.workspaceSharing({ runtimeEnvironmentId }).catch(() => null) + : Promise.resolve(null) + ]) + if (cancelled) { + return + } + if (!effective || !effective.ok) { + setLoad({ status: 'failed', error: effective?.ok === false ? effective.error : 'unknown' }) + return + } + const environment = + repoKey && list?.ok ? environmentForRepo(list.data.environments, repoKey) : null + setLoad({ + status: 'ready', + data: cloudPanelSectionsData({ + effective: effective.value, + envVarNames: environment?.envVarNames ?? null, + repoKey, + asleep, + sharing: sharing?.ok ? sharing.value : null + }) + }) + })() + return () => { + cancelled = true + } + }, [repoKey, asleep, runtimeEnvironmentId, generation]) + + const reload = useCallback(() => setGeneration((value) => value + 1), []) + + const addSecret = useCallback( + async (name, value, scope) => { + const api = window.api.cloudSecrets + if (!api) { + return 'not_configured' + } + if (scope === 'repo' && !repoKey) { + return 'repo_required' + } + const target = scope === 'repo' ? { scope, repo: repoKey ?? undefined } : { scope } + const result = await api.put({ target, name, value }).catch(() => null) + if (!result || !result.ok) { + return result?.ok === false ? result.error : 'unknown' + } + // An awake sandbox picks it up now; an asleep one gets it when it wakes. + if (!asleep && runtimeEnvironmentId) { + void api.refreshEnv({ runtimeEnvironmentId }).catch(() => {}) + } + setGeneration((current) => current + 1) + return null + }, + [repoKey, asleep, runtimeEnvironmentId] + ) + + return { load, reload, addSecret } +} diff --git a/src/renderer/src/components/agent-pane/AgentPanePortals.tsx b/src/renderer/src/components/agent-pane/AgentPanePortals.tsx new file mode 100644 index 00000000000..400d15a6089 --- /dev/null +++ b/src/renderer/src/components/agent-pane/AgentPanePortals.tsx @@ -0,0 +1,17 @@ +import { AgentSignInPanePortals } from '../agent-sign-in/AgentSignInPanePortals' +import type { TerminalPaneController } from '../terminal-pane/controller/use-terminal-pane-controller' +import { SecretRequestPanePortals } from './SecretRequestPanePortals' + +/** Cards an agent's host can raise over its pane: sign-in (#40228) and secret requests (S4-b). */ +export function AgentPanePortals({ + controller +}: { + controller: TerminalPaneController +}): React.JSX.Element { + return ( + <> + + + + ) +} diff --git a/src/renderer/src/components/agent-pane/SecretRequestCard.fixture.tsx b/src/renderer/src/components/agent-pane/SecretRequestCard.fixture.tsx new file mode 100644 index 00000000000..4b188d7cc56 --- /dev/null +++ b/src/renderer/src/components/agent-pane/SecretRequestCard.fixture.tsx @@ -0,0 +1,76 @@ +import React from 'react' +import { defineFixture } from '../../component-fixtures/component-fixture' +import { + SecretRequestCard, + type SecretRequestCardActions, + type SecretRequestCardModel +} from './SecretRequestCard' + +const noop = (): void => {} +const ACTIONS: SecretRequestCardActions = { + onValueChange: noop, + onScopeChange: noop, + onAdd: noop, + onNotNow: noop, + onRetry: noop, + onRestart: noop, + onDismiss: noop, + onToggleCollapsed: noop, + onDetails: noop +} + +const BASE: SecretRequestCardModel = { + agent: 'Claude', + name: 'NPM_TOKEN', + reason: 'Needed to install @acme packages from npm.acme.dev.', + suggestedRepo: false, + scopes: ['personal', 'repo'], + scope: 'personal', + value: '', + phase: 'open', + fieldError: null, + more: 0, + canRestart: true, + collapsed: false +} + +/** A terminal pane behind the card, as it sits over a Claude session. */ +function Pane({ model }: { model: Partial }): React.JSX.Element { + return ( +
    +
    +

    ● Installing private packages…

    +

    npm ERR! 401 Unauthorized - GET https://npm.acme.dev/@acme%2fui

    +

    ● I need an npm token for npm.acme.dev to continue.

    +
    + +
    +
    +
    + ) +} + +const frame = (model: Partial) => + defineFixture({ width: 640, render: () => }) + +export const open = frame({ value: 'npm_9f2cA81bX7' }) +export const openWithMore = frame({ more: 2 }) +export const repoHint = frame({ suggestedRepo: true }) +export const personalOnly = frame({ scopes: ['personal'] }) +export const unknownAgent = frame({ agent: null, canRestart: false }) +export const longReason = frame({ + reason: + 'The install step pulls @acme/ui, @acme/icons and @acme/tokens from the private registry at npm.acme.dev, which answers 401 without a token. I tried the public mirror first, but these packages are not published there, so I need NPM_TOKEN to finish setting up.' +}) +export const saving = frame({ value: 'npm_9f2cA81bX7', phase: 'saving' }) +export const refused = frame({ + value: 'x'.repeat(12), + fieldError: 'Values can be up to 8 KB.' +}) +export const failed = frame({ value: 'npm_9f2cA81bX7', phase: 'failed' }) +export const saved = frame({ phase: 'saved' }) +export const savedRepo = frame({ phase: 'saved', scope: 'repo' }) +export const savedAfterExpiry = frame({ phase: 'savedAfterExpiry' }) +export const expired = frame({ phase: 'expired' }) +export const collapsed = frame({ collapsed: true, more: 1 }) +export const notOnAskingPane = frame({ phase: 'saved', canRestart: false }) diff --git a/src/renderer/src/components/agent-pane/SecretRequestCard.tsx b/src/renderer/src/components/agent-pane/SecretRequestCard.tsx new file mode 100644 index 00000000000..435c5b01ce9 --- /dev/null +++ b/src/renderer/src/components/agent-pane/SecretRequestCard.tsx @@ -0,0 +1,320 @@ +import React from 'react' +import { ChevronDown, ChevronUp, KeyRound, Loader2 } from 'lucide-react' +import { useTranslate } from '@/i18n/use-translate' +import { Button } from '@/components/ui/button' +import { InlineError } from '@/components/ui/inline-error' +import { Label } from '@/components/ui/label' +import { SecretValueInput } from '@/components/settings/cloud-secrets/SecretValueInput' +import { cn } from '@/lib/utils' +import type { SecretRequestScope } from '../../../../shared/secret-request-contract' +import { + SecretRequestDone, + SecretRequestScopeControl, + SecretRequestTitle, + UntrustedReason +} from './SecretRequestCardParts' + +export { secretRequestTitle } from './SecretRequestCardParts' + +export type SecretRequestCardPhase = + | 'open' + | 'saving' + /** The save didn't reach Orca Cloud; nothing changed. */ + | 'failed' + | 'saved' + /** Saved, but the agent wasn't told: the request expired first, or orcad didn't answer (D3). */ + | 'savedAfterExpiry' + | 'expired' + +export type SecretRequestCardModel = { + /** Display name ("Claude"), or null when orcad couldn't tell which agent asked. */ + agent: string | null + name: string + /** Untrusted agent text; rendered as plain text only. */ + reason: string | null + /** The agent suggested Repository. A hint only: it never preselects (D2). */ + suggestedRepo: boolean + /** Personal always; Repository only when the person can write it. Never Shared (D6). */ + scopes: readonly SecretRequestScope[] + scope: SecretRequestScope + value: string + phase: SecretRequestCardPhase + /** A refusal for this name or value (reserved name, too large…), shown under the field. */ + fieldError: string | null + /** Other requests waiting on this pane. */ + more: number + /** Restart is offered only on the asking agent's own pane. */ + canRestart: boolean + /** Folded to one line so the output under it can be read, without declining. */ + collapsed: boolean +} + +export type SecretRequestCardActions = { + onValueChange: (value: string) => void + onScopeChange: (scope: SecretRequestScope) => void + onAdd: () => void + onNotNow: () => void + onRetry: () => void + onRestart: () => void + onDismiss: () => void + onToggleCollapsed: () => void + /** Opens the Agent accounts & secrets panel on this name; absent until the panel exists. */ + onDetails?: () => void + /** Focus entered or left the card (the desktop keeps the request alive while it has focus). */ + onFocusChange?: (focused: boolean) => void +} + +/** + * S4-b: an agent in an Orca Cloud workspace asked for a secret. The value goes from this card to + * Orca Cloud only; the agent is told it's ready and never gets it from Orca. Non-modal: it never takes + * focus from the terminal (F6 moves focus in and back out). + */ +export function SecretRequestCard({ + model, + actions, + rootRef, + className +}: { + model: SecretRequestCardModel + actions: SecretRequestCardActions + rootRef?: React.Ref + className?: string +}): React.JSX.Element { + const t = useTranslate() + const id = React.useId() + const titleId = `${id}-title` + const helpId = `${id}-help` + const errorId = `${id}-error` + const agentName = model.agent ?? t('secretRequest.anAgent', 'an agent') + const done = model.phase === 'saved' || model.phase === 'savedAfterExpiry' + const saving = model.phase === 'saving' + const canSave = model.value.length > 0 && !saving + const ownRef = React.useRef(null) + const focusedWithin = React.useRef(false) + + // When the form gives way to the result, focus that was in it lands on Dismiss (never Restart, so a + // second Enter can't relaunch the agent) instead of falling to the page. + React.useLayoutEffect(() => { + const root = ownRef.current + if (done && focusedWithin.current && root && !root.contains(document.activeElement)) { + root.querySelector('[data-secret-request-dismiss]')?.focus() + } + }, [done]) + + const setRefs = (node: HTMLDivElement | null): void => { + ownRef.current = node + if (typeof rootRef === 'function') { + rootRef(node) + } else if (rootRef) { + rootRef.current = node + } + } + + const header = ( +
    + +
    +

    + +

    + {model.more > 0 ? ( + + {t('secretRequest.more', '{{count}} more requests', { + count: model.more, + defaultValue_one: '{{count}} more request' + })} + + ) : null} +
    + +
    + ) + + return ( +
    { + if (event.key === 'Escape' && !done && !saving && model.phase !== 'expired') { + event.stopPropagation() + actions.onNotNow() + } + }} + onFocus={() => { + focusedWithin.current = true + actions.onFocusChange?.(true) + }} + onBlur={(event) => { + const root = event.currentTarget + if (root.contains(event.relatedTarget)) { + return + } + // A control that unmounts (Add → result) blurs with nowhere to go; that isn't leaving. + window.setTimeout(() => { + if (!root.isConnected || root.contains(document.activeElement)) { + return + } + if (document.activeElement === document.body) { + return + } + focusedWithin.current = false + actions.onFocusChange?.(false) + }, 0) + }} + className={cn( + 'flex w-full flex-col gap-3 rounded-lg border border-border bg-popover font-sans text-sm text-popover-foreground shadow-lg motion-safe:animate-in motion-safe:fade-in-0', + model.collapsed ? 'px-3 py-2' : 'p-4', + className + )} + > + {done ? ( + + ) : model.collapsed ? ( + header + ) : ( + <> + {header} + {model.reason ? ( +
    + +
    + ) : null} + {model.phase === 'expired' ? ( + + {t('secretRequest.dismiss', 'Dismiss')} + + } + /> + ) : ( + <> +
    + +
    +
    { + if (event.key === 'Enter' && canSave) { + event.preventDefault() + actions.onAdd() + } + }} + > + +
    + +
    + {model.fieldError ? ( + + ) : null} +

    + {t( + 'secretRequest.helpBeforeSave', + 'Saves to your Cloud secrets. Commands in this workspace can read it as ${{name}}.', + { name: model.name } + )} +

    + {model.suggestedRepo && model.scopes.includes('repo') ? ( +

    + {t('secretRequest.repoHint', '{{agent}} suggested Repository', { + agent: agentName + })} +

    + ) : null} +
    + {model.phase === 'failed' ? ( + + ) : null} +
    + {actions.onDetails ? ( + + ) : null} + + +
    + + )} + + )} +
    + ) +} diff --git a/src/renderer/src/components/agent-pane/SecretRequestCardParts.tsx b/src/renderer/src/components/agent-pane/SecretRequestCardParts.tsx new file mode 100644 index 00000000000..adbe3219780 --- /dev/null +++ b/src/renderer/src/components/agent-pane/SecretRequestCardParts.tsx @@ -0,0 +1,216 @@ +import React from 'react' +import { CircleCheck, RotateCw } from 'lucide-react' +import { useTranslate, type Translate } from '@/i18n/use-translate' +import { Button } from '@/components/ui/button' +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue +} from '@/components/ui/select' +import { cloudSecretScopeLabel } from '@/components/settings/cloud-secrets/cloud-secrets-copy' +import { cn } from '@/lib/utils' +import type { SecretRequestScope } from '../../../../shared/secret-request-contract' + +const NAME_SLOT = '\u0000' + +/** The translated title with the variable name set in monospace. */ +export function SecretRequestTitle({ + agent, + name +}: { + agent: string | null + name: string +}): React.JSX.Element { + const t = useTranslate() + const text = agent + ? t('secretRequest.title', '{{agent}} asked for {{name}}', { agent, name: NAME_SLOT }) + : t('secretRequest.titleUnknown', 'An agent asked for {{name}}', { name: NAME_SLOT }) + const at = text.indexOf(NAME_SLOT) + if (at === -1) { + return <>{text} + } + return ( + <> + {text.slice(0, at)} + {name} + {text.slice(at + NAME_SLOT.length)} + + ) +} + +/** Title text for aria-label and announcements. */ +export function secretRequestTitle(agent: string | null, name: string, t: Translate): string { + return agent + ? t('secretRequest.title', '{{agent}} asked for {{name}}', { agent, name }) + : t('secretRequest.titleUnknown', 'An agent asked for {{name}}', { name }) +} + +/** Plain text clamped to two lines, with Show more when it overflows. Never linkified. */ +export function UntrustedReason({ + reason, + from +}: { + reason: string + from: string +}): React.JSX.Element { + const t = useTranslate() + const ref = React.useRef(null) + const [expanded, setExpanded] = React.useState(false) + const [overflows, setOverflows] = React.useState(false) + React.useLayoutEffect(() => { + const element = ref.current + if (element && !expanded) { + setOverflows(element.scrollHeight > element.clientHeight + 1) + } + }, [reason, expanded]) + return ( +
    +
    + + {`“${reason}”`} + +
    +
    + {from} + {overflows || expanded ? ( + + ) : null} +
    +
    + ) +} + +export function SecretRequestScopeControl({ + name, + scopes, + scope, + disabled, + onChange +}: { + name: string + scopes: readonly SecretRequestScope[] + scope: SecretRequestScope + disabled: boolean + onChange: (scope: SecretRequestScope) => void +}): React.JSX.Element { + const t = useTranslate() + if (scopes.length < 2) { + return ( + + {cloudSecretScopeLabel('personal', t)} + + ) + } + return ( + + ) +} + +/** Saved: when the value reaches new shells, whether the agent was told, and Restart {{agent}} (Q5). */ +export function SecretRequestDone({ + agent, + name, + scope, + toldAgent, + canRestart, + titleId, + onRestart, + onDismiss +}: { + agent: string | null + name: string + scope: SecretRequestScope + /** False when the request expired first or orcad didn't answer: the agent wasn't told. */ + toldAgent: boolean + canRestart: boolean + titleId: string + onRestart: () => void + onDismiss: () => void +}): React.JSX.Element { + const t = useTranslate() + const theAgent = agent ?? t('secretRequest.theAgent', 'The agent') + const agentName = agent ?? t('secretRequest.anAgent', 'an agent') + return ( +
    + +
    +

    + {!toldAgent + ? t( + 'secretRequest.savedAfterExpiry', + 'Saved. {{agent}} stopped waiting, so tell it the secret is ready.', + { agent: theAgent } + ) + : scope === 'repo' + ? t('secretRequest.doneRepo', '{{name}} added to this repository’s secrets.', { + name + }) + : t('secretRequest.done', '{{name}} added to your personal secrets.', { name })} +

    +

    + {toldAgent + ? t( + 'secretRequest.doneDetail', + 'New shells get it now. {{agent}} was told it’s ready, and it never gets the value from Orca.', + { agent: theAgent } + ) + : t('secretRequest.doneDetailExpired', 'New shells get it now.')}{' '} + {canRestart + ? t( + 'secretRequest.restartDetail', + 'Restart {{agent}} to give its own shell the new value.', + { agent: agentName } + ) + : null} +

    +
    +
    + {canRestart ? ( + + ) : null} + +
    +
    + ) +} diff --git a/src/renderer/src/components/agent-pane/SecretRequestPanePortals.tsx b/src/renderer/src/components/agent-pane/SecretRequestPanePortals.tsx new file mode 100644 index 00000000000..cc38a0a6d07 --- /dev/null +++ b/src/renderer/src/components/agent-pane/SecretRequestPanePortals.tsx @@ -0,0 +1,174 @@ +import React, { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react' +import { createPortal } from 'react-dom' +import { useAppStore } from '@/store' +import { useTranslate } from '@/i18n/use-translate' +import type { ManagedPane } from '@/lib/pane-manager/pane-manager-types' +import { + useSecretRequests, + type SecretRequestEntry +} from '@/lib/secret-requests/secret-request-store' +import { + routeSecretRequests, + secretRequestAgentName +} from '@/lib/secret-requests/secret-request-routing' +import { makePaneKey } from '../../../../shared/workspace-layout/stable-pane-id' +import { parseRemoteRuntimePtyId } from '../../../../shared/remote-runtime/remote-runtime-pty-id' +import type { TerminalPaneController } from '../terminal-pane/controller/use-terminal-pane-controller' +import { SecretRequestCard, secretRequestTitle } from './SecretRequestCard' +import { + registerSecretRequestCard, + setSecretRequestSlot, + useSecretRequestSlots +} from './secret-request-focus' +import { useSecretRequestCard } from './use-secret-request-card' + +function SecretRequestPaneCardBody({ + entry, + more, + pane, + paneKey, + ptyId, + worktreeId, + onAskingPane, + primary, + announcement +}: { + entry: SecretRequestEntry + more: number + pane: ManagedPane + paneKey: string + ptyId: string + worktreeId: string + onAskingPane: boolean + primary: boolean + announcement: string +}): React.JSX.Element { + const { model, actions } = useSecretRequestCard({ entry, more, worktreeId, ptyId, onAskingPane }) + const cardRef = useRef(null) + // Filled after mount so screen readers hear it once; a live region's initial text isn't read. + const [spoken, setSpoken] = useState('') + const open = model.phase === 'open' + useEffect(() => { + if (!open) { + setSpoken('') + return + } + const timer = window.setTimeout(() => setSpoken(announcement), 150) + return () => window.clearTimeout(timer) + }, [open, announcement]) + + // F6 reaches this card from its pane (or from anywhere when it's on the active pane), and the card + // hands focus back to where it came from when it goes away. + useLayoutEffect( + () => + registerSecretRequestCard({ + paneKey, + container: pane.container, + card: () => cardRef.current, + primary + }), + [paneKey, pane.container, primary] + ) + + return ( +
    + + {spoken} + + +
    + ) +} + +function SecretRequestPaneSlot({ + pane, + tabId, + visible, + primary, + worktreeId +}: { + pane: ManagedPane + tabId: string + visible: boolean + primary: boolean + worktreeId: string +}): React.JSX.Element | null { + const t = useTranslate() + const paneKey = makePaneKey(tabId, pane.leafId) + const ptyId = useAppStore( + (state) => state.terminalLayoutsByTabId[tabId]?.ptyIdsByLeafId?.[pane.leafId] ?? null + ) + const remote = ptyId ? parseRemoteRuntimePtyId(ptyId) : null + const environmentId = remote?.environmentId ?? null + const handle = remote?.handle ?? null + useEffect(() => { + if (!environmentId) { + return + } + setSecretRequestSlot(paneKey, { paneKey, environmentId, handle, visible, primary }) + return () => setSecretRequestSlot(paneKey, null) + }, [paneKey, environmentId, handle, visible, primary]) + + const requests = useSecretRequests() + const slots = useSecretRequestSlots() + const mine = useMemo( + () => (environmentId ? (routeSecretRequests(requests, slots).get(paneKey) ?? []) : []), + [environmentId, requests, slots, paneKey] + ) + const first = mine[0] + if (!first || !ptyId) { + return null + } + const { entry } = first + return createPortal( + , + pane.container, + `secret-request-${pane.id}` + ) +} + +/** S4-b: a pane whose agent asked for a secret shows the request card over its top edge. */ +export function SecretRequestPanePortals({ + controller +}: { + controller: TerminalPaneController +}): React.JSX.Element { + const { managedPanes, tabId, activePane, isActive, isRendererVisible, worktreeId } = controller + return ( + <> + {managedPanes.map((pane) => ( + + ))} + + ) +} diff --git a/src/renderer/src/components/agent-pane/SecretRequestUnseenNotifier.tsx b/src/renderer/src/components/agent-pane/SecretRequestUnseenNotifier.tsx new file mode 100644 index 00000000000..e2d344005e0 --- /dev/null +++ b/src/renderer/src/components/agent-pane/SecretRequestUnseenNotifier.tsx @@ -0,0 +1,78 @@ +import { useEffect } from 'react' +import { toast } from 'sonner' +import { useTranslate } from '@/i18n/use-translate' +import { useAppStore } from '@/store' +import { selectWorktreesByRepo } from '@/store/workspaces/catalog/workspace-record-fields' +import { activateAndRevealWorktree } from '@/lib/workspace/activation/worktree-activation' +import { + useSecretRequests, + type SecretRequestEntry +} from '@/lib/secret-requests/secret-request-store' +import { + secretRequestAgentName, + unseenSecretRequests +} from '@/lib/secret-requests/secret-request-routing' +import { secretRequestTitle } from './SecretRequestCard' +import { useSecretRequestSlots } from './secret-request-focus' + +// Panes mount a moment after their stream attaches; don't toast for a card that's about to show. +const SETTLE_MS = 2_000 +const told = new Set() + +/** The workspace on this computer that the asking host's request belongs to. */ +function workspaceFor(entry: SecretRequestEntry): { id: string; name: string } | null { + const all = Object.values(selectWorktreesByRepo(useAppStore.getState()) ?? {}).flat() + const match = + all.find((worktree) => worktree.id === entry.event.worktreeId) ?? + all.find((worktree) => worktree.runtimeOwnerEnvironmentId === entry.environmentId) + return match ? { id: match.id, name: match.displayName } : null +} + +/** + * A request whose workspace isn't on screen would otherwise wait unseen until it expires: say so + * once, name the workspace, and open it on click. + */ +export function SecretRequestUnseenNotifier(): null { + const t = useTranslate() + const requests = useSecretRequests() + const slots = useSecretRequestSlots() + useEffect(() => { + const unseen = unseenSecretRequests(requests, slots).filter( + (entry) => !told.has(`${entry.environmentId}:${entry.event.requestId}`) + ) + if (unseen.length === 0) { + return + } + const timer = window.setTimeout(() => { + for (const entry of unseen) { + told.add(`${entry.environmentId}:${entry.event.requestId}`) + const workspace = workspaceFor(entry) + toast.info( + secretRequestTitle(secretRequestAgentName(entry.event.agent), entry.event.name, t), + { + description: workspace + ? t( + 'secretRequest.unseenIn', + 'In {{workspace}}. The request waits up to 15 minutes.', + { + workspace: workspace.name + } + ) + : t( + 'secretRequest.unseen', + 'Open that workspace to answer. The request waits up to 15 minutes.' + ), + action: workspace + ? { + label: t('secretRequest.openWorkspace', 'Open'), + onClick: () => activateAndRevealWorktree(workspace.id) + } + : undefined + } + ) + } + }, SETTLE_MS) + return () => window.clearTimeout(timer) + }, [requests, slots, t]) + return null +} diff --git a/src/renderer/src/components/agent-pane/secret-request-focus.ts b/src/renderer/src/components/agent-pane/secret-request-focus.ts new file mode 100644 index 00000000000..8c61dca0ae9 --- /dev/null +++ b/src/renderer/src/components/agent-pane/secret-request-focus.ts @@ -0,0 +1,155 @@ +// Where secret-request cards can show (one slot per mounted remote pane), and keyboard focus for the +// cards: one app-wide F6 handler moves focus into the card for the pane you're in and back out, and a +// card that goes away hands focus back instead of dropping it on the page. +import { useSyncExternalStore } from 'react' +import type { SecretRequestPaneSlot } from '@/lib/secret-requests/secret-request-routing' + +const slots = new Map() +const slotListeners = new Set<() => void>() +let slotSnapshot: readonly SecretRequestPaneSlot[] = [] + +export function setSecretRequestSlot(paneKey: string, slot: SecretRequestPaneSlot | null): void { + const current = slots.get(paneKey) + if (slot === null) { + if (!current) { + return + } + slots.delete(paneKey) + } else { + if ( + current?.environmentId === slot.environmentId && + current.handle === slot.handle && + current.visible === slot.visible && + current.primary === slot.primary + ) { + return + } + slots.set(paneKey, slot) + } + slotSnapshot = [...slots.values()] + for (const listener of slotListeners) { + listener() + } +} + +export function useSecretRequestSlots(): readonly SecretRequestPaneSlot[] { + return useSyncExternalStore( + (listener) => { + slotListeners.add(listener) + return () => slotListeners.delete(listener) + }, + () => slotSnapshot, + () => slotSnapshot + ) +} + +type CardRecord = { + paneKey: string + container: HTMLElement + element: HTMLElement + primary: boolean + /** Where F6 came from, to go back to. */ + returnTo: HTMLElement | null + hadFocus: boolean +} + +const cards = new Map() + +/** The pane's terminal input, when the element focus came from is gone. */ +function terminalInput(container: HTMLElement): HTMLElement | null { + return container.querySelector('textarea') +} + +function focusInto(record: CardRecord, from: Element | null): void { + record.returnTo = from instanceof HTMLElement && from !== document.body ? from : null + const target = + record.element.querySelector('input:not([disabled]), textarea:not([disabled])') ?? + record.element.querySelector('button') + target?.focus() +} + +function focusBack(record: CardRecord): void { + const back = + record.returnTo && record.returnTo.isConnected + ? record.returnTo + : terminalInput(record.container) + back?.focus() +} + +function onKeyDown(event: KeyboardEvent): void { + if (event.key !== 'F6' || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) { + return + } + const active = document.activeElement + const all = [...cards.values()] + const inside = all.find((record) => record.element.contains(active)) + const target = + inside ?? + all.find((record) => active !== null && record.container.contains(active)) ?? + // From the terminal or nowhere only: inside Settings or a modal, F6 belongs to that surface. + (active === null || active === document.body || active.closest('.xterm') !== null + ? all.find((record) => record.primary) + : undefined) + if (!target) { + return + } + event.preventDefault() + event.stopImmediatePropagation() + if (inside) { + focusBack(inside) + } else { + focusInto(target, active) + } +} + +export function registerSecretRequestCard(args: { + paneKey: string + container: HTMLElement + card: () => HTMLElement | null + primary: boolean +}): () => void { + const element = args.card() + if (!element) { + return () => {} + } + const previous = cards.get(args.paneKey) + const record: CardRecord = { + paneKey: args.paneKey, + container: args.container, + element, + primary: args.primary, + returnTo: previous?.element === element ? previous.returnTo : null, + hadFocus: previous?.element === element ? previous.hadFocus : false + } + const onFocusIn = (): void => { + record.hadFocus = true + } + const onFocusOut = (event: FocusEvent): void => { + if (event.relatedTarget instanceof Node && !element.contains(event.relatedTarget)) { + record.hadFocus = false + } + } + element.addEventListener('focusin', onFocusIn) + element.addEventListener('focusout', onFocusOut) + if (cards.size === 0) { + window.addEventListener('keydown', onKeyDown, true) + } + cards.set(args.paneKey, record) + return () => { + element.removeEventListener('focusin', onFocusIn) + element.removeEventListener('focusout', onFocusOut) + if (cards.get(args.paneKey) === record) { + cards.delete(args.paneKey) + } + if (cards.size === 0) { + window.removeEventListener('keydown', onKeyDown, true) + } + // After the commit: if the card left the page while it held focus, focus goes back, not to . + queueMicrotask(() => { + const lost = document.activeElement === null || document.activeElement === document.body + if (!element.isConnected && record.hadFocus && lost) { + focusBack(record) + } + }) + } +} diff --git a/src/renderer/src/components/agent-pane/use-secret-request-card.test.tsx b/src/renderer/src/components/agent-pane/use-secret-request-card.test.tsx new file mode 100644 index 00000000000..8c5f65e586a --- /dev/null +++ b/src/renderer/src/components/agent-pane/use-secret-request-card.test.tsx @@ -0,0 +1,207 @@ +// @vitest-environment happy-dom +import { act, cleanup, fireEvent, render, screen } from '@testing-library/react' +import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest' +import type { SecretRequestedEvent } from '../../../../shared/secret-request-contract' +import { + applySecretRequested, + readSecretRequests, + resetSecretRequestStoreForTests, + useSecretRequests +} from '@/lib/secret-requests/secret-request-store' +import { SecretRequestCard } from './SecretRequestCard' +import { + resetSecretRequestCardCachesForTests, + SECRET_REQUEST_TOUCH_INTERVAL_MS, + useSecretRequestCard +} from './use-secret-request-card' + +const rpc = vi.hoisted(() => vi.fn()) +vi.mock('@/runtime/rpc/calls/runtime-rpc-call', () => ({ callRuntimeRpc: rpc })) + +const NOW = 1_700_000_000_000 +const put = vi.fn() +const refreshEnv = vi.fn() +const effective = vi.fn() + +function event(patch: Partial = {}): SecretRequestedEvent { + return { + type: 'secrets.requested', + requestId: 'sr_aaaaaaaa', + name: 'NPM_TOKEN', + reason: 'See here', + scope: 'repo', + agent: 'claude', + worktreeId: null, + terminalHandle: 'h1', + requestedAt: NOW, + expiresAt: NOW + 15 * 60_000, + ...patch + } +} + +function Harness(): React.JSX.Element | null { + const entry = useSecretRequests()[0] + return entry ? : null +} + +function Card({ entry }: { entry: ReturnType[number] }) { + const { model, actions } = useSecretRequestCard({ + entry, + more: 0, + worktreeId: null, + ptyId: 'p', + onAskingPane: true + }) + return +} + +function valueInput(): HTMLInputElement { + return screen.getByLabelText('Value for NPM_TOKEN') +} + +describe('S4-b secret request card', () => { + beforeEach(() => { + vi.useFakeTimers({ + now: NOW, + toFake: ['Date', 'setTimeout', 'clearTimeout', 'setInterval', 'clearInterval'] + }) + put.mockResolvedValue({ ok: true, value: {} }) + refreshEnv.mockResolvedValue({ ok: true, value: true }) + effective.mockResolvedValue({ ok: false, error: 'unavailable' }) + rpc.mockImplementation(async (_target, method: string) => + method === 'secrets.touchRequest' + ? { expiresAt: Date.now() + 15 * 60_000 } + : { outcome: 'provided' } + ) + Object.assign(window, { api: { cloudSecrets: { put, refreshEnv, effective } } }) + applySecretRequested('env-1', event()) + }) + afterEach(() => { + cleanup() + vi.useRealTimers() + vi.clearAllMocks() + resetSecretRequestStoreForTests() + resetSecretRequestCardCachesForTests() + }) + + it('shows the reason as plain text and never preselects the agent’s Repository hint', () => { + render() + expect(document.querySelector('a')).toBeNull() + expect(screen.getByText(/See { + render() + fireEvent.change(valueInput(), { target: { value: 'npm_secret_1' } }) + await act(async () => { + fireEvent.click(screen.getByRole('button', { name: 'Add secret' })) + }) + expect(put).toHaveBeenCalledWith({ + target: { scope: 'personal' }, + name: 'NPM_TOKEN', + value: 'npm_secret_1' + }) + const resolve = rpc.mock.calls.find(([, method]) => method === 'secrets.resolveRequest') + expect(resolve?.[2]).toEqual({ requestId: 'sr_aaaaaaaa', outcome: 'provided' }) + expect(JSON.stringify(rpc.mock.calls)).not.toContain('npm_secret_1') + expect(screen.getByText('NPM_TOKEN added to your personal secrets.')).toBeTruthy() + expect(screen.getByRole('button', { name: /Restart Claude/ })).toBeTruthy() + }) + + it('says the agent stopped waiting when the request expired mid-save', async () => { + rpc.mockImplementation(async (_target, method: string) => + method === 'secrets.resolveRequest' ? { outcome: 'expired' } : { expiresAt: NOW } + ) + render() + fireEvent.change(valueInput(), { target: { value: 'v' } }) + await act(async () => { + fireEvent.click(screen.getByRole('button', { name: 'Add secret' })) + }) + expect(screen.getByText(/Claude stopped waiting, so tell it the secret is ready/)).toBeTruthy() + }) + + it('keeps the value and offers Try again when Orca Cloud is unreachable', async () => { + put.mockResolvedValue({ ok: false, error: 'unavailable' }) + render() + fireEvent.change(valueInput(), { target: { value: 'v' } }) + await act(async () => { + fireEvent.click(screen.getByRole('button', { name: 'Add secret' })) + }) + expect(screen.getByText('Couldn’t reach Orca Cloud.')).toBeTruthy() + expect(valueInput().value).toBe('v') + expect(rpc.mock.calls.some(([, method]) => method === 'secrets.resolveRequest')).toBe(false) + }) + + it('touches the request at most once a minute while a value is typed', async () => { + render() + fireEvent.change(valueInput(), { target: { value: 'v' } }) + await act(async () => { + vi.advanceTimersByTime(0) + }) + fireEvent.focus(valueInput()) + fireEvent.blur(valueInput()) + fireEvent.focus(valueInput()) + await act(async () => { + vi.advanceTimersByTime(SECRET_REQUEST_TOUCH_INTERVAL_MS * 2 + 1_000) + }) + const touches = rpc.mock.calls.filter(([, method]) => method === 'secrets.touchRequest') + expect(touches).toHaveLength(3) + }) + + it('expires on its own clock and clears what was typed', async () => { + render() + fireEvent.change(valueInput(), { target: { value: 'typed' } }) + // Fails the touch so the expiry stays put. + rpc.mockRejectedValue(new Error('offline')) + await act(async () => { + vi.advanceTimersByTime(15 * 60_000 + 1) + }) + expect(screen.getByText('This request expired.')).toBeTruthy() + expect(screen.queryByLabelText('Value for NPM_TOKEN')).toBeNull() + }) + + it('never declines while a save is in flight', async () => { + let finish: (value: unknown) => void = () => {} + put.mockReturnValue(new Promise((resolve) => (finish = resolve))) + render() + fireEvent.change(valueInput(), { target: { value: 'v' } }) + await act(async () => { + fireEvent.click(screen.getByRole('button', { name: 'Add secret' })) + }) + await act(async () => { + fireEvent.keyDown(valueInput(), { key: 'Escape' }) + fireEvent.click(screen.getByRole('button', { name: 'Not now' })) + }) + expect(rpc.mock.calls.some(([, , params]) => params?.outcome === 'declined')).toBe(false) + await act(async () => finish({ ok: true, value: {} })) + expect(screen.getByText('NPM_TOKEN added to your personal secrets.')).toBeTruthy() + }) + + it('says the agent wasn’t told when orcad doesn’t answer the resolve', async () => { + rpc.mockImplementation(async (_target, method: string) => { + if (method === 'secrets.resolveRequest') { + throw new Error('timeout') + } + return { expiresAt: NOW } + }) + render() + fireEvent.change(valueInput(), { target: { value: 'v' } }) + await act(async () => { + fireEvent.click(screen.getByRole('button', { name: 'Add secret' })) + }) + expect(screen.getByText(/stopped waiting, so tell it the secret is ready/)).toBeTruthy() + }) + + it('declines on Escape', async () => { + render() + await act(async () => { + fireEvent.keyDown(valueInput(), { key: 'Escape' }) + }) + expect(readSecretRequests()).toEqual([]) + const resolve = rpc.mock.calls.find(([, method]) => method === 'secrets.resolveRequest') + expect(resolve?.[2]).toEqual({ requestId: 'sr_aaaaaaaa', outcome: 'declined' }) + }) +}) diff --git a/src/renderer/src/components/agent-pane/use-secret-request-card.ts b/src/renderer/src/components/agent-pane/use-secret-request-card.ts new file mode 100644 index 00000000000..474d3d44f4b --- /dev/null +++ b/src/renderer/src/components/agent-pane/use-secret-request-card.ts @@ -0,0 +1,300 @@ +// Drives one S4-b card: the typed value lives only here, is sent once to Orca Cloud (PUT +// /v1/secrets/:scope/:NAME through main), then orcad is told the outcome. The value never goes to orcad. +import { useCallback, useEffect, useState } from 'react' +import { useTranslate } from '@/i18n/use-translate' +import { useAppStore } from '@/store' +import { callRuntimeRpc } from '@/runtime/rpc/calls/runtime-rpc-call' +import { cloudSecretsErrorCopy } from '@/components/settings/cloud-secrets/cloud-secrets-copy' +import { cloudSecretRepoKey } from '@/components/settings/cloud-secrets/cloud-secret-repos' +import { + dismissSecretRequest, + readSecretRequestTouchedAt, + setSecretRequestExpiry, + setSecretRequestLocal, + setSecretRequestTouched, + type SecretRequestEntry +} from '@/lib/secret-requests/secret-request-store' +import { useAgentHostPanelOpener } from '@/lib/agent-host-panel/agent-host-panel-opener' +import { + restartableSecretRequestAgent, + secretRequestAgentName +} from '@/lib/secret-requests/secret-request-routing' +import { getRepoIdFromWorktreeId } from '../../../../shared/worktree/id' +import { + SECRETS_RESOLVE_REQUEST_METHOD, + SECRETS_TOUCH_REQUEST_METHOD, + type SecretRequestScope, + type SecretsResolveRequestResult, + type SecretsTouchRequestResult +} from '../../../../shared/secret-request-contract' +import type { CloudSecretsErrorCode } from '../../../../shared/cloud-secrets/cloud-secrets-wire' +import type { + SecretRequestCardActions, + SecretRequestCardModel, + SecretRequestCardPhase +} from './SecretRequestCard' + +/** D3: while the card has focus or a typed value, keep the request alive, at most once a minute. */ +export const SECRET_REQUEST_TOUCH_INTERVAL_MS = 60_000 +const RPC_TIMEOUT_MS = 15_000 + +/** Failures that mean the request never reached Orca Cloud: nothing changed, so retry is safe. */ +const TRANSPORT_FAILURES: ReadonlySet = new Set([ + 'unavailable', + 'timeout', + 'unknown' +]) + +/** Whether this person can write the workspace repo's scope; asked once per repo per session. */ +const repoWriteCache = new Map>() + +function canWriteRepo(repoKey: string): Promise { + let pending = repoWriteCache.get(repoKey) + if (!pending) { + const api = window.api.cloudSecrets + pending = api + ? api.effective({ repo: repoKey }).then( + (result) => result.ok && result.value.caller.canWrite.repo, + () => false + ) + : Promise.resolve(false) + // A failed read is retried next time rather than cached as "no". + void pending.then((value) => { + if (!value) { + repoWriteCache.delete(repoKey) + } + }) + repoWriteCache.set(repoKey, pending) + } + return pending +} + +export function resetSecretRequestCardCachesForTests(): void { + repoWriteCache.clear() +} + +function useWorkspaceRepoKey(worktreeId: string | null): string | null { + return useAppStore((state) => { + if (!worktreeId) { + return null + } + const repoId = getRepoIdFromWorktreeId(worktreeId) + const repo = state.repos.find((entry) => entry.id === repoId) + return repo ? cloudSecretRepoKey(repo) : null + }) +} + +async function resolveRequest( + environmentId: string, + requestId: string, + outcome: 'provided' | 'declined' +): Promise { + try { + const result = await callRuntimeRpc( + { kind: 'environment', environmentId }, + SECRETS_RESOLVE_REQUEST_METHOD, + { requestId, outcome }, + { timeoutMs: RPC_TIMEOUT_MS } + ) + return result.outcome + } catch { + return null + } +} + +export function useSecretRequestCard(args: { + entry: SecretRequestEntry + more: number + worktreeId: string | null + /** The pane's PTY, for Restart {{agent}}. */ + ptyId: string | null + /** The card sits on the asking agent's own pane; only then can Restart target it. */ + onAskingPane: boolean +}): { model: SecretRequestCardModel; actions: SecretRequestCardActions } { + const { entry, more, worktreeId, ptyId, onAskingPane } = args + const { environmentId, event } = entry + const { requestId } = event + const t = useTranslate() + const [value, setValue] = useState('') + const [scope, setScope] = useState('personal') + const [failed, setFailed] = useState(false) + const [fieldError, setFieldError] = useState(null) + const [focused, setFocused] = useState(false) + const [repoWritable, setRepoWritable] = useState(false) + const [collapsed, setCollapsed] = useState(false) + const repoKey = useWorkspaceRepoKey(event.worktreeId ?? worktreeId) + const openPanel = useAgentHostPanelOpener() + const local = entry.local + + useEffect(() => { + let cancelled = false + if (repoKey) { + void canWriteRepo(repoKey).then((writable) => { + if (!cancelled) { + setRepoWritable(writable) + } + }) + } + return () => { + cancelled = true + } + }, [repoKey]) + + // The card's own clock: an open request past its expiry shows as expired and drops what was typed. + useEffect(() => { + if (local !== null) { + return + } + const remaining = event.expiresAt - Date.now() + const expire = (): void => { + setValue('') + setSecretRequestLocal(environmentId, requestId, 'expired') + } + if (remaining <= 0) { + expire() + return + } + const timer = window.setTimeout(expire, remaining) + return () => window.clearTimeout(timer) + }, [environmentId, requestId, event.expiresAt, local]) + + // D3 hold: touch now (if a minute has passed) and every minute while focused or holding a value. + const holding = (focused || value.length > 0) && local === null + useEffect(() => { + if (!holding) { + return + } + const touch = (): void => { + setSecretRequestTouched(environmentId, requestId, Date.now()) + void callRuntimeRpc( + { kind: 'environment', environmentId }, + SECRETS_TOUCH_REQUEST_METHOD, + { requestId }, + { timeoutMs: RPC_TIMEOUT_MS } + ).then( + (result) => setSecretRequestExpiry(environmentId, requestId, result.expiresAt), + () => {} + ) + } + // Never more than once a minute, across focus changes and card remounts too. + const delay = Math.max( + 0, + readSecretRequestTouchedAt(environmentId, requestId) + + SECRET_REQUEST_TOUCH_INTERVAL_MS - + Date.now() + ) + let interval: number | undefined + const first = window.setTimeout(() => { + touch() + interval = window.setInterval(touch, SECRET_REQUEST_TOUCH_INTERVAL_MS) + }, delay) + return () => { + window.clearTimeout(first) + if (interval !== undefined) { + window.clearInterval(interval) + } + } + }, [holding, environmentId, requestId]) + + const scopes: SecretRequestScope[] = repoKey && repoWritable ? ['personal', 'repo'] : ['personal'] + const effectiveScope: SecretRequestScope = scopes.includes(scope) ? scope : 'personal' + + const add = useCallback(async () => { + const api = window.api.cloudSecrets + if (!value || local !== null) { + return + } + setFailed(false) + setFieldError(null) + if (!api) { + setFailed(true) + return + } + setSecretRequestLocal(environmentId, requestId, 'saving') + const target = + effectiveScope === 'repo' && repoKey + ? { scope: 'repo' as const, repo: repoKey } + : { scope: 'personal' as const } + const result = await api.put({ target, name: event.name, value }).catch(() => null) + if (!result || !result.ok) { + const code: CloudSecretsErrorCode = result?.ok === false ? result.error : 'unknown' + setSecretRequestLocal(environmentId, requestId, null) + if (TRANSPORT_FAILURES.has(code)) { + setFailed(true) + } else { + setFieldError(cloudSecretsErrorCopy(code, t)) + } + return + } + // Saved: the value is gone from the renderer from here on. + setValue('') + void api.refreshEnv({ runtimeEnvironmentId: environmentId }).catch(() => {}) + const outcome = await resolveRequest(environmentId, requestId, 'provided') + // Only a confirmed 'provided' means the agent was told; otherwise say so and let the person tell it. + setSecretRequestLocal( + environmentId, + requestId, + outcome === 'provided' ? 'saved' : 'savedAfterExpiry' + ) + }, [value, local, environmentId, requestId, effectiveScope, repoKey, event.name, t]) + + const phase: SecretRequestCardPhase = + local === 'saving' + ? 'saving' + : local === 'saved' || local === 'savedAfterExpiry' || local === 'expired' + ? local + : failed + ? 'failed' + : 'open' + + const agent = secretRequestAgentName(event.agent) + const restartAgent = restartableSecretRequestAgent(event.agent) + + return { + model: { + agent, + name: event.name, + reason: event.reason ?? null, + suggestedRepo: event.scope === 'repo', + scopes, + scope: effectiveScope, + // An expired request shows no field, and what was typed doesn't come back. + value: local === 'expired' ? '' : value, + phase, + fieldError, + more, + canRestart: restartAgent !== null && ptyId !== null && onAskingPane, + collapsed + }, + actions: { + onValueChange: (next) => { + setValue(next) + setFieldError(null) + }, + onScopeChange: setScope, + onAdd: () => void add(), + onRetry: () => void add(), + onNotNow: () => { + // Mid-save the value may already be stored: never tell the agent "declined" then. + if (local !== null) { + return + } + setValue('') + dismissSecretRequest(environmentId, requestId) + void resolveRequest(environmentId, requestId, 'declined') + }, + onRestart: () => { + if (restartAgent && ptyId) { + useAppStore.getState().queuePaneAccountRestarts([ptyId], restartAgent) + } + dismissSecretRequest(environmentId, requestId) + }, + onDismiss: () => dismissSecretRequest(environmentId, requestId), + onToggleCollapsed: () => setCollapsed((current) => !current), + onDetails: openPanel + ? () => openPanel({ hostId: environmentId, focus: { secret: event.name } }) + : undefined, + onFocusChange: setFocused + } + } +} diff --git a/src/renderer/src/components/cloud-secrets-ask/CloudSecretsAskForm.tsx b/src/renderer/src/components/cloud-secrets-ask/CloudSecretsAskForm.tsx new file mode 100644 index 00000000000..3eb672cbb96 --- /dev/null +++ b/src/renderer/src/components/cloud-secrets-ask/CloudSecretsAskForm.tsx @@ -0,0 +1,374 @@ +import React from 'react' +import { CircleCheck, ClipboardPaste, KeyRound, Loader2 } from 'lucide-react' +import { useTranslate, type Translate } from '@/i18n/use-translate' +import { getIntlLocale } from '@/i18n/i18n' +import { Button } from '@/components/ui/button' +import { InlineError } from '@/components/ui/inline-error' +import { Textarea } from '@/components/ui/textarea' +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue +} from '@/components/ui/select' +import { SecretValueInput } from '@/components/settings/cloud-secrets/SecretValueInput' +import { + cloudSecretScopeLabel, + cloudSecretsErrorCopy +} from '@/components/settings/cloud-secrets/cloud-secrets-copy' +import { cn } from '@/lib/utils' +import type { + CloudSecretScope, + CloudSecretsErrorCode +} from '../../../../shared/cloud-secrets/cloud-secrets-wire' +import { + isTeamAdmin, + parseScope, + writableScopes, + type CloudSecretsAskData +} from './cloud-secrets-ask-model' + +export type CloudSecretsAskPhase = 'editing' | 'saving' | 'failed' | 'saved' | 'skipped' + +export type CloudSecretsAskFormState = { + /** Typed values, by name. Cleared (and the inputs unmounted) once saved. */ + values: Record + scopes: Record + phase: CloudSecretsAskPhase + /** Server refusals for single names. */ + refused: Record + pasteOpen: boolean + pasteSummary: { matched: number; count: number; ignored: number } | null +} + +export const EMPTY_ASK_STATE: CloudSecretsAskFormState = { + values: {}, + scopes: {}, + phase: 'editing', + refused: {}, + pasteOpen: false, + pasteSummary: null +} + +export type CloudSecretsAskFormActions = { + onValueChange: (name: string, value: string) => void + onScopeChange: (name: string, scope: CloudSecretScope) => void + onTogglePaste: () => void + onPaste: (text: string) => void + onSave: () => void + onSkip: () => void +} + +/** "A, B and C", in the UI language. */ +function listNames(names: readonly string[]): string { + try { + return new Intl.ListFormat(getIntlLocale(), { style: 'long', type: 'conjunction' }).format( + names + ) + } catch { + return names.join(', ') + } +} + +function coverageLine(data: CloudSecretsAskData, t: Translate): string { + return t( + 'cloudSecretsAsk.coverage', + 'The {{environment}} environment uses {{total}}. Your team and this repository provide {{covered}}.', + { + environment: data.environmentName, + total: data.total, + covered: data.total - data.missing.length + } + ) +} + +/** "2 secrets missing" heading plus its coverage line (shared by the sheet and the dialog). */ +export function CloudSecretsAskHeading({ + data, + headingId, + action +}: { + data: CloudSecretsAskData + headingId: string + action?: React.ReactNode +}): React.JSX.Element { + const t = useTranslate() + return ( +
    + +
    +

    + {t('cloudSecretsAsk.missing', '{{count}} secrets missing', { + count: data.missing.length, + defaultValue_one: '{{count}} secret missing' + })} +

    +

    {coverageLine(data, t)}

    +
    + {action} +
    + ) +} + +/** + * S2: the environment's declared names this person doesn't get a value for, asked inline. Never + * blocks Open; values go to Orca Cloud in one batch and the inputs unmount after the save. + */ +export function CloudSecretsAskForm({ + data, + state, + actions, + className +}: { + data: CloudSecretsAskData + state: CloudSecretsAskFormState + actions: CloudSecretsAskFormActions + className?: string +}): React.JSX.Element | null { + const t = useTranslate() + const id = React.useId() + const headingId = `${id}-heading` + const admin = isTeamAdmin(data.caller) + const scopes = writableScopes(data.caller, { repo: data.repoKey !== null, shared: true }) + const filled = data.missing.filter((name) => (state.values[name] ?? '').length > 0) + const saving = state.phase === 'saving' + const canSave = filled.length > 0 && !saving + + if (state.phase === 'skipped') { + return ( +
    + +

    + {t('cloudSecretsAsk.skipped', 'Secrets skipped')} + {' · '} + {t('cloudSecretsAsk.skippedDetail', 'Add them later from the workspace’s cloud panel.')} +

    +
    + ) + } + + const savedLine = + state.phase === 'saved' ? ( +
    + +
    +

    + {t('cloudSecretsAsk.saved', 'Secrets saved')} +

    +

    + {t( + 'cloudSecretsAsk.savedDetail', + 'New terminals and agents in this workspace get them within a few seconds.' + )} +

    +
    +
    + ) : null + + // Everything saved: just the confirmation. + if (state.phase === 'saved' && data.missing.length === 0) { + return ( +
    + {savedLine} +
    + ) + } + + const lastName = data.missing.at(-1) + return ( +
    +
    + {savedLine} +
    + + + {t('cloudSecretsAsk.pasteEnv', 'Paste .env')} + + } + /> + {!admin && data.built ? ( +

    + {t( + 'cloudSecretsAsk.buildTeamOnly', + 'The environment build only uses team values. Ask an owner or admin to add {{name}} as team secrets.', + { + name: listNames(data.missing), + count: data.missing.length, + defaultValue_one: + 'The environment build only uses team values. Ask an owner or admin to add {{name}} as a team secret.' + } + )} +

    + ) : null} + {state.pasteOpen ? ( +
    + +