feat(dashboard): box table cleanup — drop region, tighten density, full image refs in onboarding

apps/dashboard/src/components/BoxTable/columns.tsx

@@ -52,7 +52,6 @@ interface GetColumnsProps {
   handleCreateSshAccess: (id: string) => void
   handleRevokeSshAccess: (id: string) => void
   handleRecover: (id: string) => void
-  getRegionName: (regionId: string) => string | undefined
   handleScreenRecordings: (id: string) => void
 }
 
@@ -67,7 +66,6 @@ export function getColumns({
   handleCreateSshAccess,
   handleRevokeSshAccess,
   handleRecover,
-  getRegionName,
   handleScreenRecordings,
 }: GetColumnsProps): ColumnDef<Box>[] {
   const handleOpenWebTerminal = async (boxId: string) => {
@@ -170,23 +168,6 @@ export function getColumns({
       ),
       accessorKey: 'state',
     },
-    {
-      id: 'region',
-      size: 80,
-      enableSorting: true,
-      enableHiding: false,
-      header: ({ column }) => {
-        return <SortableHeader column={column} label="Region" dataState="sortable" />
-      },
-      cell: ({ row }) => {
-        return (
-          <div className="w-full truncate">
-            <span className="truncate block">{getRegionName(row.original.target) ?? row.original.target}</span>
-          </div>
-        )
-      },
-      accessorKey: 'target',
-    },
     {
       id: 'resources',
       size: 230,

apps/dashboard/src/components/BoxTable/index.tsx

@@ -45,7 +45,6 @@ export function BoxTable({
   boxIsLoading,
   boxStateIsTransitioning,
   loading,
-  getRegionName,
   handleStart,
   handleStop,
   handleDelete,
@@ -96,7 +95,6 @@ export function BoxTable({
     filters,
     onFiltersChange,
     handleRecover,
-    getRegionName,
   })
 
   const [pendingBulkAction, setPendingBulkAction] = useState<BulkAction | null>(null)
@@ -233,7 +231,6 @@ export function BoxTable({
                       </div>
 
                       <div className="grid grid-cols-1 gap-x-5 gap-y-3 text-xs sm:grid-cols-2 xl:grid-cols-4">
-                        <CompactBoxMeta label="Region">{getRegionName(box.target) ?? box.target}</CompactBoxMeta>
                         <CompactBoxMeta label="Resources">
                           <div className="flex flex-wrap gap-1">
                             <ResourceChip resource="cpu" value={box.cpu} />
@@ -282,7 +279,10 @@ export function BoxTable({
         )
       ) : (
         <div className="overflow-x-auto rounded-sm border border-border bg-card">
-          <Table className="min-w-[1360px] border-separate border-spacing-0" style={{ tableLayout: 'fixed' }}>
+          <Table
+            className="min-w-[1120px] border-separate border-spacing-0 [&_tbody_td]:py-1"
+            style={{ tableLayout: 'fixed' }}
+          >
             <TableHeader>
               {table.getHeaderGroups().map((headerGroup) => (
                 <TableRow key={headerGroup.id}>

apps/dashboard/src/components/BoxTable/types.ts

@@ -20,7 +20,6 @@ export interface BoxTableProps {
   boxIsLoading: Record<string, boolean>
   boxStateIsTransitioning: Record<string, boolean>
   loading: boolean
-  getRegionName: (regionId: string) => string | undefined
   handleStart: (id: string) => void
   handleStop: (id: string) => void
   handleDelete: (id: string) => void

apps/dashboard/src/components/BoxTable/useBoxTable.ts

@@ -48,7 +48,6 @@ interface UseBoxTableProps {
   filters: BoxFilters
   onFiltersChange: (filters: BoxFilters) => void
   handleRecover: (id: string) => void
-  getRegionName: (regionId: string) => string | undefined
 }
 
 export function useBoxTable({
@@ -71,19 +70,21 @@ export function useBoxTable({
   filters,
   onFiltersChange,
   handleRecover,
-  getRegionName,
 }: UseBoxTableProps) {
   // Column visibility state management with persistence
   const [columnVisibility, setColumnVisibility] = useState<VisibilityState>(() => {
     const saved = getLocalStorageItem(LocalStorageKey.BoxTableColumnVisibility)
     if (saved) {
       try {
-        return { ...JSON.parse(saved), id: true, region: true, labels: false }
+        const parsed = JSON.parse(saved)
+        // Drop the legacy `region` key left in persisted state after the Region column was removed.
+        delete parsed.region
+        return { ...parsed, id: true, labels: false }
       } catch {
-        return { id: true, region: true, labels: false }
+        return { id: true, labels: false }
       }
     }
-    return { id: true, region: true, labels: false }
+    return { id: true, labels: false }
   })
 
   useEffect(() => {
@@ -107,7 +108,6 @@ export function useBoxTable({
         handleCreateSshAccess,
         handleRevokeSshAccess,
         handleRecover,
-        getRegionName,
         handleScreenRecordings,
       }),
     [
@@ -121,7 +121,6 @@ export function useBoxTable({
       handleCreateSshAccess,
       handleRevokeSshAccess,
       handleRecover,
-      getRegionName,
       handleScreenRecordings,
     ],
   )

apps/dashboard/src/hooks/use-mobile.tsx

@@ -7,7 +7,7 @@
 import { useMatchMedia } from './useMatchMedia'
 
 const MOBILE_BREAKPOINT = 768
-const COMPACT_BREAKPOINT = 1200
+const COMPACT_BREAKPOINT = 1024
 
 export function useIsMobile() {
   return useMatchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)

apps/dashboard/src/lib/onboarding-code-examples.ts

@@ -24,7 +24,7 @@ const rt = JsBoxlite.rest(new BoxliteRestOptions({
   credential: new ApiKeyCredential(apiKey),
 }))
 
-const box = await rt.create({ image: 'boxlite/base' }, 'sdk-quickstart')
+const box = await rt.create({ image: 'ghcr.io/boxlite-ai/boxlite-agent-base:20260605-p0-r3' }, 'sdk-quickstart')
 await box.start()
 
 const exec = await box.exec('echo', ['Hello from BoxLite SDK'])
@@ -54,7 +54,7 @@ async def main():
         credential=ApiKeyCredential(os.environ["BOXLITE_API_KEY"]),
     ))
 
-    box = await rt.create(BoxOptions(image="boxlite/base"), name="sdk-quickstart")
+    box = await rt.create(BoxOptions(image="ghcr.io/boxlite-ai/boxlite-agent-base:20260605-p0-r3"), name="sdk-quickstart")
     await box.start()
 
     execution = await box.exec("echo", args=["Hello from BoxLite SDK"])
@@ -105,7 +105,7 @@ func main() {
     }
     defer rt.Close()
 
-    box, err := rt.Create(ctx, "boxlite/base", boxlite.WithName("sdk-quickstart"))
+    box, err := rt.Create(ctx, "ghcr.io/boxlite-ai/boxlite-agent-base:20260605-p0-r3", boxlite.WithName("sdk-quickstart"))
     if err != nil {
         log.Fatal(err)
     }
@@ -143,7 +143,7 @@ async fn main() -> Result<(), Box<dyn std::error::Error>> {
     )?;
 
     let options = BoxOptions {
-        rootfs: RootfsSpec::Image("boxlite/base".into()),
+        rootfs: RootfsSpec::Image("ghcr.io/boxlite-ai/boxlite-agent-base:20260605-p0-r3".into()),
         ..Default::default()
     };
     let box_handle = rt.create(options, Some("sdk-quickstart".into())).await?;

apps/dashboard/src/pages/Boxes.tsx

@@ -29,7 +29,6 @@ import { useApi } from '@/hooks/useApi'
 import { deleteBoxViaBoxApi, startBoxViaBoxApi, stopBoxViaBoxApi } from '@/lib/cloudBox'
 import { useConfig } from '@/hooks/useConfig'
 import { useNotificationSocket } from '@/hooks/useNotificationSocket'
-import { useRegions } from '@/hooks/useRegions'
 import {
   DEFAULT_BOX_SORTING,
   getBoxesQueryKey,
@@ -295,8 +294,6 @@ const Boxes: React.FC = () => {
 
   // TODO(image-rewrite): template/image listing removed with the image/template subsystem.
 
-  const { getRegionName } = useRegions()
-
   // Subscribe to Box Events
 
   useEffect(() => {
@@ -857,7 +854,6 @@ const Boxes: React.FC = () => {
           filters={filters}
           onFiltersChange={handleFiltersChange}
           handleRecover={handleRecover}
-          getRegionName={getRegionName}
           handleScreenRecordings={handleScreenRecordings}
           headerAction={
             authenticatedUserHasPermission(OrganizationRolePermissionsEnum.WRITE_BOXES) ? (