lean-switchboard

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const table = $.ui.resolve(e)
    const { Box, Text, Button } = table
    const Input = 'Input' in table ? table.Input : undefined

    const all = await read($, items)
    const kind = await read($, kindFilter)
    const origin = await read($, originFilter)
    const search = (await read($, query)).trim().toLowerCase()
    const message = await read($, note)
    const working = await read($, busy)
    const touched = await read($, changed)
    const loading = await read($, isLoading)

    const visible = all.filter(
      item =>
        (kind === 'all' || item.kind === kind) &&
        (origin === 'all' || item.origin === origin) &&
        (search === '' || `${item.name} ${item.description} ${item.source}`.toLowerCase().includes(search)),
    )
    const offCount = visible.filter(item => !item.isOn).length

    const chip = (key: string, label: string, isSelected: boolean, onPress: () => void) => (
      <Button key={key} label={label} {...(isSelected ? { variant: 'primary' as const } : { dimColor: true })} onPress={onPress} />
    )

    const row = (item: SwitchItem) => {
      const isBusy = working.includes(item.id)
      const meta = [
        item.origin === 'default' ? 'Claude default' : 'External',
        item.source,
        item.mode ? `mode: ${item.mode}` : '',
        touched.includes(item.id) ? 'changed, applies to new sessions' : '',
      ]
        .filter(Boolean)
        .join(' · ')

      // The switch sits first, in a column of its own, so long text can never push it out of view.
      return (
        <Box key={`row:${item.id}`} flexDirection="row" alignItems="flex-start" gap={2}>
          <Box flexDirection="column" minWidth={9} flexShrink={0}>
            {item.lockReason !== undefined ? (
              <Box flexDirection="column">
                <Text dimColor>{item.isOn ? 'On' : 'Off'}</Text>
                <Text dimColor italic>locked</Text>
              </Box>
            ) : (
              <Button
                key={`toggle:${item.id}`}
                label={isBusy ? '…' : item.isOn ? '● On' : '○ Off'}
                {...(item.isOn ? { variant: 'primary' as const } : {})}
                onPress={() => toggle($, item)}
              />
            )}
          </Box>
          <Box flexDirection="column" flexGrow={1} flexShrink={1} minWidth={0} overflow="hidden">
            <Text bold wrap="truncate-end">{item.name}</Text>
            <Text dimColor wrap="truncate-end">{meta}</Text>
            {item.description !== '' && <Text dimColor wrap="truncate-end">{item.description}</Text>}
            {item.hint !== undefined && <Text dimColor italic wrap="wrap">{item.hint}</Text>}
            {item.lockReason !== undefined && <Text dimColor italic wrap="wrap">{item.lockReason}</Text>}
          </Box>
        </Box>
      )
    }

    const sections = (kind === 'all' ? (['plugin', 'connector', 'skill'] as const) : [kind]).map(section => {
      const list = visible.filter(item => item.kind === section)
      if (list.length === 0) {
        return null
      }

      return (
        <Box key={`section:${section}`} flexDirection="column" gap={1}>
          <Text bold>
            {SECTION[section]} ({list.length})
          </Text>
          {list.map(row)}
        </Box>
      )
    })

    return (
      <Box flexDirection="column" gap={1}>
        <Box flexDirection="row" justifyContent="space-between" alignItems="center" gap={1}>
          <Text dimColor wrap="wrap">
            Turn things on or off. Changes apply to new sessions.
          </Text>
          <Box flexDirection="row" gap={1}>
            <Button key="refresh" dimColor label={loading ? 'Loading…' : 'Refresh'} onPress={() => load($)} />
            <Button key="close" role="dismiss" label="Close" onPress={() => closePane($)} />
          </Box>
        </Box>
        <Box flexDirection="row" flexWrap="wrap" gap={1}>
          {KINDS.map(option =>
            chip(`kind:${option.value}`, option.label, kind === option.value, () => update($, kindFilter, () => option.value)),
          )}
        </Box>
        <Box flexDirection="row" flexWrap="wrap" gap={1}>
          {ORIGINS.map(option =>
            chip(`origin:${option.value}`, option.label, origin === option.value, () =>
              update($, originFilter, () => option.value),
            ),
          )}
        </Box>
        {Input !== undefined && (
          <Input
            key="search"
            placeholder="Search by name"
            value={search}
            submitLabel="search"
            onInput={value => update($, query, () => value)}
            onSubmit={value => update($, query, () => value)}
          />
        )}
        {message !== null && <Text>{message}</Text>}
        <Text dimColor>
          {loading && all.length === 0 ? 'Loading…' : `${visible.length} shown · ${offCount} off`}
        </Text>
        {sections}
      </Box>
    )
  })