feat: Allow Overriding Timestamp Format in Settings

apps/web/src/appSettings.ts

@@ -22,6 +22,7 @@ const AppSettingsSchema = Schema.Struct({
   enableAssistantStreaming: Schema.Boolean.pipe(
     Schema.withConstructorDefault(() => Option.some(false)),
   ),
+  use24HourTimestamps: Schema.Boolean.pipe(Schema.withConstructorDefault(() => Option.some(false))),
   customCodexModels: Schema.Array(Schema.String).pipe(
     Schema.withConstructorDefault(() => Option.some([])),
   ),

apps/web/src/components/ChatView.tsx

@@ -184,6 +184,7 @@ export default function ChatView({ threadId }: ChatViewProps) {
   const setStoreThreadError = useStore((store) => store.setError);
   const setStoreThreadBranch = useStore((store) => store.setThreadBranch);
   const { settings } = useAppSettings();
+  const use24HourTimestamps = settings.use24HourTimestamps;
   const navigate = useNavigate();
   const rawSearch = useSearch({
     strict: false,
@@ -3244,6 +3245,7 @@ export default function ChatView({ threadId }: ChatViewProps) {
               onImageExpand={onExpandTimelineImage}
               markdownCwd={gitCwd ?? undefined}
               resolvedTheme={resolvedTheme}
+              use24HourTimestamps={use24HourTimestamps}
               workspaceRoot={activeProject?.cwd ?? undefined}
             />
           </div>
@@ -3764,6 +3766,7 @@ export default function ChatView({ threadId }: ChatViewProps) {
             activeProposedPlan={activeProposedPlan}
             markdownCwd={gitCwd ?? undefined}
             workspaceRoot={activeProject?.cwd ?? undefined}
+            use24HourTimestamps={use24HourTimestamps}
             onClose={() => {
               setPlanSidebarOpen(false);
               // Track that the user explicitly dismissed for this turn so auto-open won't fight them.

apps/web/src/components/DiffPanel.tsx

@@ -25,6 +25,8 @@ import { buildPatchCacheKey } from "../lib/diffRendering";
 import { resolveDiffThemeName } from "../lib/diffRendering";
 import { useTurnDiffSummaries } from "../hooks/useTurnDiffSummaries";
 import { useStore } from "../store";
+import { useAppSettings } from "../appSettings";
+import { formatShortTimestamp } from "../timestampFormat";
 import { ToggleGroup, Toggle } from "./ui/toggle-group";
 
 type DiffRenderMode = "stacked" | "split";
@@ -149,13 +151,6 @@ function buildFileDiffRenderKey(fileDiff: FileDiffMetadata): string {
   return fileDiff.cacheKey ?? `${fileDiff.prevName ?? "none"}:${fileDiff.name}`;
 }
 
-function formatTurnChipTimestamp(isoDate: string): string {
-  return new Intl.DateTimeFormat(undefined, {
-    hour: "numeric",
-    minute: "2-digit",
-  }).format(new Date(isoDate));
-}
-
 interface DiffPanelProps {
   mode?: "inline" | "sheet" | "sidebar";
 }
@@ -165,6 +160,7 @@ export { DiffWorkerPoolProvider } from "./DiffWorkerPoolProvider";
 export default function DiffPanel({ mode = "inline" }: DiffPanelProps) {
   const navigate = useNavigate();
   const { resolvedTheme } = useTheme();
+  const { settings } = useAppSettings();
   const [diffRenderMode, setDiffRenderMode] = useState<DiffRenderMode>("stacked");
   const patchViewportRef = useRef<HTMLDivElement>(null);
   const turnStripRef = useRef<HTMLDivElement>(null);
@@ -487,7 +483,7 @@ export default function DiffPanel({ mode = "inline" }: DiffPanelProps) {
                       "?"}
                   </span>
                   <span className="text-[9px] leading-tight opacity-70">
-                    {formatTurnChipTimestamp(summary.completedAt)}
+                    {formatShortTimestamp(summary.completedAt, settings.use24HourTimestamps)}
                   </span>
                 </div>
               </div>

apps/web/src/components/PlanSidebar.tsx

@@ -12,9 +12,9 @@ import {
   PanelRightCloseIcon,
 } from "lucide-react";
 import { cn } from "~/lib/utils";
-import { formatTimestamp } from "../session-logic";
 import type { ActivePlanState } from "../session-logic";
 import type { LatestProposedPlanState } from "../session-logic";
+import { formatTimestamp } from "../timestampFormat";
 import {
   proposedPlanTitle,
   buildProposedPlanMarkdownFilename,
@@ -53,6 +53,7 @@ interface PlanSidebarProps {
   activeProposedPlan: LatestProposedPlanState | null;
   markdownCwd: string | undefined;
   workspaceRoot: string | undefined;
+  use24HourTimestamps: boolean;
   onClose: () => void;
 }
 
@@ -61,6 +62,7 @@ const PlanSidebar = memo(function PlanSidebar({
   activeProposedPlan,
   markdownCwd,
   workspaceRoot,
+  use24HourTimestamps,
   onClose,
 }: PlanSidebarProps) {
   const [proposedPlanExpanded, setProposedPlanExpanded] = useState(false);
@@ -145,7 +147,7 @@ const PlanSidebar = memo(function PlanSidebar({
           </Badge>
           {activePlan ? (
             <span className="text-[11px] text-muted-foreground/60">
-              {formatTimestamp(activePlan.createdAt)}
+              {formatTimestamp(activePlan.createdAt, use24HourTimestamps)}
             </span>
           ) : null}
         </div>

apps/web/src/components/chat/MessagesTimeline.tsx

@@ -5,7 +5,7 @@ import {
   type VirtualItem,
   useVirtualizer,
 } from "@tanstack/react-virtual";
-import { deriveTimelineEntries, formatElapsed, formatTimestamp } from "../../session-logic";
+import { deriveTimelineEntries, formatElapsed } from "../../session-logic";
 import { AUTO_SCROLL_BOTTOM_THRESHOLD_PX } from "../../chat-scroll";
 import { type TurnDiffSummary } from "../../types";
 import { summarizeTurnDiffStats } from "../../lib/turnDiffTree";
@@ -20,6 +20,7 @@ import { ChangedFilesTree } from "./ChangedFilesTree";
 import { DiffStatLabel, hasNonZeroStat } from "./DiffStatLabel";
 import { MessageCopyButton } from "./MessageCopyButton";
 import { computeMessageDurationStart } from "./MessagesTimeline.logic";
+import { formatTimestamp } from "../../timestampFormat";
 
 const MAX_VISIBLE_WORK_LOG_ENTRIES = 6;
 const ALWAYS_UNVIRTUALIZED_TAIL_ROWS = 8;
@@ -44,6 +45,7 @@ interface MessagesTimelineProps {
   onImageExpand: (preview: ExpandedImagePreview) => void;
   markdownCwd: string | undefined;
   resolvedTheme: "light" | "dark";
+  use24HourTimestamps: boolean;
   workspaceRoot: string | undefined;
 }
 
@@ -67,6 +69,7 @@ export const MessagesTimeline = memo(function MessagesTimeline({
   onImageExpand,
   markdownCwd,
   resolvedTheme,
+  use24HourTimestamps,
   workspaceRoot,
 }: MessagesTimelineProps) {
   const timelineRootRef = useRef<HTMLDivElement | null>(null);
@@ -424,7 +427,7 @@ export const MessagesTimeline = memo(function MessagesTimeline({
                     )}
                   </div>
                   <p className="text-right text-[10px] text-muted-foreground/30">
-                    {formatTimestamp(row.message.createdAt)}
+                    {formatTimestamp(row.message.createdAt, use24HourTimestamps)}
                   </p>
                 </div>
               </div>
@@ -515,6 +518,7 @@ export const MessagesTimeline = memo(function MessagesTimeline({
                     row.message.streaming
                       ? formatElapsed(row.durationStart, nowIso)
                       : formatElapsed(row.durationStart, row.message.completedAt),
+                    use24HourTimestamps,
                   )}
                 </p>
               </div>
@@ -650,9 +654,13 @@ function formatWorkingTimer(startIso: string, endIso: string): string | null {
   return seconds > 0 ? `${minutes}m ${seconds}s` : `${minutes}m`;
 }
 
-function formatMessageMeta(createdAt: string, duration: string | null): string {
-  if (!duration) return formatTimestamp(createdAt);
-  return `${formatTimestamp(createdAt)} • ${duration}`;
+function formatMessageMeta(
+  createdAt: string,
+  duration: string | null,
+  use24HourTimestamps: boolean,
+): string {
+  if (!duration) return formatTimestamp(createdAt, use24HourTimestamps);
+  return `${formatTimestamp(createdAt, use24HourTimestamps)} • ${duration}`;
 }
 
 function workToneClass(tone: "thinking" | "tool" | "info" | "error"): string {

apps/web/src/routes/_chat.settings.tsx

@@ -210,43 +210,79 @@ function SettingsRouteView() {
               <div className="mb-4">
                 <h2 className="text-sm font-medium text-foreground">Appearance</h2>
                 <p className="mt-1 text-xs text-muted-foreground">
-                  Choose how T3 Code handles light and dark mode.
+                  Choose how T3 Code looks across the app.
                 </p>
               </div>
 
-              <div className="space-y-2" role="radiogroup" aria-label="Theme preference">
-                {THEME_OPTIONS.map((option) => {
-                  const selected = theme === option.value;
-                  return (
-                    <button
-                      key={option.value}
-                      type="button"
-                      role="radio"
-                      aria-checked={selected}
-                      className={`flex w-full items-start justify-between rounded-lg border px-3 py-2 text-left transition-colors ${
-                        selected
-                          ? "border-primary/60 bg-primary/8 text-foreground"
-                          : "border-border bg-background text-muted-foreground hover:bg-accent"
-                      }`}
-                      onClick={() => setTheme(option.value)}
-                    >
-                      <span className="flex flex-col">
-                        <span className="text-sm font-medium">{option.label}</span>
-                        <span className="text-xs">{option.description}</span>
-                      </span>
-                      {selected ? (
-                        <span className="rounded bg-primary/14 px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-primary">
-                          Selected
+              <div className="space-y-4">
+                <div className="space-y-2" role="radiogroup" aria-label="Theme preference">
+                  {THEME_OPTIONS.map((option) => {
+                    const selected = theme === option.value;
+                    return (
+                      <button
+                        key={option.value}
+                        type="button"
+                        role="radio"
+                        aria-checked={selected}
+                        className={`flex w-full items-start justify-between rounded-lg border px-3 py-2 text-left transition-colors ${
+                          selected
+                            ? "border-primary/60 bg-primary/8 text-foreground"
+                            : "border-border bg-background text-muted-foreground hover:bg-accent"
+                        }`}
+                        onClick={() => setTheme(option.value)}
+                      >
+                        <span className="flex flex-col">
+                          <span className="text-sm font-medium">{option.label}</span>
+                          <span className="text-xs">{option.description}</span>
                         </span>
-                      ) : null}
-                    </button>
-                  );
-                })}
-              </div>
+                        {selected ? (
+                          <span className="rounded bg-primary/14 px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-primary">
+                            Selected
+                          </span>
+                        ) : null}
+                      </button>
+                    );
+                  })}
+                </div>
 
-              <p className="mt-4 text-xs text-muted-foreground">
-                Active theme: <span className="font-medium text-foreground">{resolvedTheme}</span>
-              </p>
+                <p className="text-xs text-muted-foreground">
+                  Active theme: <span className="font-medium text-foreground">{resolvedTheme}</span>
+                </p>
+
+                <div className="flex items-center justify-between rounded-lg border border-border bg-background px-3 py-2">
+                  <div>
+                    <p className="text-sm font-medium text-foreground">Use 24-hour timestamps</p>
+                    <p className="text-xs text-muted-foreground">
+                      Show times like <code>13:42:09</code> instead of <code>1:42:09 PM</code>.
+                    </p>
+                  </div>
+                  <Switch
+                    checked={settings.use24HourTimestamps}
+                    onCheckedChange={(checked) =>
+                      updateSettings({
+                        use24HourTimestamps: Boolean(checked),
+                      })
+                    }
+                    aria-label="Use 24-hour timestamps"
+                  />
+                </div>
+
+                {settings.use24HourTimestamps !== defaults.use24HourTimestamps ? (
+                  <div className="flex justify-end">
+                    <Button
+                      size="xs"
+                      variant="outline"
+                      onClick={() =>
+                        updateSettings({
+                          use24HourTimestamps: defaults.use24HourTimestamps,
+                        })
+                      }
+                    >
+                      Restore default
+                    </Button>
+                  </div>
+                ) : null}
+              </div>
             </section>
 
             <section className="rounded-2xl border border-border bg-card p-5">

apps/web/src/session-logic.ts

@@ -89,14 +89,6 @@ export type TimelineEntry =
       entry: WorkLogEntry;
     };
 
-export function formatTimestamp(isoDate: string): string {
-  return new Intl.DateTimeFormat(undefined, {
-    hour: "numeric",
-    minute: "2-digit",
-    second: "2-digit",
-  }).format(new Date(isoDate));
-}
-
 export function formatDuration(durationMs: number): string {
   if (!Number.isFinite(durationMs) || durationMs < 0) return "0ms";
   if (durationMs < 1_000) return `${Math.max(1, Math.round(durationMs))}ms`;

apps/web/src/timestampFormat.test.ts

@@ -0,0 +1,22 @@
+import { describe, expect, it } from "vitest";
+
+import { getTimestampFormatOptions } from "./timestampFormat";
+
+describe("getTimestampFormatOptions", () => {
+  it("builds a 12-hour formatter with seconds when requested", () => {
+    expect(getTimestampFormatOptions(false, true)).toEqual({
+      hour: "numeric",
+      minute: "2-digit",
+      second: "2-digit",
+      hour12: true,
+    });
+  });
+
+  it("builds a 24-hour formatter without seconds when requested", () => {
+    expect(getTimestampFormatOptions(true, false)).toEqual({
+      hour: "numeric",
+      minute: "2-digit",
+      hour12: false,
+    });
+  });
+});

apps/web/src/timestampFormat.ts

@@ -0,0 +1,36 @@
+export function getTimestampFormatOptions(
+  use24Hour: boolean,
+  includeSeconds: boolean,
+): Intl.DateTimeFormatOptions {
+  return {
+    hour: "numeric",
+    minute: "2-digit",
+    ...(includeSeconds ? { second: "2-digit" } : {}),
+    hour12: !use24Hour,
+  };
+}
+
+const timestampFormatterCache = new Map<string, Intl.DateTimeFormat>();
+
+function getTimestampFormatter(use24Hour: boolean, includeSeconds: boolean): Intl.DateTimeFormat {
+  const cacheKey = `${use24Hour ? "24" : "12"}:${includeSeconds ? "seconds" : "minutes"}`;
+  const cachedFormatter = timestampFormatterCache.get(cacheKey);
+  if (cachedFormatter) {
+    return cachedFormatter;
+  }
+
+  const formatter = new Intl.DateTimeFormat(
+    undefined,
+    getTimestampFormatOptions(use24Hour, includeSeconds),
+  );
+  timestampFormatterCache.set(cacheKey, formatter);
+  return formatter;
+}
+
+export function formatTimestamp(isoDate: string, use24Hour: boolean): string {
+  return getTimestampFormatter(use24Hour, true).format(new Date(isoDate));
+}
+
+export function formatShortTimestamp(isoDate: string, use24Hour: boolean): string {
+  return getTimestampFormatter(use24Hour, false).format(new Date(isoDate));
+}