feat(devbox): added state transition display to detail page (#34)

## Description

<!-- 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/components/DevboxDetailPage.tsx

@@ -6,6 +6,7 @@ import { StatusBadge } from "./StatusBadge.js";
 import { MetadataDisplay } from "./MetadataDisplay.js";
 import { Breadcrumb } from "./Breadcrumb.js";
 import { DevboxActionsMenu } from "./DevboxActionsMenu.js";
+import { StateHistory } from "./StateHistory.js";
 import { getDevboxUrl } from "../utils/url.js";
 import { colors } from "../utils/theme.js";
 import { useViewportHeight } from "../hooks/useViewportHeight.js";
@@ -840,6 +841,9 @@ export const DevboxDetailPage = ({
         </Box>
       )}
 
+      {/* State History */}
+      <StateHistory stateTransitions={selectedDevbox.state_transitions} />
+
       {/* Operations - inline display */}
       <Box flexDirection="column" marginTop={1}>
         <Text color={colors.primary} bold>

src/components/StateHistory.tsx

@@ -0,0 +1,131 @@
+import React from "react";
+import { Box, Text } from "ink";
+import figures from "figures";
+import { colors } from "../utils/theme.js";
+
+interface StateHistoryProps {
+  stateTransitions?: any;
+}
+
+// Format time ago in a succinct way
+const formatTimeAgo = (timestamp: number): string => {
+  const seconds = Math.floor((Date.now() - timestamp) / 1000);
+
+  if (seconds < 60) return `${seconds}s ago`;
+
+  const minutes = Math.floor(seconds / 60);
+  if (minutes < 60) return `${minutes}m ago`;
+
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return `${hours}h ago`;
+
+  const days = Math.floor(hours / 24);
+  if (days < 30) return `${days}d ago`;
+
+  const months = Math.floor(days / 30);
+  if (months < 12) return `${months}mo ago`;
+
+  const years = Math.floor(months / 12);
+  return `${years}y ago`;
+};
+
+// Format duration in a succinct way
+const formatDuration = (milliseconds: number): string => {
+  const seconds = Math.floor(milliseconds / 1000);
+  if (seconds < 60) return `${seconds}s`;
+
+  const minutes = Math.floor(seconds / 60);
+  if (minutes < 60) return `${minutes}m`;
+
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return `${hours}h ${minutes % 60}m`;
+
+  const days = Math.floor(hours / 24);
+  return `${days}d ${hours % 24}h`;
+};
+
+// Capitalize first letter of a string
+const capitalize = (str: string) => str.charAt(0).toUpperCase() + str.slice(1);
+
+export const StateHistory = ({ stateTransitions }: StateHistoryProps) => {
+  if (
+    !stateTransitions ||
+    !Array.isArray(stateTransitions) ||
+    stateTransitions.length === 0
+  ) {
+    return null;
+  }
+
+  // Get last 3 transitions (most recent first)
+  const lastThree = (
+    stateTransitions as Array<{
+      status: string;
+      transition_time_ms?: number;
+    }>
+  )
+    .slice(-3)
+    .reverse()
+    .map((transition, idx, arr) => {
+      const transitionTime = transition.transition_time_ms;
+      // Calculate duration: time until next transition, or until now if it's the current state
+      let duration = 0;
+      if (transitionTime) {
+        if (idx === 0) {
+          // Most recent state - duration is from transition time to now
+          duration = Date.now() - transitionTime;
+        } else {
+          // Previous state - duration is from this transition to the next one
+          const nextTransition = arr[idx - 1];
+          const nextTransitionTime = nextTransition.transition_time_ms;
+          if (nextTransitionTime) {
+            duration = nextTransitionTime - transitionTime;
+          }
+        }
+      }
+      return {
+        status: transition.status,
+        transitionTime,
+        duration,
+      };
+    })
+    .filter((state) => state.transitionTime); // Only show states with valid timestamps
+
+  if (lastThree.length === 0) {
+    return null;
+  }
+
+  return (
+    <Box flexDirection="column" marginBottom={1} paddingX={1}>
+      <Text color={colors.info} bold>
+        {figures.circleFilled} State History
+      </Text>
+      <Box flexDirection="column">
+        {lastThree.map((state, idx) => (
+          <Box key={idx} flexDirection="column">
+            <Text dimColor>
+              {capitalize(state.status)}
+              {state.transitionTime && (
+                <>
+                  {" "}
+                  at {new Date(state.transitionTime).toLocaleString()}{" "}
+                  <Text color={colors.textDim} dimColor>
+                    ({formatTimeAgo(state.transitionTime)})
+                  </Text>
+                  {state.duration > 0 && (
+                    <>
+                      {" "}
+                      • Duration:{" "}
+                      <Text color={colors.info}>
+                        {formatDuration(state.duration)}
+                      </Text>
+                    </>
+                  )}
+                </>
+              )}
+            </Text>
+          </Box>
+        ))}
+      </Box>
+    </Box>
+  );
+};

src/utils/theme.ts

@@ -43,7 +43,7 @@ const darkColors: ColorPalette = {
 
   // UI colors
   text: "#FFFFFF", // White
-  textDim: "#9CA3AF", // Gray
+  textDim: "#B8C2D0", // Brighter gray for better visibility in dark mode
   border: "#6B7280", // Medium gray
   background: "#000000", // Black