hanzo.ai/app/(app)/work/_workspace.tsx

'use client'

// /work, as the app. The route's client half.
//
// FOUR TABS, because the destination answers four questions a person arrives
// with: what are my agents doing, what compute are they holding, what else could
// I add, and what have I added already. Browsing is not watching and neither is
// paying, which is why the shelf and the leases are tabs here rather than rail
// entries of their own.
//
// The tab is local state and not a route: a tab is a view of one destination,
// and giving each its own address would put four URLs on a rail entry the rail
// can only light one of.

import { useState } from 'react'
import { YStack } from '@hanzo/ui'
import { Room } from '@hanzo/app/Room'
import { Tabs } from '@hanzo/app/tabs'
import { Work } from '@hanzo/app/Work'
import { Boxes } from '@hanzo/app/Boxes'
import { Market } from '@hanzo/app/Market'

const TABS = [
  { id: 'working', label: 'Working' },
  { id: 'boxes', label: 'Sandboxes' },
  { id: 'all', label: 'All agents' },
  { id: 'installed', label: 'Installed' },
] as const

type Tab = (typeof TABS)[number]['id']

export default function WorkRoom() {
  const [tab, setTab] = useState<Tab>('working')

  return (
    <Room mode="agents">
      <YStack flex={1} minH={0}>
        <Tabs tabs={TABS} chosen={tab} onPick={setTab} />

        {tab === 'working' ? (
          <Work />
        ) : tab === 'boxes' ? (
          <Boxes />
        ) : (
          <Market scope={tab === 'installed' ? 'installed' : 'all'} />
        )}
      </YStack>
    </Room>
  )
}