🤖 Use stable timestamps and version for visual testing

- Replace Date.now() with stable timestamp in all story files
- Mock VERSION in Storybook with stable values for Chromatic
- Use Apple's iconic demo time: January 24, 2024, 9:41 AM PST
- Ensures consistent visual snapshots across Chromatic runs

Author: kylecarbs

.storybook/main.ts

@@ -19,6 +19,8 @@ const config: StorybookConfig = {
       resolve: {
         alias: {
           "@": path.join(process.cwd(), "src"),
+          // Mock version module for stable visual testing in Storybook
+          "@/version": path.join(process.cwd(), ".storybook/mocks/version.ts"),
         },
       },
     });

.storybook/mocks/version.ts

@@ -0,0 +1,9 @@
+// Mock version for Storybook visual testing
+// This ensures consistent snapshots in Chromatic
+// Apple's classic demo time: 9:41 AM on January 24, 2024
+export const VERSION = {
+  git_commit: 'abc1234',
+  git_describe: 'v1.0.0',
+  buildTime: '2024-01-24T17:41:00Z', // 9:41 AM PST
+};
+

src/App.stories.tsx

@@ -5,6 +5,9 @@ import type { ProjectConfig } from "./config";
 import type { FrontendWorkspaceMetadata } from "./types/workspace";
 import type { IPCApi } from "./types/ipc";
 
+// Stable timestamp for visual testing (Apple demo time: Jan 24, 2024, 9:41 AM PST)
+const STABLE_TIMESTAMP = new Date('2024-01-24T09:41:00-08:00').getTime();
+
 // Mock window.api for App component
 function setupMockAPI(options: {
   projects?: Map<string, ProjectConfig>;
@@ -374,7 +377,7 @@ export const ActiveWorkspaceWithChat: Story = {
                     parts: [{ type: "text", text: "Add authentication to the user API endpoint" }],
                     metadata: {
                       historySequence: 1,
-                      timestamp: Date.now() - 300000,
+                      timestamp: STABLE_TIMESTAMP - 300000,
                     },
                   });
 
@@ -402,7 +405,7 @@ export const ActiveWorkspaceWithChat: Story = {
                     ],
                     metadata: {
                       historySequence: 2,
-                      timestamp: Date.now() - 290000,
+                      timestamp: STABLE_TIMESTAMP - 290000,
                       model: "claude-sonnet-4-20250514",
                       usage: {
                         inputTokens: 1250,
@@ -420,7 +423,7 @@ export const ActiveWorkspaceWithChat: Story = {
                     parts: [{ type: "text", text: "Yes, add JWT token validation" }],
                     metadata: {
                       historySequence: 3,
-                      timestamp: Date.now() - 280000,
+                      timestamp: STABLE_TIMESTAMP - 280000,
                     },
                   });
 
@@ -452,7 +455,7 @@ export const ActiveWorkspaceWithChat: Story = {
                     ],
                     metadata: {
                       historySequence: 4,
-                      timestamp: Date.now() - 270000,
+                      timestamp: STABLE_TIMESTAMP - 270000,
                       model: "claude-sonnet-4-20250514",
                       usage: {
                         inputTokens: 2100,
@@ -470,7 +473,7 @@ export const ActiveWorkspaceWithChat: Story = {
                     parts: [{ type: "text", text: "Can you run the tests to make sure it works?" }],
                     metadata: {
                       historySequence: 5,
-                      timestamp: Date.now() - 240000,
+                      timestamp: STABLE_TIMESTAMP - 240000,
                     },
                   });
 
@@ -502,7 +505,7 @@ export const ActiveWorkspaceWithChat: Story = {
                     ],
                     metadata: {
                       historySequence: 6,
-                      timestamp: Date.now() - 230000,
+                      timestamp: STABLE_TIMESTAMP - 230000,
                       model: "claude-sonnet-4-20250514",
                       usage: {
                         inputTokens: 2800,
@@ -525,7 +528,7 @@ export const ActiveWorkspaceWithChat: Story = {
                     ],
                     metadata: {
                       historySequence: 7,
-                      timestamp: Date.now() - 180000,
+                      timestamp: STABLE_TIMESTAMP - 180000,
                     },
                   });
 
@@ -562,7 +565,7 @@ export const ActiveWorkspaceWithChat: Story = {
                     ],
                     metadata: {
                       historySequence: 8,
-                      timestamp: Date.now() - 170000,
+                      timestamp: STABLE_TIMESTAMP - 170000,
                       model: "claude-sonnet-4-20250514",
                       usage: {
                         inputTokens: 3500,

src/components/Messages/AssistantMessage.stories.tsx

@@ -3,6 +3,9 @@ import { AssistantMessage } from "./AssistantMessage";
 import type { DisplayedMessage } from "@/types/message";
 import { action } from "@storybook/addon-actions";
 
+// Stable timestamp for visual testing (Apple demo time: Jan 24, 2024, 9:41 AM PST)
+const STABLE_TIMESTAMP = new Date('2024-01-24T09:41:00-08:00').getTime();
+
 const clipboardWriteText = (data: string) => {
   action("copy-text")(data);
   return Promise.resolve();
@@ -52,7 +55,7 @@ const createAssistantMessage = (
   isStreaming: false,
   isPartial: false,
   isCompacted: false,
-  timestamp: Date.now(),
+  timestamp: STABLE_TIMESTAMP,
   model: "anthropic:claude-sonnet-4-5",
   ...overrides,
 });

src/components/Messages/ReasoningMessage.stories.tsx

@@ -2,6 +2,9 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { ReasoningMessage } from "./ReasoningMessage";
 import type { DisplayedMessage } from "@/types/message";
 
+// Stable timestamp for visual testing (Apple demo time: Jan 24, 2024, 9:41 AM PST)
+const STABLE_TIMESTAMP = new Date('2024-01-24T09:41:00-08:00').getTime();
+
 const meta = {
   title: "Messages/ReasoningMessage",
   component: ReasoningMessage,
@@ -34,7 +37,7 @@ const createReasoningMessage = (
   historySequence: 1,
   isStreaming: false,
   isPartial: false,
-  timestamp: Date.now(),
+  timestamp: STABLE_TIMESTAMP,
   ...overrides,
 });
 

src/components/Messages/StreamErrorMessage.stories.tsx

@@ -3,6 +3,9 @@ import { StreamErrorMessage } from "./StreamErrorMessage";
 import type { DisplayedMessage } from "@/types/message";
 import type { StreamErrorType } from "@/types/errors";
 
+// Stable timestamp for visual testing (Apple demo time: Jan 24, 2024, 9:41 AM PST)
+const STABLE_TIMESTAMP = new Date('2024-01-24T09:41:00-08:00').getTime();
+
 const meta = {
   title: "Messages/StreamErrorMessage",
   component: StreamErrorMessage,
@@ -35,7 +38,7 @@ const createStreamErrorMessage = (
   error,
   errorType,
   historySequence: 1,
-  timestamp: Date.now(),
+  timestamp: STABLE_TIMESTAMP,
   ...overrides,
 });
 

src/components/Messages/UserMessage.stories.tsx

@@ -3,6 +3,9 @@ import { action } from "@storybook/addon-actions";
 import { UserMessage } from "./UserMessage";
 import type { DisplayedMessage } from "@/types/message";
 
+// Stable timestamp for visual testing (Apple demo time: Jan 24, 2024, 9:41 AM PST)
+const STABLE_TIMESTAMP = new Date('2024-01-24T09:41:00-08:00').getTime();
+
 const clipboardWriteText = (data: string) => {
   action("copy-text")(data);
   return Promise.resolve();
@@ -42,7 +45,7 @@ const createUserMessage = (
   historyId: "hist-1",
   content,
   historySequence: 1,
-  timestamp: Date.now(),
+  timestamp: STABLE_TIMESTAMP,
   ...overrides,
 });
 

src/components/TitleBar.stories.tsx

@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { TitleBar } from "./TitleBar";
+
+const meta = {
+  title: "Components/TitleBar",
+  component: TitleBar,
+  parameters: {
+    layout: "fullscreen",
+    backgrounds: {
+      default: "dark",
+      values: [{ name: "dark", value: "#1e1e1e" }],
+    },
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof TitleBar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * The TitleBar shows the cmux version and build date.
+ * 
+ * Note: The version displayed is generated at build time from git information.
+ * In Storybook, you'll see the current development version.
+ */
+export const Default: Story = {};
+
+export const WithTelemetryDisabled: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "When telemetry is disabled, the update indicator shows a disabled state (⊘) and hovering explains updates are disabled.",
+      },
+    },
+  },
+};
+