ethagent 0.2.1 → 1.0.0

package/src/identity/hub/screens/CreateFlow.tsx

@@ -0,0 +1,206 @@
+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>
+}
+
+type CreateFlowProps = {
+  step: Extract<Step, {
+    kind:
+      | 'replace-confirm'
+      | 'create-name'
+      | 'create-description'
+      | 'create-preflight'
+      | 'create-registry'
+      | 'create-signing'
+      | 'create-storage'
+  }>
+  walletSession: BrowserWalletReady | null
+  onSetStep: (step: Step) => void
+  onNameSubmit: (name: string) => void
+  onDescriptionSubmit: (name: string, description: string) => void
+  onRegistrySubmit: (value: string) => void
+  onStorageSubmit: (input: string) => void
+  onStorageError: (error: string) => void
+  onBack: () => void
+  onMenu: () => void
+}
+
+export const CreateFlow: React.FC<CreateFlowProps> = ({
+  step,
+  walletSession,
+  onSetStep,
+  onNameSubmit,
+  onDescriptionSubmit,
+  onRegistrySubmit,
+  onStorageSubmit,
+  onBack,
+  onMenu,
+}) => {
+  const stepNum = createStepNumber(step)
+  const indicator = stepNum > 0
+    ? <StepIndicator steps={CREATE_STEP_LABELS} current={stepNum} />
+    : null
+
+  if (step.kind === 'replace-confirm') {
+    return (
+      <Surface title="Create a New Agent?" footer="enter selects · esc back">
+        <Box flexDirection="column" marginBottom={1}>
+          <Text color={theme.dim}>
+            Your current agent stays in your wallet and remains loadable.
+          </Text>
+          <Text color={theme.dim}>
+            This mints a new agent to this wallet and uses it on this machine.
+          </Text>
+        </Box>
+        <Select<'replace' | 'back'>
+          options={[
+            { value: 'back', role: 'section', prefix: '--', 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', label: 'mint and use new agent', hint: 'create separate token and make it active' },
+          ]}
+          hintLayout="inline"
+          onSubmit={choice => {
+            if (choice === 'back') return onMenu()
+            return onSetStep({ kind: 'create-name' })
+          }}
+          onCancel={onBack}
+        />
+      </Surface>
+    )
+  }
+
+  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}
+        <TextInput
+          key="agent-name"
+          placeholder="agent name"
+          validate={value => value.trim().length >= 2 ? null : 'name must be at least 2 characters'}
+          onSubmit={name => onNameSubmit(name.trim())}
+          onCancel={onBack}
+        />
+      </Surface>
+    )
+  }
+
+  if (step.kind === 'create-description') {
+    return (
+      <Surface title="Describe Your Agent" subtitle={indicator} footer="enter continues · esc back">
+        <Text color={theme.dim}>Optional. One short sentence is enough.</Text>
+        <TextInput
+          key="agent-description"
+          placeholder="description"
+          onSubmit={description => onDescriptionSubmit(step.name, description.trim())}
+          onCancel={onBack}
+        />
+      </Surface>
+    )
+  }
+
+  if (step.kind === 'create-preflight') {
+    return (
+      <BusyScreen
+        title="Getting Ready"
+        subtitle={indicator}
+        label="checking IPFS storage and chain..."
+        onCancel={onBack}
+      />
+    )
+  }
+
+  if (step.kind === 'create-registry') {
+    return (
+      <Surface
+        title={`${step.resolution.network ? networkLabel(step.resolution.network).charAt(0).toUpperCase() + networkLabel(step.resolution.network).slice(1) : ''} Agent Registry`}
+        subtitle={step.error ?? 'Paste the agent registry address for this network.'}
+        footer="enter continues · esc back"
+      >
+        <Text color={theme.dim}>RPC defaults to {step.resolution.defaultRpcUrl}</Text>
+        <TextInput
+          key={`create-registry-${step.resolution.network}`}
+          placeholder="0x registry address"
+          validate={value => {
+            try {
+              normalizeErc8004RegistryConfig({ chainId: step.resolution.chainId, identityRegistryAddress: value.trim() })
+              return null
+            } catch (err: unknown) {
+              return (err as Error).message
+            }
+          }}
+          onSubmit={onRegistrySubmit}
+          onCancel={onBack}
+        />
+      </Surface>
+    )
+  }
+
+  if (step.kind === 'create-signing') {
+    return (
+      <WalletApprovalScreen
+        title="Approve in Wallet"
+        subtitle="One browser flow signs, saves the IPFS backup, and submits the token transaction."
+        walletSession={walletSession}
+        label="waiting for wallet approval..."
+        onCancel={onBack}
+      />
+    )
+  }
+
+  return (
+    <Surface
+      title="Connect IPFS Storage"
+      subtitle={step.error ?? 'Save a Pinata JWT so ethagent can pin encrypted state to IPFS.'}
+      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>
+  )
+}

package/src/identity/hub/screens/DetailsScreen.tsx

@@ -0,0 +1,64 @@
+import React from 'react'
+import { Box } from 'ink'
+import { Surface } from '../../../ui/Surface.js'
+import { Select, type SelectOption } from '../../../ui/Select.js'
+import type { EthagentConfig, EthagentIdentity } from '../../../storage/config.js'
+import { copyableIdentityFields } from '../identityHubModel.js'
+import { IdentitySummary } from './IdentitySummary.js'
+
+type CopyAction = `copy:${string}` | 'back'
+
+type DetailsScreenProps = {
+  identity?: EthagentIdentity
+  config?: EthagentConfig
+  copyNotice?: string | null
+  footer: React.ReactNode
+  onCopy: (label: string, value: string) => void
+  onBack: () => void
+}
+
+export const DetailsScreen: React.FC<DetailsScreenProps> = ({
+  identity,
+  config,
+  copyNotice,
+  footer,
+  onCopy,
+  onBack,
+}) => {
+  const copyable = copyableIdentityFields(identity)
+  const options: Array<SelectOption<CopyAction>> = [
+    ...(copyable.length > 0 ? [{ value: 'back' as const, role: 'section' as const, prefix: '--', label: 'Values' }] : []),
+    ...copyable.map(field => ({
+      value: `copy:${field.label}` as const,
+      label: field.label,
+      hint: shortPreview(field.value),
+    })),
+    ...(copyable.length === 0 ? [{ value: 'back' as const, role: 'notice' as const, label: 'no values available yet' }] : []),
+    { value: 'back', role: 'section', prefix: '--', label: 'Navigation' },
+    { value: 'back', label: 'back to identity hub', hint: 'return without copying', role: 'utility' },
+  ]
+
+  return (
+    <Surface title="Copy Identity Values" subtitle={copyNotice ?? 'Choose one value to copy.'} footer={footer}>
+      <IdentitySummary identity={identity} config={config} compact />
+      <Box marginTop={1}>
+        <Select<CopyAction>
+          options={options}
+          hintLayout="inline"
+          onSubmit={choice => {
+            if (choice === 'back') return onBack()
+            const label = choice.slice('copy:'.length)
+            const found = copyable.find(field => field.label === label)
+            if (found) onCopy(found.label, found.value)
+          }}
+          onCancel={onBack}
+        />
+      </Box>
+    </Surface>
+  )
+}
+
+function shortPreview(value: string): string {
+  if (value.length <= 42) return value
+  return `${value.slice(0, 18)}...${value.slice(-14)}`
+}

package/src/identity/hub/screens/EditProfileFlow.tsx

@@ -0,0 +1,145 @@
+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 type { Step } from '../identityHubReducer.js'
+
+type EditProfileFlowProps = {
+  step: Extract<Step, { kind: 'edit-profile-name' | 'edit-profile-description' | 'edit-profile-image' }>
+  onNameSubmit: (name: string) => void
+  onDescriptionSubmit: (description: string) => void
+  onImageSubmit: (imagePath: string) => void
+  onImagePick: () => void
+  onBack: () => void
+  onMenu: () => void
+}
+
+const footerHint = (hint: string) => <Text color={theme.dim}>{hint}</Text>
+
+export const EditProfileFlow: React.FC<EditProfileFlowProps> = ({
+  step,
+  onNameSubmit,
+  onDescriptionSubmit,
+  onImageSubmit,
+  onImagePick,
+  onBack,
+  onMenu,
+}) => {
+  const [manualImagePath, setManualImagePath] = React.useState(false)
+
+  if (step.kind === 'edit-profile-name') {
+    const currentName = readStateString(step.identity.state, 'name')
+    return (
+      <Surface
+        title="Rename Agent Identity"
+        subtitle="This updates public token metadata and the Agent Card."
+        footer={footerHint('enter continues · esc back')}
+      >
+        <Text color={theme.dim}>Currently: {currentName || '(unnamed)'}</Text>
+        <TextInput
+          key="edit-profile-name"
+          initialValue={currentName}
+          placeholder="agent name"
+          validate={value => value.trim().length >= 2 ? null : 'name must be at least 2 characters'}
+          onSubmit={value => onNameSubmit(value.trim())}
+          onCancel={onMenu}
+        />
+      </Surface>
+    )
+  }
+
+  if (step.kind === 'edit-profile-image') {
+    const currentImage = readStateString(step.identity.state, 'imageUrl')
+    if (!manualImagePath) {
+      return (
+        <Surface
+          title="Upload Agent Image"
+          subtitle="Choose a local image. ethagent uploads it to IPFS and attaches it to token metadata."
+          footer={footerHint('enter select · esc back')}
+        >
+          <Box flexDirection="column">
+            <Text color={theme.dim}>Current: {currentImage || '(no image)'}</Text>
+            {step.error ? <Text color="#e87070">{step.error}</Text> : null}
+          </Box>
+          <Box marginTop={1}>
+            <Select<'choose' | 'manual' | 'skip' | 'delete' | 'back'>
+              options={[
+                { value: 'choose', role: 'section', prefix: '--', label: 'Image' },
+                { value: 'choose', label: 'choose image file', hint: 'open the operating system file picker' },
+                { value: 'manual', label: 'enter path manually', hint: 'fallback if a file picker is unavailable' },
+                ...(currentImage ? [{ value: 'delete' as const, label: 'delete current image', hint: 'remove the attached image from public profile' }] : []),
+                { value: 'skip', label: currentImage ? 'keep current image' : 'no image', hint: 'publish without changing the image' },
+                { value: 'back', role: 'section', prefix: '--', label: 'Navigation' },
+                { value: 'back', label: 'back', hint: 'return to description', role: 'utility' },
+              ]}
+              hintLayout="inline"
+              onSubmit={choice => {
+                if (choice === 'choose') return onImagePick()
+                if (choice === 'manual') return setManualImagePath(true)
+                if (choice === 'delete') return onImageSubmit('delete')
+                if (choice === 'skip') return onImageSubmit('')
+                return onBack()
+              }}
+              onCancel={onBack}
+            />
+          </Box>
+        </Surface>
+      )
+    }
+    return (
+      <Surface
+        title="Enter Image Path"
+        subtitle="Fallback path entry. URLs are rejected because ethagent uploads the local file itself."
+        footer={footerHint('enter saves · esc back')}
+      >
+        <Text color={theme.dim}>Current: {currentImage || '(no image)'}</Text>
+        <TextInput
+          key="edit-profile-image"
+          placeholder="local image path"
+          allowEmpty
+          validate={value => validateImagePath(value)}
+          onSubmit={value => onImageSubmit(value.trim())}
+          onCancel={() => setManualImagePath(false)}
+        />
+      </Surface>
+    )
+  }
+
+  const currentDescription = readStateString(step.identity.state, 'description')
+  return (
+    <Surface
+      title="Describe Agent Identity"
+      subtitle="This updates public token metadata and the Agent Card."
+      footer={footerHint('enter continues · esc back')}
+    >
+      <Text color={theme.dim}>Currently: {currentDescription || '(no description)'}</Text>
+      <TextInput
+        key="edit-profile-description"
+        initialValue={currentDescription}
+        placeholder="description"
+        allowEmpty
+        onSubmit={value => onDescriptionSubmit(value.trim())}
+        onCancel={onBack}
+      />
+    </Surface>
+  )
+}
+
+function validateImagePath(value: string): string | null {
+  const trimmed = value.trim()
+  if (!trimmed) return null
+  if (/^https?:\/\//i.test(trimmed) || /^ipfs:\/\//i.test(trimmed)) {
+    return 'enter a local image file path; ethagent will upload it to IPFS'
+  }
+  if (!/\.(png|jpe?g|gif|webp|svg)$/i.test(trimmed)) {
+    return 'image must be png, jpg, gif, webp, or svg'
+  }
+  return null
+}
+
+function readStateString(state: Record<string, unknown> | undefined, key: string): string {
+  const value = state?.[key]
+  return typeof value === 'string' ? value : ''
+}

package/src/identity/hub/screens/ErrorScreen.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import { Text } from 'ink'
+import { Surface } from '../../../ui/Surface.js'
+import { Select } from '../../../ui/Select.js'
+import { theme } from '../../../ui/theme.js'
+import type { IdentityHubErrorView } from '../identityHubModel.js'
+import type { Step } from '../identityHubReducer.js'
+
+type ErrorScreenProps = {
+  error: IdentityHubErrorView
+  back: Step
+  footer: React.ReactNode
+  onBack: (back: Step) => void
+  onClose: () => void
+}
+
+export const ErrorScreen: React.FC<ErrorScreenProps> = ({ error, back, footer, onBack, onClose }) => (
+  <Surface title={error.title} tone="error" subtitle={error.detail} footer={footer}>
+    {error.hint ? <Text color={theme.dim}>{error.hint}</Text> : null}
+    <Select<'back' | 'close'>
+      options={[
+        { value: 'back', role: 'section', prefix: '--', label: 'Recovery' },
+        { value: 'back', label: 'go back', hint: 'return to the previous identity step' },
+        { value: 'close', role: 'section', prefix: '--', label: 'Exit' },
+        { value: 'close', label: 'close hub', hint: 'return to the chat without retrying', role: 'utility' },
+      ]}
+      hintLayout="inline"
+      onSubmit={choice => {
+        if (choice === 'back') onBack(back)
+        else onClose()
+      }}
+      onCancel={() => onBack(back)}
+    />
+  </Surface>
+)

package/src/identity/hub/screens/IdentitySummary.tsx

@@ -0,0 +1,70 @@
+import React from 'react'
+import { Box, Text } from 'ink'
+import { theme } from '../../../ui/theme.js'
+import type { EthagentConfig, EthagentIdentity } from '../../../storage/config.js'
+import { identitySummaryRows, lastBackupLabel } from '../identityHubModel.js'
+
+import type { ContinuityWorkingTreeStatus } from '../../continuity/storage.js'
+
+export const IdentitySummary: React.FC<{
+  identity?: EthagentIdentity
+  config?: EthagentConfig
+  workingStatus?: ContinuityWorkingTreeStatus | null
+  compact?: boolean
+}> = ({ identity, config, workingStatus, compact = false }) => {
+  if (!identity) {
+    return (
+      <Text color={theme.dim}>no agent yet. create or load one.</Text>
+    )
+  }
+
+  const rows = identitySummaryRows(identity, config)
+  const lastBackup = lastBackupLabel(identity)
+  const stateName = typeof (identity.state as Record<string, unknown> | undefined)?.name === 'string'
+    ? ((identity.state as Record<string, unknown>).name as string).trim()
+    : ''
+
+  const row = (label: string) => rows.find(item => item.label === label)
+  
+  const needsBackup = workingStatus?.publishState === 'local-changes' || workingStatus?.publishState === 'not-published' || workingStatus?.publishState === 'verify-needed'
+  let changedFiles: string[] = []
+  if (needsBackup) {
+    if (workingStatus?.localContentHashes && workingStatus?.publishedContentHashes) {
+      if (workingStatus.localContentHashes['SOUL.md'] !== workingStatus.publishedContentHashes['SOUL.md']) changedFiles.push('SOUL.md')
+      if (workingStatus.localContentHashes['MEMORY.md'] !== workingStatus.publishedContentHashes['MEMORY.md']) changedFiles.push('MEMORY.md')
+      if (workingStatus.localContentHashes['skills.json'] !== workingStatus.publishedContentHashes['skills.json']) changedFiles.push('skills.json')
+    } else {
+      changedFiles = ['SOUL.md', 'MEMORY.md', 'skills.json']
+    }
+  }
+
+  const lastSavedRow = needsBackup
+    ? { label: 'unsaved', value: changedFiles.length > 0 ? changedFiles.join(', ') : 'markdown files', tone: 'warn' as const, highlight: true }
+    : { label: 'last saved', value: lastBackup, tone: lastBackup === 'never' ? 'dim' as const : 'ok' as const }
+
+  const summaryRows = [
+    { label: 'token', value: row('token')?.value ?? 'not created', tone: row('token')?.tone ?? 'dim', highlight: true },
+    { label: 'network', value: row('network')?.value ?? 'unknown', tone: row('network')?.tone ?? 'dim' },
+    { label: 'owner', value: row('owner')?.value ?? 'not connected', tone: row('owner')?.tone ?? 'dim' },
+    { label: 'snapshot', value: row('state')?.value ?? 'not saved yet', tone: row('state')?.tone ?? 'dim', highlight: true },
+    lastSavedRow,
+    { label: 'skills', value: row('skills')?.value ?? 'not published', tone: row('skills')?.tone ?? 'dim' },
+    { label: 'agent card', value: row('card')?.value ?? 'not published', tone: row('card')?.tone ?? 'dim' },
+    { label: 'image', value: row('image')?.value ?? 'not attached', tone: row('image')?.tone ?? 'dim' },
+  ]
+
+  return (
+    <Box flexDirection="column">
+      <Text color={theme.accentPrimary} bold>{stateName || 'active agent'}</Text>
+      {summaryRows.map(row => {
+        const valueColor = row.tone === 'warn' ? 'red' : (row.tone === 'ok' ? theme.text : theme.dim)
+        return (
+          <Text key={row.label}>
+            <Text color={theme.dim}>{row.label.padEnd(12)}</Text>
+            <Text color={valueColor} bold={row.highlight}>{row.value}</Text>
+          </Text>
+        )
+      })}
+    </Box>
+  )
+}

package/src/identity/hub/screens/MenuScreen.tsx

@@ -0,0 +1,117 @@
+import React from 'react'
+import { Box } from 'ink'
+import { Surface } from '../../../ui/Surface.js'
+import { Select, type SelectOption } from '../../../ui/Select.js'
+import type { EthagentConfig, EthagentIdentity } from '../../../storage/config.js'
+import type { ContinuityWorkingTreeStatus } from '../../continuity/storage.js'
+import { IdentitySummary } from './IdentitySummary.js'
+
+type MenuScreenProps = {
+  mode: 'first-run' | 'manage'
+  config?: EthagentConfig
+  identity?: EthagentIdentity
+  workingStatus?: ContinuityWorkingTreeStatus | null
+  canRebackup: boolean
+  footer: React.ReactNode
+  onCreate: () => void
+  onLoad: () => void
+  onBackupNow: () => void
+  onRefetchLatest: () => void
+  onPublicProfile: () => void
+  onPrivateMemory: () => void
+  onCopyValues: () => void
+  onStorageCredential: () => void
+  onSkip: () => void
+  onCancel: () => void
+}
+
+type Action =
+  | 'public-profile'
+  | 'private-memory'
+  | 'backup'
+  | 'refetch'
+  | 'copy'
+  | 'storage-credential'
+  | 'create'
+  | 'load'
+  | 'skip'
+  | 'cancel'
+
+export const MenuScreen: React.FC<MenuScreenProps> = ({
+  mode,
+  config,
+  identity,
+  workingStatus,
+  canRebackup,
+  footer,
+  onCreate,
+  onLoad,
+  onBackupNow,
+  onRefetchLatest,
+  onPublicProfile,
+  onPrivateMemory,
+  onCopyValues,
+  onStorageCredential,
+  onSkip,
+  onCancel,
+}) => {
+  const title = mode === 'first-run' ? 'Set Up Agent Identity' : 'Agent Identity'
+  const subtitle = mode === 'first-run'
+    ? 'Create a portable agent or load one you already own.'
+    : 'Public, private, recovery, storage, and device controls are separate.'
+
+  const canRefetch = Boolean(canRebackup && identity?.backup?.cid)
+
+  const options: Array<SelectOption<Action>> = identity
+    ? [
+        { value: 'public-profile', role: 'section', prefix: '--', label: 'Public metadata' },
+        { value: 'public-profile', label: 'public profile', hint: 'name, image, skills.json, agent card' },
+        { value: 'private-memory', role: 'section', prefix: '--', label: 'Private local files' },
+        { value: 'private-memory', label: 'memory and persona', hint: 'SOUL.md and MEMORY.md only on this device' },
+        { value: 'backup', role: 'section', prefix: '--', label: 'Recovery' },
+        { value: 'backup', label: 'publish snapshot now', hint: 'encrypts and publishes local SOUL.md and MEMORY.md changes', disabled: !canRebackup },
+        { value: 'refetch', label: 'refetch latest snapshot', hint: 'restore local files from the latest published snapshot', disabled: !canRefetch },
+        { value: 'storage-credential', role: 'section', prefix: '--', label: 'Storage' },
+        { value: 'storage-credential', label: 'IPFS credential', hint: 'save, replace, or forget Pinata JWT' },
+        { value: 'copy', role: 'section', prefix: '--', label: 'Agent token' },
+        { value: 'copy', label: 'copy values', hint: 'copy CIDs, token id, URI, or owner' },
+        { value: 'load', label: 'switch agent', hint: 'load a different token owned by your wallet' },
+        { value: 'create', label: 'new agent', hint: 'mint another token and make it active here' },
+        { value: 'cancel', role: 'section', prefix: '--', label: 'Exit' },
+        { value: 'cancel', label: 'close hub', hint: 'return to the chat without changing identity', role: 'utility' },
+      ]
+    : [
+        { value: 'create', role: 'section', prefix: '--', label: 'Setup' },
+        { value: 'create', label: 'create new agent', hint: 'mint a wallet-owned token for this machine' },
+        { value: 'load', label: 'load existing agent', hint: 'find an agent token your wallet already owns' },
+        { value: 'skip', role: 'section', prefix: '--', label: 'Exit' },
+        ...(mode === 'first-run'
+          ? [{ value: 'skip' as Action, label: 'skip for now', hint: 'continue now; use /identity later', role: 'utility' as const }]
+          : [{ value: 'cancel' as Action, label: 'close hub', hint: 'return to the chat without changing identity', role: 'utility' as const }]),
+      ]
+
+  return (
+    <Surface title={title} subtitle={subtitle} footer={footer}>
+      <IdentitySummary identity={identity} config={config} workingStatus={workingStatus} compact={Boolean(identity)} />
+      <Box marginTop={1}>
+        <Select<Action>
+          options={options}
+          hintLayout="inline"
+          onSubmit={choice => {
+            if (choice === 'skip') return onSkip()
+            if (choice === 'cancel') return onCancel()
+            if (choice === 'public-profile') return onPublicProfile()
+            if (choice === 'private-memory') return onPrivateMemory()
+            if (choice === 'backup') return onBackupNow()
+            if (choice === 'refetch') return onRefetchLatest()
+            if (choice === 'copy') return onCopyValues()
+            if (choice === 'storage-credential') return onStorageCredential()
+            if (choice === 'load') return onLoad()
+            if (choice === 'create') return onCreate()
+          }}
+          onCancel={() => mode === 'first-run' ? onSkip() : onCancel()}
+        />
+      </Box>
+    </Surface>
+  )
+}

package/src/identity/hub/screens/NetworkScreen.tsx

@@ -0,0 +1,41 @@
+import React from 'react'
+import { Surface } from '../../../ui/Surface.js'
+import { Select, type SelectOption } from '../../../ui/Select.js'
+import type { SelectableNetwork } from '../../../storage/config.js'
+import { SELECTABLE_NETWORKS } from '../../../storage/config.js'
+import { networkLabel, networkSubtitle } from '../identityHubModel.js'
+
+type NetworkScreenProps = {
+  subtitle: string
+  footer: React.ReactNode
+  onSelect: (network: SelectableNetwork) => void
+  onCancel: () => void
+}
+
+export const NetworkScreen: React.FC<NetworkScreenProps> = ({ subtitle, footer, onSelect, onCancel }) => {
+  const options: Array<SelectOption<SelectableNetwork>> = [
+    { value: 'mainnet', role: 'section', prefix: '--', label: 'Main network' },
+    networkOption('mainnet'),
+    { value: 'arbitrum', role: 'section', prefix: '--', label: 'Lower-fee networks' },
+    ...SELECTABLE_NETWORKS.filter(network => network !== 'mainnet').map(networkOption),
+  ]
+
+  return (
+    <Surface title="Network" subtitle={subtitle} footer={footer}>
+      <Select<SelectableNetwork>
+        options={options}
+        hintLayout="inline"
+        onSubmit={onSelect}
+        onCancel={onCancel}
+      />
+    </Surface>
+  )
+}
+
+function networkOption(network: SelectableNetwork): SelectOption<SelectableNetwork> {
+  return {
+    value: network,
+    label: networkLabel(network),
+    hint: networkSubtitle(network),
+  }
+}