feat(devbox): style improvements (#36)

## Description
<img width="921" height="628" alt="image"
src="https://github.com/user-attachments/assets/992e932f-6c94-4c45-bbeb-c4aeb566fca9"
/>
Looks like this now
<!-- Provide a brief description of your changes -->

**Note:** PR titles should follow [Conventional
Commits](https://www.conventionalcommits.org/) format (e.g.,
`feat(devbox): add support for custom env vars` or `fix(snapshot):
resolve pagination issue`) as they are used for automatic release notes
generation.

## Type of Change

<!-- Mark the relevant option with an 'x' -->

- [ ] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality to not work as expected)
- [ ] Documentation update
- [ ] Code refactoring
- [ ] Performance improvement
- [ ] Test updates

## Related Issues

<!-- Link to related issues using #issue-number -->
Closes #

## Changes Made

<!-- Describe the changes in detail -->

## Testing

<!-- Describe how you tested your changes -->

- [ ] I have tested locally
- [ ] I have added/updated tests
- [ ] All existing tests pass

## Checklist

- [ ] My code follows the code style of this project
- [ ] I have performed a self-review of my own code
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] I have updated the documentation accordingly
- [ ] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [ ] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published

## Screenshots (if applicable)

<!-- Add screenshots to help explain your changes -->

## Additional Notes

<!-- Any additional information that reviewers should know -->

Author: dines-rl

src/commands/devbox/list.tsx

@@ -8,6 +8,7 @@ import { SpinnerComponent } from "../../components/Spinner.js";
 import { ErrorMessage } from "../../components/ErrorMessage.js";
 import { getStatusDisplay } from "../../components/StatusBadge.js";
 import { Breadcrumb } from "../../components/Breadcrumb.js";
+import type { Column } from "../../components/Table.js";
 import { Table, createTextColumn } from "../../components/Table.js";
 import { formatTimeAgo } from "../../components/ResourceListView.js";
 import { output, outputError } from "../../utils/output.js";
@@ -202,12 +203,36 @@ const ListDevboxesUI = ({
     const ABSOLUTE_MAX_NAME = 80;
     const ABSOLUTE_MAX_ID = 50;
 
-    const columns = [
+    const columns: Column<Devbox>[] = [
+      // Status icon column - visual indicator for quick scanning
+      {
+        key: "statusIcon",
+        label: "",
+        width: statusIconWidth,
+        render: (devbox: Devbox, _index: number, isSelected: boolean) => {
+          const statusDisplay = getStatusDisplay(devbox?.status);
+          const statusColor =
+            statusDisplay.color === colors.textDim
+              ? colors.info
+              : statusDisplay.color;
+          return (
+            <Text
+              color={isSelected ? "white" : statusColor}
+              bold={true}
+              dimColor={false}
+              inverse={isSelected}
+              wrap="truncate"
+            >
+              {statusDisplay.icon}{" "}
+            </Text>
+          );
+        },
+      },
       createTextColumn(
         "name",
         "Name",
         (devbox: Devbox) => {
-          const name = String(devbox?.name || devbox?.id || "");
+          const name = String(devbox?.name || "");
           const safeMax = Math.min(nameWidth || 15, ABSOLUTE_MAX_NAME);
           return name.length > safeMax
             ? name.substring(0, Math.max(1, safeMax - 3)) + "..."
@@ -235,19 +260,33 @@ const ListDevboxesUI = ({
           bold: false,
         },
       ),
-      createTextColumn(
-        "status",
-        "Status",
-        (devbox: Devbox) => {
+      // Status text column with color matching the icon
+      {
+        key: "status",
+        label: "Status",
+        width: statusTextWidth,
+        render: (devbox: Devbox, _index: number, isSelected: boolean) => {
           const statusDisplay = getStatusDisplay(devbox?.status);
-          const text = String(statusDisplay?.text || "-");
-          return text.length > 20 ? text.substring(0, 17) + "..." : text;
-        },
-        {
-          width: statusTextWidth,
-          dimColor: false,
+          const statusColor =
+            statusDisplay.color === colors.textDim
+              ? colors.info
+              : statusDisplay.color;
+          const safeWidth = Math.max(1, statusTextWidth);
+          const truncated = statusDisplay.text.slice(0, safeWidth);
+          const padded = truncated.padEnd(safeWidth, " ");
+          return (
+            <Text
+              color={isSelected ? "white" : statusColor}
+              bold={true}
+              dimColor={false}
+              inverse={isSelected}
+              wrap="truncate"
+            >
+              {padded}
+            </Text>
+          );
         },
-      ),
+      },
       createTextColumn(
         "created",
         "Created",
@@ -308,6 +347,7 @@ const ListDevboxesUI = ({
 
     return columns;
   }, [
+    statusIconWidth,
     nameWidth,
     idWidth,
     statusTextWidth,

src/components/DevboxCreatePage.tsx

@@ -66,12 +66,12 @@ export const DevboxCreatePage = ({
   const [currentField, setCurrentField] = React.useState<FormField>("create");
   const [formData, setFormData] = React.useState<FormData>({
     name: "",
-    architecture: "arm64",
+    architecture: "x86_64",
     resource_size: "SMALL",
     custom_cpu: "",
     custom_memory: "",
     custom_disk: "",
-    keep_alive: "3600",
+    keep_alive: "3600", // 1 hour
     metadata: {},
     blueprint_id: initialBlueprintId || "",
     snapshot_id: initialSnapshotId || "",
@@ -632,6 +632,7 @@ export const DevboxCreatePage = ({
                       <MetadataDisplay
                         metadata={formData.metadata}
                         showBorder={false}
+                        compact
                       />
                     </Box>
                   )}