ethagent 1.1.2 → 2.0.0

package/src/identity/hub/flows/continuity/ContinuityDashboardScreen.tsx

@@ -0,0 +1,170 @@
+import React from 'react'
+import { Box, Text } from 'ink'
+import { Surface } from '../../../../ui/Surface.js'
+import { Select } from '../../../../ui/Select.js'
+import { theme } from '../../../../ui/theme.js'
+import type { EthagentConfig, EthagentIdentity } from '../../../../storage/config.js'
+import type { ContinuityWorkingTreeStatus } from '../../../continuity/storage.js'
+import { IdentitySummary } from '../../components/IdentitySummary.js'
+import { changedContinuitySnapshotFiles } from '../../model/continuity.js'
+import { readIdentityStateString } from '../../model/custody.js'
+import { shortCid } from '../../model/format.js'
+
+type PrivateAction = 'soul' | 'memory' | 'skills' | 'export-backup' | 'back'
+type PublicAction = 'edit' | 'back'
+
+interface CommonProps {
+  identity?: EthagentIdentity
+  config?: EthagentConfig
+  workingStatus?: ContinuityWorkingTreeStatus | null
+  ready: boolean
+  notice?: string
+  editorOpened?: boolean
+  footer: React.ReactNode
+  onBack: () => void
+}
+
+const SaveFromHubHint: React.FC<{ workingStatus?: ContinuityWorkingTreeStatus | null }> = ({ workingStatus }) => {
+  const needsBackup = workingStatus?.publishState === 'local-changes'
+    || workingStatus?.publishState === 'not-published'
+    || workingStatus?.publishState === 'verify-needed'
+  if (!needsBackup) return null
+  const files = changedContinuitySnapshotFiles(workingStatus)
+  return (
+    <Box marginTop={1} flexDirection="column">
+      <Text color={theme.accentError} bold>
+        Unsaved changes
+        {files.length > 0 ? `: ${files.join(', ')}` : ''}
+      </Text>
+      <Text color={theme.dim}>Use Save Snapshot Now in the Identity Hub menu, or relaunch ethagent.</Text>
+    </Box>
+  )
+}
+
+export const PrivateContinuityScreen: React.FC<CommonProps & {
+  onOpenSoul: () => void
+  onOpenMemory: () => void
+  onOpenSkills: () => void
+  onExportBackup: () => void
+}> = ({
+  identity,
+  config,
+  workingStatus,
+  ready,
+  notice,
+  editorOpened,
+  footer,
+  onOpenSoul,
+  onOpenMemory,
+  onOpenSkills,
+  onExportBackup,
+  onBack,
+}) => (
+  <Surface title="Soul, Memory, and Skills" subtitle={notice ?? privateSubtitle(ready)} footer={footer}>
+    <IdentitySummary identity={identity} config={config} workingStatus={workingStatus} hideLocalChanges />
+    <PrivateRows identity={identity} ready={ready} />
+    <SaveFromHubHint workingStatus={workingStatus} />
+    {editorOpened && (
+      <Box marginTop={1}>
+        <Text color={theme.accentPeriwinkle}>Save with ctrl+s in your editor</Text>
+      </Box>
+    )}
+    <Box marginTop={1}>
+      <Select<PrivateAction>
+        options={[
+          { value: 'soul', role: 'section', label: 'Private Continuity' },
+          { value: 'soul', label: 'Edit Soul', hint: 'Voice, behavior, and operating preferences', disabled: !ready },
+          { value: 'memory', label: 'Edit Memory', hint: 'Durable owner memory for this agent', disabled: !ready },
+          { value: 'skills', role: 'section', label: 'Public Capabilities' },
+          { value: 'skills', label: 'Edit skills.json', hint: 'Machine-readable capabilities for discovery', disabled: !ready },
+          { value: 'export-backup', role: 'section', label: 'Local Backup' },
+          { value: 'export-backup', label: 'Save Local Backup', hint: 'Bundle SOUL.md, MEMORY.md, skills.json into a zip you can keep anywhere', disabled: !ready },
+          { value: 'back', role: 'section', label: 'Navigation' },
+          { value: 'back', label: 'Back', hint: 'Return to Identity Hub menu', role: 'utility' },
+        ]}
+        hintLayout="inline"
+          onSubmit={choice => {
+            if (choice === 'soul') return onOpenSoul()
+            if (choice === 'memory') return onOpenMemory()
+            if (choice === 'skills') return onOpenSkills()
+            if (choice === 'export-backup') return onExportBackup()
+            return onBack()
+          }}
+        onCancel={onBack}
+      />
+    </Box>
+  </Surface>
+)
+
+export const PublicProfileScreen: React.FC<CommonProps & {
+  onEditProfile: () => void
+}> = ({ identity, config, workingStatus, notice, editorOpened, footer, onEditProfile, onBack }) => {
+  return (
+    <Surface title="Public Profile" subtitle={notice ?? 'Manage the public name, description, icon, and Agent Card.'} footer={footer}>
+      <IdentitySummary identity={identity} config={config} workingStatus={workingStatus} hideLocalChanges />
+      <PublicProfileRows identity={identity} />
+      <SaveFromHubHint workingStatus={workingStatus} />
+      {editorOpened && (
+        <Box marginTop={1}>
+          <Text color={theme.accentPeriwinkle}>Save with ctrl+s in your editor</Text>
+        </Box>
+      )}
+      <Box marginTop={1}>
+        <Select<PublicAction>
+          options={[
+            { value: 'edit', role: 'section', label: 'Profile' },
+            { value: 'edit', label: 'Edit Name, Description, Icon', hint: 'Update public profile fields used in the Agent Card' },
+            { value: 'back', role: 'section', label: 'Navigation' },
+            { value: 'back', label: 'Back', hint: 'Return to Identity Hub menu', role: 'utility' },
+          ]}
+          hintLayout="inline"
+          onSubmit={choice => {
+            if (choice === 'edit') return onEditProfile()
+            return onBack()
+          }}
+          onCancel={onBack}
+        />
+      </Box>
+    </Surface>
+  )
+}
+
+const PrivateRows: React.FC<{ identity?: EthagentIdentity; ready: boolean }> = ({ identity, ready }) => (
+  <Box flexDirection="column" marginTop={1}>
+    <Text>
+      <Text color={theme.dim}>{'Private'.padEnd(13)}</Text>
+      <Text color={ready ? theme.text : theme.dim}>{ready ? 'Local Files Ready' : 'Missing Local Working Files'}</Text>
+    </Text>
+    <Text>
+      <Text color={theme.dim}>{'Snapshot'.padEnd(13)}</Text>
+      <Text color={identity?.backup?.cid ? theme.text : theme.dim}>{identity?.backup?.cid ? shortCid(identity.backup.cid) : 'Not Saved Yet'}</Text>
+    </Text>
+    <Text>
+      <Text color={theme.dim}>{'Skills'.padEnd(13)}</Text>
+      <Text color={identity?.publicSkills?.cid ? theme.text : theme.dim}>{identity?.publicSkills?.cid ? shortCid(identity.publicSkills.cid) : 'Not Saved'}</Text>
+    </Text>
+  </Box>
+)
+
+const PublicProfileRows: React.FC<{ identity?: EthagentIdentity }> = ({ identity }) => (
+  <Box flexDirection="column" marginTop={1}>
+    <Text>
+      <Text color={theme.dim}>{publicProfileLabel('Agent Card')}</Text>
+      <Text color={identity?.publicSkills?.agentCardCid ? theme.text : theme.dim}>{identity?.publicSkills?.agentCardCid ? shortCid(identity.publicSkills.agentCardCid) : 'Not Saved'}</Text>
+    </Text>
+    <Text>
+      <Text color={theme.dim}>{publicProfileLabel('Agent Icon')}</Text>
+      <Text color={readIdentityStateString(identity?.state, 'imageUrl') ? theme.text : theme.dim}>{readIdentityStateString(identity?.state, 'imageUrl') ? 'Attached' : 'Not Attached'}</Text>
+    </Text>
+  </Box>
+)
+
+function publicProfileLabel(label: string): string {
+  return label.padEnd(16)
+}
+
+function privateSubtitle(ready: boolean): string {
+  return ready
+    ? 'Edit local continuity files. Public skills are saved with the same snapshot.'
+    : 'Use "Refetch Latest Snapshot" from the Identity Hub menu to recover files.'
+}

package/src/identity/hub/flows/continuity/RebackupStorageScreen.tsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import { PinataJwtInput } from '../../components/PinataJwtInput.js'
+import type { Step } from '../../identityHubReducer.js'
+
+interface RebackupStorageScreenProps {
+  step: Extract<Step, { kind: 'rebackup-storage' | 'public-profile-storage' }>
+  footer: React.ReactNode
+  title?: string
+  subtitle?: string
+  onSubmit: (input: string) => void
+  onCancel: () => void
+}
+
+export const RebackupStorageScreen: React.FC<RebackupStorageScreenProps> = ({ step, footer, title, subtitle, onSubmit, onCancel }) => {
+  const publicOnly = step.kind === 'public-profile-storage'
+  return (
+    <PinataJwtInput
+      inputKey="rebackup-storage"
+      title={title}
+      subtitle={step.error ?? subtitle ?? (publicOnly
+        ? 'Save a Pinata JWT so ethagent can pin the public profile to IPFS.'
+        : 'Save a Pinata JWT so ethagent can pin encrypted state to IPFS.')}
+      footer={footer}
+      onSubmit={onSubmit}
+      onCancel={onCancel}
+    />
+  )
+}

package/src/identity/hub/{screens → flows/continuity}/RecoveryConfirmScreen.tsx

@@ -1,35 +1,36 @@
 import React from 'react'
 import { Box, Text } from 'ink'
-import { Surface } from '../../../ui/Surface.js'
-import { Select } from '../../../ui/Select.js'
-import { theme } from '../../../ui/theme.js'
-import { localChangeStatusView, type LocalChangeStatusView } from '../identityHubModel.js'
+import { Surface } from '../../../../ui/Surface.js'
+import { Select } from '../../../../ui/Select.js'
+import { theme } from '../../../../ui/theme.js'
+import { localChangeStatusView, type LocalChangeStatusView } from '../../model/continuity.js'
 
-import type { ContinuityWorkingTreeStatus } from '../../continuity/storage.js'
+import type { ContinuityWorkingTreeStatus } from '../../../continuity/storage.js'
 
-export type RecoveryConfirmMode = 'publish' | 'refetch'
+type RecoveryConfirmMode = 'publish' | 'refetch'
 
-type RecoveryConfirmScreenProps = {
+interface RecoveryConfirmScreenProps {
   mode: RecoveryConfirmMode
   workingStatus?: ContinuityWorkingTreeStatus | null
+  pendingPublish?: boolean
   footer: React.ReactNode
   onConfirm: () => void
   onBack: () => void
 }
 
-export const RecoveryConfirmScreen: React.FC<RecoveryConfirmScreenProps> = ({ mode, workingStatus, footer, onConfirm, onBack }) => {
+export const RecoveryConfirmScreen: React.FC<RecoveryConfirmScreenProps> = ({ mode, workingStatus, pendingPublish, footer, onConfirm, onBack }) => {
   const isPublish = mode === 'publish'
   const title = isPublish ? 'Save Snapshot?' : 'Refetch Latest From Chain?'
   const subtitle = isPublish
-    ? 'Saves any local edits to SOUL.md, MEMORY.md, skills.json, and public profile.'
-    : 'This overwrites local files with the on-chain version.'
+    ? 'Saves SOUL.md, MEMORY.md, skills.json, and profile changes.'
+    : 'This overwrites local files with the onchain version.'
 
-  const headlineColor = isPublish ? theme.accentPeach : theme.accentMint
+  const headlineColor = theme.accentPeriwinkle
   const headline = isPublish
-    ? 'Saving updates the on-chain pointer for this agent.'
-    : 'Refetching replaces local SOUL.md, MEMORY.md, and skills.json with what is on chain.'
+    ? 'Saving updates the onchain pointer for this agent.'
+    : 'Refetching replaces SOUL.md, MEMORY.md, and skills.json with what is onchain.'
   const detail = isPublish
-    ? 'Any local edits to SOUL.md, MEMORY.md, skills.json, and public profile become the saved state. The previous snapshot pointer is overwritten.'
+    ? 'Your local continuity files and profile edits become the saved state. The previous snapshot pointer is overwritten.'
     : 'Unsaved local edits will be lost. Use this when local files are missing or out of sync with the latest saved snapshot.'
 
   const localChangeStatus = localChangeStatusView(workingStatus)
@@ -44,22 +45,28 @@ export const RecoveryConfirmScreen: React.FC<RecoveryConfirmScreenProps> = ({ mo
             <SaveSnapshotStatusLine status={localChangeStatus} />
           </Box>
         )}
+        {!isPublish && pendingPublish ? (
+          <Box marginTop={1} flexDirection="column">
+            <Text color={theme.accentError} bold>Local snapshot is ahead of chain.</Text>
+            <Text color={theme.textSubtle}>Local edits have not yet been rotated to the onchain pointer. Refetching discards them and reverts to the last published snapshot.</Text>
+          </Box>
+        ) : null}
         {!isPublish && (
           <Box marginTop={1}>
-            <Text color={theme.accentPeach}>Overwrite your local files?</Text>
+            <Text color={theme.accentPeriwinkle}>Overwrite your local files?</Text>
           </Box>
         )}
       </Box>
       <Box marginTop={1}>
         <Select<'confirm' | 'back'>
           options={[
-            { value: 'confirm', role: 'section', prefix: '--', label: isPublish ? 'Save' : 'Refetch' },
+            { value: 'confirm', role: 'section', label: isPublish ? 'Save' : 'Refetch' },
             {
               value: 'confirm',
               label: isPublish ? 'Yes, Save Snapshot Now' : 'Yes, Refetch From Chain',
               hint: isPublish ? 'Sign and save the encrypted snapshot' : 'Wallet decrypts and overwrites local files',
             },
-            { value: 'back', role: 'section', prefix: '--', label: 'Cancel' },
+            { value: 'back', role: 'section', label: 'Cancel' },
             {
               value: 'back',
               label: 'No, Go Back',
@@ -84,12 +91,14 @@ const SaveSnapshotStatusLine: React.FC<{ status: LocalChangeStatusView }> = ({ s
     return (
       <Text>
         <Text color={theme.textSubtle}>Local changes detected: </Text>
-        <Text color="#e87070" bold>{status.files.length > 0 ? status.files.join(', ') : 'local files differ from saved snapshot'}</Text>
+        <Text color={theme.accentError} bold>{status.files.length > 0 ? status.files.join(', ') : 'local files differ from saved snapshot'}</Text>
       </Text>
     )
   }
 
-  const color = status.tone === 'ok' ? theme.accentMint : status.tone === 'warn' ? theme.accentPeach : theme.dim
+  if (!status.detail) return null
+
+  const color = status.tone === 'ok' || status.tone === 'warn' ? theme.accentPeriwinkle : theme.dim
   const label = status.detail === 'None detected' ? 'No local changes detected.' : status.detail
   return <Text color={color}>{label}</Text>
 }

package/src/identity/hub/flows/continuity/SavePromptScreen.tsx

@@ -0,0 +1,49 @@
+import React from 'react'
+import { Box, Text } from 'ink'
+import { Surface } from '../../../../ui/Surface.js'
+import { Select } from '../../../../ui/Select.js'
+import { theme } from '../../../../ui/theme.js'
+import type { ContinuityWorkingTreeStatus } from '../../../continuity/storage.js'
+import { changedContinuitySnapshotFiles } from '../../model/continuity.js'
+
+type SavePromptAction = 'save-now' | 'later'
+
+interface SavePromptScreenProps {
+  workingStatus?: ContinuityWorkingTreeStatus | null
+  footer: React.ReactNode
+  onSelect: (action: SavePromptAction) => void
+  onCancel: () => void
+}
+
+export const SavePromptScreen: React.FC<SavePromptScreenProps> = ({ workingStatus, footer, onSelect, onCancel }) => {
+  const files = changedContinuitySnapshotFiles(workingStatus)
+
+  return (
+    <Surface
+      title="Save your identity changes?"
+      subtitle="Unsaved local edits since the last snapshot."
+      footer={footer}
+      tone="primary"
+    >
+      <Box flexDirection="column">
+        {files.length > 0 ? (
+          <Text color={theme.textSubtle}>Changed: <Text color={theme.accentError} bold>{files.join(', ')}</Text></Text>
+        ) : (
+          <Text color={theme.accentPeriwinkle}>Local files differ from the saved snapshot.</Text>
+        )}
+      </Box>
+      <Box marginTop={1}>
+        <Select<SavePromptAction>
+          options={[
+            { value: 'save-now', role: 'section', label: 'Save' },
+            { value: 'save-now', label: 'Save now', hint: 'Sign once and save the encrypted snapshot' },
+            { value: 'later', label: 'Not now', hint: 'Ask again on the next ethagent launch', role: 'utility' },
+          ]}
+          hintLayout="inline"
+          onSubmit={onSelect}
+          onCancel={onCancel}
+        />
+      </Box>
+    </Surface>
+  )
+}

package/src/identity/hub/{screens → flows/create}/CreateFlow.tsx

@@ -1,34 +1,18 @@
 import React from 'react'
 import { Box, Text } from 'ink'
-import { Surface } from '../../../ui/Surface.js'
-import { Select } from '../../../ui/Select.js'
-import { TextInput } from '../../../ui/TextInput.js'
-import { theme } from '../../../ui/theme.js'
-import { extractPinataJwt } from '../../storage/ipfs.js'
-import { normalizeErc8004RegistryConfig } from '../../registry/erc8004.js'
-import { networkLabel } from '../identityHubModel.js'
-import type { Step } from '../identityHubReducer.js'
-import { createStepNumber, CREATE_STEP_LABELS } from '../identityHubReducer.js'
-import { WalletApprovalScreen } from './WalletApprovalScreen.js'
-import { BusyScreen } from './BusyScreen.js'
-import type { BrowserWalletReady } from '../../wallet/browserWallet.js'
-
-const PINATA_API_KEYS_URL = 'https://app.pinata.cloud/developers/api-keys'
-
-type StepIndicatorProps = {
-  steps: string[]
-  current: number
-}
-
-const StepIndicator: React.FC<StepIndicatorProps> = ({ steps, current }) => {
-  const parts = steps.map((step, index) => {
-    const n = index + 1
-    const active = n === current
-    const done = n < current
-    return `${done ? 'done' : n}. ${step}${active ? ' <' : ''}`
-  })
-  return <Text color={theme.dim}>{parts.join('  ·  ')}</Text>
-}
+import { Surface } from '../../../../ui/Surface.js'
+import { Select } from '../../../../ui/Select.js'
+import { TextInput } from '../../../../ui/TextInput.js'
+import { theme } from '../../../../ui/theme.js'
+import { normalizeErc8004RegistryConfig } from '../../../registry/erc8004.js'
+import { networkLabel } from '../../model/network.js'
+import type { Step } from '../../identityHubReducer.js'
+import { createStepNumber, CREATE_STEP_LABELS } from '../../identityHubReducer.js'
+import { WalletApprovalScreen } from '../../components/WalletApprovalScreen.js'
+import { BusyScreen } from '../../components/BusyScreen.js'
+import { FlowTimeline } from '../../components/FlowTimeline.js'
+import { PinataJwtInput } from '../../components/PinataJwtInput.js'
+import type { BrowserWalletReady } from '../../../wallet/browserWallet.js'
 
 type CreateFlowProps = {
   step: Extract<Step, {
@@ -36,6 +20,7 @@ type CreateFlowProps = {
       | 'replace-confirm'
       | 'create-name'
       | 'create-description'
+      | 'create-custody'
       | 'create-preflight'
       | 'create-registry'
       | 'create-signing'
@@ -45,9 +30,9 @@ type CreateFlowProps = {
   onSetStep: (step: Step) => void
   onNameSubmit: (name: string) => void
   onDescriptionSubmit: (name: string, description: string) => void
+  onCustodySubmit: (custodyMode: 'simple' | 'advanced') => void
   onRegistrySubmit: (value: string) => void
   onStorageSubmit: (input: string) => void
-  onStorageError: (error: string) => void
   onBack: () => void
   onMenu: () => void
 }
@@ -58,6 +43,7 @@ export const CreateFlow: React.FC<CreateFlowProps> = ({
   onSetStep,
   onNameSubmit,
   onDescriptionSubmit,
+  onCustodySubmit,
   onRegistrySubmit,
   onStorageSubmit,
   onBack,
@@ -65,7 +51,7 @@ export const CreateFlow: React.FC<CreateFlowProps> = ({
 }) => {
   const stepNum = createStepNumber(step)
   const indicator = stepNum > 0
-    ? <StepIndicator steps={CREATE_STEP_LABELS} current={stepNum} />
+    ? <FlowTimeline steps={[...CREATE_STEP_LABELS]} current={stepNum} />
     : null
 
   if (step.kind === 'replace-confirm') {
@@ -81,9 +67,9 @@ export const CreateFlow: React.FC<CreateFlowProps> = ({
         </Box>
         <Select<'replace' | 'back'>
           options={[
-            { value: 'back', role: 'section', prefix: '--', label: 'Current Identity' },
+            { value: 'back', role: 'section', label: 'Current Identity' },
             { value: 'back', label: 'Keep Current Agent', hint: 'Return without minting anything', role: 'utility' },
-            { value: 'replace', role: 'section', prefix: '--', label: 'New Identity' },
+            { value: 'replace', role: 'section', label: 'New Identity' },
             { value: 'replace', label: 'Mint and Use New Agent', hint: 'Create separate token and make it active' },
           ]}
           hintLayout="inline"
@@ -100,9 +86,10 @@ export const CreateFlow: React.FC<CreateFlowProps> = ({
   if (step.kind === 'create-name') {
     return (
       <Surface title="Name Your Agent" subtitle={indicator} footer="enter continues · esc back">
-        {step.error ? <Text color="#e87070">{step.error}</Text> : null}
+        {step.error ? <Text color={theme.accentError}>{step.error}</Text> : null}
         <TextInput
           key="agent-name"
+          initialValue={step.name ?? ''}
           placeholder="agent name"
           validate={value => value.trim().length >= 2 ? null : 'name must be at least 2 characters'}
           onSubmit={name => onNameSubmit(name.trim())}
@@ -114,11 +101,14 @@ export const CreateFlow: React.FC<CreateFlowProps> = ({
 
   if (step.kind === 'create-description') {
     return (
-      <Surface title="Describe Your Agent" subtitle={indicator} footer="enter continues · esc back">
+      <Surface title="Describe Your Agent" subtitle={indicator} footer="enter next · shift+enter newline · esc back">
         <Text color={theme.dim}>Optional. One short sentence is enough.</Text>
         <TextInput
           key="agent-description"
+          initialValue={step.description ?? ''}
           placeholder="description"
+          allowEmpty
+          multiline
           onSubmit={description => onDescriptionSubmit(step.name, description.trim())}
           onCancel={onBack}
         />
@@ -126,6 +116,28 @@ export const CreateFlow: React.FC<CreateFlowProps> = ({
     )
   }
 
+  if (step.kind === 'create-custody') {
+    return (
+      <Surface title="Pick Custody Mode" subtitle={indicator} footer="enter continues · esc back">
+        <Box flexDirection="column" marginBottom={1}>
+          <Text color={theme.dim}>Custody decides who controls the ERC-8004 token and who can rotate the URI pointer.</Text>
+          <Text color={theme.dim}>You can switch later from Identity Hub.</Text>
+        </Box>
+        <Select<'simple' | 'advanced'>
+          options={[
+            { value: 'simple', role: 'section', label: 'Simple (Recommended)' },
+            { value: 'simple', label: 'Simple', hint: 'One wallet owns the token, signs every save, and rotates the URI directly' },
+            { value: 'advanced', role: 'section', label: 'Advanced' },
+            { value: 'advanced', label: 'Advanced', hint: 'Operator delegation vault holds the token; owner wallet controls vault, operator wallets get URI-rotation permission' },
+          ]}
+          hintLayout="inline"
+          onSubmit={onCustodySubmit}
+          onCancel={onBack}
+        />
+      </Surface>
+    )
+  }
+
   if (step.kind === 'create-preflight') {
     return (
       <BusyScreen
@@ -164,43 +176,30 @@ export const CreateFlow: React.FC<CreateFlowProps> = ({
   }
 
   if (step.kind === 'create-signing') {
+    const isAdvanced = step.custodyMode === 'advanced'
     return (
       <WalletApprovalScreen
-        title="Approve in Wallet"
-        subtitle="One browser flow signs, saves the IPFS backup, and submits the token transaction."
+        title={isAdvanced ? 'Connect Owner Wallet' : 'Sign in Wallet'}
+        subtitle={
+          isAdvanced
+            ? 'This wallet will own the agent token and control the delegation vault. Operator wallets are configured after minting.'
+            : 'One browser flow signs, saves the IPFS backup, and submits the token transaction.'
+        }
         walletSession={walletSession}
-        label="waiting for wallet approval..."
+        label={isAdvanced ? 'waiting for owner wallet...' : 'waiting for wallet signature...'}
         onCancel={onBack}
       />
     )
   }
 
   return (
-    <Surface
+    <PinataJwtInput
+      inputKey="create-storage"
       title="Connect IPFS Storage"
-      subtitle={step.error ?? 'Save a Pinata JWT so ethagent can pin encrypted state to IPFS.'}
+      subtitle={step.error ?? undefined}
       footer="enter continues · esc back"
-    >
-      <Text>
-        <Text color={theme.dim}>Paste your Pinata JWT. Get one at </Text>
-        <Text color={theme.accentPrimary} underline>{PINATA_API_KEYS_URL}</Text>
-      </Text>
-      <Text color={theme.dim}>Saved encrypted on this device · used only for IPFS pinning</Text>
-      <TextInput
-        key="create-storage"
-        isSecret
-        placeholder="Pinata JWT"
-        validate={v => {
-          try {
-            extractPinataJwt(v)
-            return null
-          } catch (err: unknown) {
-            return (err as Error).message
-          }
-        }}
-        onSubmit={onStorageSubmit}
-        onCancel={onBack}
-      />
-    </Surface>
+      onSubmit={onStorageSubmit}
+      onCancel={onBack}
+    />
   )
 }