lcu-approve

  on('ui.render', { component: 'Pane' }, async ($, e, next) => {
    if (e.requestId === APPS_PANE) {
      const state = await read($, apps)
      return <AppsView ui={$.ui.resolve(e)} state={state} />
    }
    const entry = shown.get(e.requestId)
    if (!entry) return next(e)
    // Presses are handled by the `ui.press` hook below, with that dispatch's own `$`.
    return <ApprovalView ui={$.ui.resolve(e)} surface={e.surface} approval={entry.approval} icon={entry.icon} graphics={entry.graphics} />
  })

export function AppsView({ ui, state }: { ui: any; state: AppsState }) {
  const { Box, Text, Button, Input } = ui
  const busy = Boolean(state.busy)
  const present = state.always.filter(app => app.installed)
  const missing = state.always.filter(app => !app.installed)
  const row = (app: AppRow) => (
    <AppRowView key={app.bundleId} ui={ui} name={app.name} bundleId={app.bundleId}>
      {app.risk === 'high' && <RiskBadge ui={ui} />}
      {app.blocked && <Text color="red">Blocked by Computer use</Text>}
      <Button key={`${APPS_PREFIX}revoke:${app.bundleId}`} onPress={noop}>Revoke</Button>
    </AppRowView>
  )
  return (
    <Box flexDirection="column" gap={1}>
      <Box flexDirection="column">
        <Text bold>Approved apps</Text>
        <Box flexDirection="row" gap={2} alignItems="center">
          <Box flexGrow={1}>
            <Text dimColor>Computer use can control these apps without asking.</Text>
          </Box>
          <Button key={`${APPS_PREFIX}refresh`} onPress={noop}>Refresh</Button>
        </Box>
      </Box>
      {state.unavailable ? (
        <Text color="yellow">{state.unavailable}</Text>
      ) : !state.isLoaded ? (
        <Text dimColor>Loading...</Text>
      ) : (
        <Box flexDirection="column" gap={1}>
          <Box flexDirection="column">
            <Text bold dimColor>{`Always allowed (${present.length})`}</Text>
            {present.length === 0 && <Text dimColor>None. Allow one below.</Text>}
            {present.map(row)}
          </Box>
          {missing.length > 0 && (
            <Box flexDirection="column">
              <Text bold dimColor>{`Not installed (${missing.length})`}</Text>
              {missing.map(row)}
            </Box>
          )}
          <Box flexDirection="column">
            <Text bold dimColor>{`This conversation (${state.session.length})`}</Text>
            {state.session.length === 0 && <Text dimColor>None.</Text>}
            {state.session.map(app => (
              <AppRowView key={app.bundleId} ui={ui} name={app.name} bundleId={app.bundleId}>
                {app.risk === 'high' && <RiskBadge ui={ui} />}
                <Text dimColor>Ends with this conversation</Text>
              </AppRowView>
            ))}
          </Box>
          <Input
            key={`${APPS_PREFIX}allow:${state.nonce}`}
            label="Allow an app"
            placeholder="App name, bundle id or path"
            submitLabel="allow"
            onSubmit={noop}
          />
        </Box>
      )}
      {(state.busy || state.notice) && (
        <Text color={state.busy ? undefined : state.notice?.tone === 'error' ? 'red' : 'green'} dimColor={busy}>
          {state.busy ?? state.notice?.text}
        </Text>
      )}
    </Box>
  )
}

function AppRowView({ ui, name, bundleId, children }: { ui: any; name: string; bundleId: string; children: any }) {
  const { Box, Text } = ui
  return (
    <Box flexDirection="row" gap={2} alignItems="center">
      <Box flexShrink={0}>
        <Text bold>{name}</Text>
      </Box>
      {bundleId !== name && (
        <Box flexShrink={1}>
          <Text dimColor wrap="truncate-end">{bundleId}</Text>
        </Box>
      )}
      <Box flexGrow={1} />
      {children}
    </Box>
  )
}

export function ApprovalView({ ui, surface, approval, icon, graphics = true }: { ui: any; surface: string; approval: Approval; icon?: string; graphics?: boolean }) {
  const { Box, Text, Button } = ui
  const isHigh = approval.riskLevel === 'high'
  // A terminal that cannot draw the picture gets no icon cell, so the name starts at the pane's edge.
  const shownIcon = surface === 'terminal' && !graphics ? undefined : icon
  const key = (choice: string) => `${KEY_PREFIX}${approval.id}:${choice}`
  return (
    <Box flexDirection="column" gap={1} paddingY={surface === 'terminal' ? 0 : 1}>
      <Box flexDirection="row" gap={surface === 'terminal' && !shownIcon ? 0 : 2} alignItems="center">
        <Icon ui={ui} surface={surface} name={approval.label} icon={shownIcon} />
        <AppTitle ui={ui} name={approval.label} bundleId={approval.app} />
      </Box>
      <Text>{`Computer use will be able to see and control ${approval.label}.`}</Text>
      {isHigh && (
        <Box flexDirection="column">
          <RiskBadge ui={ui} />
          {approval.warning && <Text color="yellow">{plainWarning(approval.warning)}</Text>}
        </Box>
      )}
      <Box flexDirection="row" gap={1}>
        <Button key={key('session')} variant="primary" autoFocus hotkey="a" onPress={noop}>
          {LABEL_SESSION}
        </Button>
        {approval.scopes.includes('always') && (
          <Button key={key('always')} variant="secondary" hotkey="l" onPress={noop}>
            {LABEL_ALWAYS}
          </Button>
        )}
        <Button key={key('deny')} role="dismiss" hotkey="d" onPress={noop}>
          {LABEL_DENY}
        </Button>
      </Box>
    </Box>
  )
}

function Icon({ ui, surface, name, icon }: { ui: any; surface: string; name: string; icon?: string }) {
  if (surface === 'terminal') {
    const { Image } = ui
    return icon ? <Image source={{ png: icon }} columns={6} rows={3} alt=" " /> : null
  }
  const { Svg } = ui
  const initial = esc([...name.trim()][0]?.toUpperCase() ?? '?')
  const picture = icon
    ? `<image href="data:image/png;base64,${icon}" xlink:href="data:image/png;base64,${icon}" x="0" y="0" width="48" height="48"/>`
    : ''
  const source =
    '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 48 48" width="48" height="48">' +
    '<rect width="48" height="48" rx="11" fill="#8a8a8a" fill-opacity="0.28"/>' +
    `<text x="24" y="32" font-size="22" font-family="sans-serif" text-anchor="middle" fill="#8a8a8a">${initial}</text>${picture}</svg>`
  return <Svg source={source} alt={`${name} icon`} width={48} height={48} />
}

function AppTitle({ ui, name, bundleId }: { ui: any; name: string; bundleId: string }) {
  const { Box, Text } = ui
  return (
    <Box flexDirection="column" flexGrow={1}>
      <Text bold>{name}</Text>
      {bundleId !== name && <Text dimColor>{bundleId}</Text>}
    </Box>
  )
}