feat: Allow Overriding Timestamp Format in Settings#855

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
juliusmarminge merged 7 commits into from
Mar 12, 2026
Merged

feat: Allow Overriding Timestamp Format in Settings #855

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
17cf52d
Add 24-hour timestamp support
huxcrux Mar 10, 2026
7354746
fix(web): remove unrelated app settings refactor
huxcrux Mar 12, 2026
0eb7e8f
Move timestamp setting into appearance
huxcrux Mar 12, 2026
5633b7e
refactor(web): use string timestamp format setting
huxcrux Mar 12, 2026
9c50801
Add locale timestamp format option
huxcrux Mar 12, 2026
caccb80
Rename locale timestamp label to system default
huxcrux Mar 12, 2026
f17bf3f
Fix timestamp format select label
huxcrux Mar 12, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions apps/web/src/appSettings.test.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
import { describe, expect, it } from "vitest";

import {
DEFAULT_TIMESTAMP_FORMAT,
getAppModelOptions,
normalizeCustomModelSlugs,
resolveAppModelSelection,
Expand DownExpand Up@@ -57,3 +58,9 @@ describe("resolveAppModelSelection", () => {
expect(resolveAppModelSelection("codex", [], "")).toBe("gpt-5.4");
});
});

describe("timestamp format defaults", () => {
it("defaults timestamp format to locale", () => {
expect(DEFAULT_TIMESTAMP_FORMAT).toBe("locale");
});
});
6 changes: 6 additions & 0 deletions apps/web/src/appSettings.ts
View file
Open in desktop

@juliusmarmingejuliusmarmingeMar 12, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

looks like rebase went wrong here?

@huxcruxhuxcruxMar 12, 2026

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes you caught me in the middle of a cleanup, it should look beter now :)

Original file line numberDiff line numberDiff line change
Expand Up@@ -7,6 +7,9 @@ import { useLocalStorage } from "./hooks/useLocalStorage";
const APP_SETTINGS_STORAGE_KEY = "t3code:app-settings:v1";
const MAX_CUSTOM_MODEL_COUNT = 32;
export const MAX_CUSTOM_MODEL_LENGTH = 256;
export const TIMESTAMP_FORMAT_OPTIONS = ["locale", "12-hour", "24-hour"] as const;
export type TimestampFormat = (typeof TIMESTAMP_FORMAT_OPTIONS)[number];
export const DEFAULT_TIMESTAMP_FORMAT: TimestampFormat = "locale";
const BUILT_IN_MODEL_SLUGS_BY_PROVIDER: Record<ProviderKind, ReadonlySet<string>> = {
codex: new Set(getModelOptions("codex").map((option) => option.slug)),
};
Expand All@@ -22,6 +25,9 @@ const AppSettingsSchema = Schema.Struct({
enableAssistantStreaming: Schema.Boolean.pipe(
Schema.withConstructorDefault(() => Option.some(false)),
),
timestampFormat: Schema.Literals(["locale", "12-hour", "24-hour"]).pipe(
Schema.withConstructorDefault(() => Option.some(DEFAULT_TIMESTAMP_FORMAT)),
),
customCodexModels: Schema.Array(Schema.String).pipe(
Schema.withConstructorDefault(() => Option.some([])),
),
Expand Down
3 changes: 3 additions & 0 deletions apps/web/src/components/ChatView.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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 timestampFormat = settings.timestampFormat;
const navigate = useNavigate();
const rawSearch = useSearch({
strict: false,
Expand DownExpand Up@@ -3244,6 +3245,7 @@ export default function ChatView({ threadId }: ChatViewProps) {
onImageExpand={onExpandTimelineImage}
markdownCwd={gitCwd ?? undefined}
resolvedTheme={resolvedTheme}
timestampFormat={timestampFormat}
workspaceRoot={activeProject?.cwd ?? undefined}
/>
</div>
Expand DownExpand Up@@ -3764,6 +3766,7 @@ export default function ChatView({ threadId }: ChatViewProps) {
activeProposedPlan={activeProposedPlan}
markdownCwd={gitCwd ?? undefined}
workspaceRoot={activeProject?.cwd ?? undefined}
timestampFormat={timestampFormat}
onClose={() => {
setPlanSidebarOpen(false);
// Track that the user explicitly dismissed for this turn so auto-open won't fight them.
Expand Down
12 changes: 4 additions & 8 deletions apps/web/src/components/DiffPanel.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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";
Expand DownExpand Up@@ -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";
}
Expand All@@ -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);
Expand DownExpand Up@@ -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.timestampFormat)}
</span>
</div>
</div>
Expand Down
7 changes: 5 additions & 2 deletions apps/web/src/components/PlanSidebar.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
import { memo, useState, useCallback, useRef, useEffect } from "react";
import { type TimestampFormat } from "../appSettings";
import { Badge } from "./ui/badge";
import { Button } from "./ui/button";
import { ScrollArea } from "./ui/scroll-area";
Expand All@@ -12,9 +13,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,
Expand DownExpand Up@@ -53,6 +54,7 @@ interface PlanSidebarProps {
activeProposedPlan: LatestProposedPlanState | null;
markdownCwd: string | undefined;
workspaceRoot: string | undefined;
timestampFormat: TimestampFormat;
onClose: () => void;
}

Expand All@@ -61,6 +63,7 @@ const PlanSidebar = memo(function PlanSidebar({
activeProposedPlan,
markdownCwd,
workspaceRoot,
timestampFormat,
onClose,
}: PlanSidebarProps) {
const [proposedPlanExpanded, setProposedPlanExpanded] = useState(false);
Expand DownExpand Up@@ -145,7 +148,7 @@ const PlanSidebar = memo(function PlanSidebar({
</Badge>
{activePlan ? (
<span className="text-[11px] text-muted-foreground/60">
{formatTimestamp(activePlan.createdAt)}
{formatTimestamp(activePlan.createdAt, timestampFormat)}
</span>
) : null}
</div>
Expand Down
19 changes: 14 additions & 5 deletions apps/web/src/components/chat/MessagesTimeline.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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";
Expand All@@ -20,6 +20,8 @@ import { ChangedFilesTree } from "./ChangedFilesTree";
import { DiffStatLabel, hasNonZeroStat } from "./DiffStatLabel";
import { MessageCopyButton } from "./MessageCopyButton";
import { computeMessageDurationStart } from "./MessagesTimeline.logic";
import { type TimestampFormat } from "../../appSettings";
import { formatTimestamp } from "../../timestampFormat";

const MAX_VISIBLE_WORK_LOG_ENTRIES = 6;
const ALWAYS_UNVIRTUALIZED_TAIL_ROWS = 8;
Expand All@@ -44,6 +46,7 @@ interface MessagesTimelineProps {
onImageExpand: (preview: ExpandedImagePreview) => void;
markdownCwd: string | undefined;
resolvedTheme: "light" | "dark";
timestampFormat: TimestampFormat;
workspaceRoot: string | undefined;
}

Expand All@@ -67,6 +70,7 @@ export const MessagesTimeline = memo(function MessagesTimeline({
onImageExpand,
markdownCwd,
resolvedTheme,
timestampFormat,
workspaceRoot,
}: MessagesTimelineProps) {
const timelineRootRef = useRef<HTMLDivElement | null>(null);
Expand DownExpand Up@@ -424,7 +428,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, timestampFormat)}
</p>
</div>
</div>
Expand DownExpand Up@@ -515,6 +519,7 @@ export const MessagesTimeline = memo(function MessagesTimeline({
row.message.streaming
? formatElapsed(row.durationStart, nowIso)
: formatElapsed(row.durationStart, row.message.completedAt),
timestampFormat,
)}
</p>
</div>
Expand DownExpand Up@@ -650,9 +655,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,
timestampFormat: TimestampFormat,
): string {
if (!duration) return formatTimestamp(createdAt, timestampFormat);
return `${formatTimestamp(createdAt, timestampFormat)} • ${duration}`;
}

function workToneClass(tone: "thinking" | "tool" | "info" | "error"): string {
Expand Down
123 changes: 91 additions & 32 deletions apps/web/src/routes/_chat.settings.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -11,6 +11,13 @@ import { serverConfigQueryOptions } from "../lib/serverReactQuery";
import { ensureNativeApi } from "../nativeApi";
import { Button } from "../components/ui/button";
import { Input } from "../components/ui/input";
import {
Select,
SelectItem,
SelectPopup,
SelectTrigger,
SelectValue,
} from "../components/ui/select";
import { Switch } from "../components/ui/switch";
import { APP_VERSION } from "../branding";
import { SidebarInset } from "~/components/ui/sidebar";
Expand DownExpand Up@@ -49,6 +56,12 @@ const MODEL_PROVIDER_SETTINGS: Array<{
},
] as const;

const TIMESTAMP_FORMAT_LABELS = {
locale: "System default",
"12-hour": "12-hour",
"24-hour": "24-hour",
} as const;

function getCustomModelsForProvider(
settings: ReturnType<typeof useAppSettings>["settings"],
provider: ProviderKind,
Expand DownExpand Up@@ -210,43 +223,89 @@ 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">Timestamp format</p>
<p className="text-xs text-muted-foreground">
System default follows your browser or OS time format. <code>12-hour</code>{" "}
and <code>24-hour</code> force the hour cycle.
</p>
</div>
<Select
value={settings.timestampFormat}
onValueChange={(value) => {
if (value !== "locale" && value !== "12-hour" && value !== "24-hour") return;
updateSettings({
timestampFormat: value,
});
}}
>
<SelectTrigger className="w-40" aria-label="Timestamp format">
<SelectValue>{TIMESTAMP_FORMAT_LABELS[settings.timestampFormat]}</SelectValue>
</SelectTrigger>
<SelectPopup align="end">
<SelectItem value="locale">{TIMESTAMP_FORMAT_LABELS.locale}</SelectItem>
<SelectItem value="12-hour">{TIMESTAMP_FORMAT_LABELS["12-hour"]}</SelectItem>
<SelectItem value="24-hour">{TIMESTAMP_FORMAT_LABELS["24-hour"]}</SelectItem>
</SelectPopup>
</Select>
</div>

{settings.timestampFormat !== defaults.timestampFormat ? (
<div className="flex justify-end">
<Button
size="xs"
variant="outline"
onClick={() =>
updateSettings({
timestampFormat: defaults.timestampFormat,
})
}
>
Restore default
</Button>
</div>
) : null}
</div>
</section>

<section className="rounded-2xl border border-border bg-card p-5">
Expand Down
8 changes: 0 additions & 8 deletions apps/web/src/session-logic.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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`;
Expand Down
Loading
Loading
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
feat: Allow Overriding Timestamp Format in Settings#855

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

juliusmarminge
merged 7 commits into

from

Mar 12, 2026
 Merged


feat: Allow Overriding Timestamp Format in Settings
#855
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


7 commits


Select commit
Hold shift + click to select a range
17cf52d

Add 24-hour timestamp support


huxcrux Mar 10, 2026
7354746

fix(web): remove unrelated app settings refactor


huxcrux Mar 12, 2026
0eb7e8f

Move timestamp setting into appearance


huxcrux Mar 12, 2026
5633b7e

refactor(web): use string timestamp format setting


huxcrux Mar 12, 2026
9c50801

Add locale timestamp format option


huxcrux Mar 12, 2026
caccb80

Rename locale timestamp label to system default


huxcrux Mar 12, 2026
f17bf3f

Fix timestamp format select label


huxcrux Mar 12, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


7 changes: 7 additions & 0 deletions
apps/web/src/appSettings.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
import { describe, expect, it } from "vitest";

import {
 DEFAULT_TIMESTAMP_FORMAT,
 getAppModelOptions,
 normalizeCustomModelSlugs,
 resolveAppModelSelection,
Expand DownExpand Up@@ -57,3 +58,9 @@ describe("resolveAppModelSelection", () => {
 expect(resolveAppModelSelection("codex", [], "")).toBe("gpt-5.4");
 });
});

describe("timestamp format defaults", () => {
 it("defaults timestamp format to locale", () => {
 expect(DEFAULT_TIMESTAMP_FORMAT).toBe("locale");
 });
});

6 changes: 6 additions & 0 deletions
apps/web/src/appSettings.ts

View file


Open in desktop

@juliusmarmingejuliusmarmingeMar 12, 2026

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

looks like rebase went wrong here?
@huxcruxhuxcruxMar 12, 2026

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes you caught me in the middle of a cleanup, it should look beter now :)
Original file line numberDiff line numberDiff line change
Expand Up@@ -7,6 +7,9 @@ import { useLocalStorage } from "./hooks/useLocalStorage";
const APP_SETTINGS_STORAGE_KEY = "t3code:app-settings:v1";
const MAX_CUSTOM_MODEL_COUNT = 32;
export const MAX_CUSTOM_MODEL_LENGTH = 256;
export const TIMESTAMP_FORMAT_OPTIONS = ["locale", "12-hour", "24-hour"] as const;
export type TimestampFormat = (typeof TIMESTAMP_FORMAT_OPTIONS)[number];
export const DEFAULT_TIMESTAMP_FORMAT: TimestampFormat = "locale";
const BUILT_IN_MODEL_SLUGS_BY_PROVIDER: Record<ProviderKind, ReadonlySet<string>> = {
 codex: new Set(getModelOptions("codex").map((option) => option.slug)),
};
Expand All@@ -22,6 +25,9 @@ const AppSettingsSchema = Schema.Struct({
 enableAssistantStreaming: Schema.Boolean.pipe(
 Schema.withConstructorDefault(() => Option.some(false)),
 ),
 timestampFormat: Schema.Literals(["locale", "12-hour", "24-hour"]).pipe(
 Schema.withConstructorDefault(() => Option.some(DEFAULT_TIMESTAMP_FORMAT)),
 ),
 customCodexModels: Schema.Array(Schema.String).pipe(
 Schema.withConstructorDefault(() => Option.some([])),
 ),
Expand Down

3 changes: 3 additions & 0 deletions
apps/web/src/components/ChatView.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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 timestampFormat = settings.timestampFormat;
 const navigate = useNavigate();
 const rawSearch = useSearch({
 strict: false,
Expand DownExpand Up@@ -3244,6 +3245,7 @@ export default function ChatView({ threadId }: ChatViewProps) {
 onImageExpand={onExpandTimelineImage}
 markdownCwd={gitCwd ?? undefined}
 resolvedTheme={resolvedTheme}
 timestampFormat={timestampFormat}
 workspaceRoot={activeProject?.cwd ?? undefined}
 />
 </div>
Expand DownExpand Up@@ -3764,6 +3766,7 @@ export default function ChatView({ threadId }: ChatViewProps) {
 activeProposedPlan={activeProposedPlan}
 markdownCwd={gitCwd ?? undefined}
 workspaceRoot={activeProject?.cwd ?? undefined}
 timestampFormat={timestampFormat}
 onClose={() => {
 setPlanSidebarOpen(false);
 // Track that the user explicitly dismissed for this turn so auto-open won't fight them.
Expand Down

12 changes: 4 additions & 8 deletions
apps/web/src/components/DiffPanel.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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";
Expand DownExpand Up@@ -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";
}
Expand All@@ -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);
Expand DownExpand Up@@ -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.timestampFormat)}
 </span>
 </div>
 </div>
Expand Down

7 changes: 5 additions & 2 deletions
apps/web/src/components/PlanSidebar.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
import { memo, useState, useCallback, useRef, useEffect } from "react";
import { type TimestampFormat } from "../appSettings";
import { Badge } from "./ui/badge";
import { Button } from "./ui/button";
import { ScrollArea } from "./ui/scroll-area";
Expand All@@ -12,9 +13,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,
Expand DownExpand Up@@ -53,6 +54,7 @@ interface PlanSidebarProps {
 activeProposedPlan: LatestProposedPlanState | null;
 markdownCwd: string | undefined;
 workspaceRoot: string | undefined;
 timestampFormat: TimestampFormat;
 onClose: () => void;
}

Expand All@@ -61,6 +63,7 @@ const PlanSidebar = memo(function PlanSidebar({
 activeProposedPlan,
 markdownCwd,
 workspaceRoot,
 timestampFormat,
 onClose,
}: PlanSidebarProps) {
 const [proposedPlanExpanded, setProposedPlanExpanded] = useState(false);
Expand DownExpand Up@@ -145,7 +148,7 @@ const PlanSidebar = memo(function PlanSidebar({
 </Badge>
 {activePlan ? (
 <span className="text-[11px] text-muted-foreground/60">
 {formatTimestamp(activePlan.createdAt)}
 {formatTimestamp(activePlan.createdAt, timestampFormat)}
 </span>
 ) : null}
 </div>
Expand Down

19 changes: 14 additions & 5 deletions
apps/web/src/components/chat/MessagesTimeline.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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";
Expand All@@ -20,6 +20,8 @@ import { ChangedFilesTree } from "./ChangedFilesTree";
import { DiffStatLabel, hasNonZeroStat } from "./DiffStatLabel";
import { MessageCopyButton } from "./MessageCopyButton";
import { computeMessageDurationStart } from "./MessagesTimeline.logic";
import { type TimestampFormat } from "../../appSettings";
import { formatTimestamp } from "../../timestampFormat";

const MAX_VISIBLE_WORK_LOG_ENTRIES = 6;
const ALWAYS_UNVIRTUALIZED_TAIL_ROWS = 8;
Expand All@@ -44,6 +46,7 @@ interface MessagesTimelineProps {
 onImageExpand: (preview: ExpandedImagePreview) => void;
 markdownCwd: string | undefined;
 resolvedTheme: "light" | "dark";
 timestampFormat: TimestampFormat;
 workspaceRoot: string | undefined;
}

Expand All@@ -67,6 +70,7 @@ export const MessagesTimeline = memo(function MessagesTimeline({
 onImageExpand,
 markdownCwd,
 resolvedTheme,
 timestampFormat,
 workspaceRoot,
}: MessagesTimelineProps) {
 const timelineRootRef = useRef<HTMLDivElement | null>(null);
Expand DownExpand Up@@ -424,7 +428,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, timestampFormat)}
 </p>
 </div>
 </div>
Expand DownExpand Up@@ -515,6 +519,7 @@ export const MessagesTimeline = memo(function MessagesTimeline({
 row.message.streaming
 ? formatElapsed(row.durationStart, nowIso)
 : formatElapsed(row.durationStart, row.message.completedAt),
 timestampFormat,
 )}
 </p>
 </div>
Expand DownExpand Up@@ -650,9 +655,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,
 timestampFormat: TimestampFormat,
): string {
 if (!duration) return formatTimestamp(createdAt, timestampFormat);
 return `${formatTimestamp(createdAt, timestampFormat)} • ${duration}`;
}

function workToneClass(tone: "thinking" | "tool" | "info" | "error"): string {
Expand Down

123 changes: 91 additions & 32 deletions
apps/web/src/routes/_chat.settings.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -11,6 +11,13 @@ import { serverConfigQueryOptions } from "../lib/serverReactQuery";
import { ensureNativeApi } from "../nativeApi";
import { Button } from "../components/ui/button";
import { Input } from "../components/ui/input";
import {
 Select,
 SelectItem,
 SelectPopup,
 SelectTrigger,
 SelectValue,
} from "../components/ui/select";
import { Switch } from "../components/ui/switch";
import { APP_VERSION } from "../branding";
import { SidebarInset } from "~/components/ui/sidebar";
Expand DownExpand Up@@ -49,6 +56,12 @@ const MODEL_PROVIDER_SETTINGS: Array<{
 },
] as const;

const TIMESTAMP_FORMAT_LABELS = {
 locale: "System default",
 "12-hour": "12-hour",
 "24-hour": "24-hour",
} as const;

function getCustomModelsForProvider(
 settings: ReturnType<typeof useAppSettings>["settings"],
 provider: ProviderKind,
Expand DownExpand Up@@ -210,43 +223,89 @@ 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">Timestamp format</p>
 <p className="text-xs text-muted-foreground">
 System default follows your browser or OS time format. <code>12-hour</code>{" "}
 and <code>24-hour</code> force the hour cycle.
 </p>
 </div>
 <Select
 value={settings.timestampFormat}
 onValueChange={(value) => {
 if (value !== "locale" && value !== "12-hour" && value !== "24-hour") return;
 updateSettings({
 timestampFormat: value,
 });
 }}
 >
 <SelectTrigger className="w-40" aria-label="Timestamp format">
 <SelectValue>{TIMESTAMP_FORMAT_LABELS[settings.timestampFormat]}</SelectValue>
 </SelectTrigger>
 <SelectPopup align="end">
 <SelectItem value="locale">{TIMESTAMP_FORMAT_LABELS.locale}</SelectItem>
 <SelectItem value="12-hour">{TIMESTAMP_FORMAT_LABELS["12-hour"]}</SelectItem>
 <SelectItem value="24-hour">{TIMESTAMP_FORMAT_LABELS["24-hour"]}</SelectItem>
 </SelectPopup>
 </Select>
 </div>

 {settings.timestampFormat !== defaults.timestampFormat ? (
 <div className="flex justify-end">
 <Button
 size="xs"
 variant="outline"
 onClick={() =>
 updateSettings({
 timestampFormat: defaults.timestampFormat,
 })
 }
 >
 Restore default
 </Button>
 </div>
 ) : null}
 </div>
 </section>

 <section className="rounded-2xl border border-border bg-card p-5">
Expand Down

8 changes: 0 additions & 8 deletions
apps/web/src/session-logic.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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`;
Expand Down
Loading
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
feat: Allow Overriding Timestamp Format in Settings#855

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

juliusmarminge
merged 7 commits into

from

Mar 12, 2026
 Merged


feat: Allow Overriding Timestamp Format in Settings
#855
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


7 commits


Select commit
Hold shift + click to select a range
17cf52d

Add 24-hour timestamp support


huxcrux Mar 10, 2026
7354746

fix(web): remove unrelated app settings refactor


huxcrux Mar 12, 2026
0eb7e8f

Move timestamp setting into appearance


huxcrux Mar 12, 2026
5633b7e

refactor(web): use string timestamp format setting


huxcrux Mar 12, 2026
9c50801

Add locale timestamp format option


huxcrux Mar 12, 2026
caccb80

Rename locale timestamp label to system default


huxcrux Mar 12, 2026
f17bf3f

Fix timestamp format select label


huxcrux Mar 12, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


7 changes: 7 additions & 0 deletions
apps/web/src/appSettings.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
import { describe, expect, it } from "vitest";

import {
 DEFAULT_TIMESTAMP_FORMAT,
 getAppModelOptions,
 normalizeCustomModelSlugs,
 resolveAppModelSelection,
Expand DownExpand Up@@ -57,3 +58,9 @@ describe("resolveAppModelSelection", () => {
 expect(resolveAppModelSelection("codex", [], "")).toBe("gpt-5.4");
 });
});

describe("timestamp format defaults", () => {
 it("defaults timestamp format to locale", () => {
 expect(DEFAULT_TIMESTAMP_FORMAT).toBe("locale");
 });
});

6 changes: 6 additions & 0 deletions
apps/web/src/appSettings.ts

View file


Open in desktop

@juliusmarmingejuliusmarmingeMar 12, 2026

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

looks like rebase went wrong here?
@huxcruxhuxcruxMar 12, 2026

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes you caught me in the middle of a cleanup, it should look beter now :)
Original file line numberDiff line numberDiff line change
Expand Up@@ -7,6 +7,9 @@ import { useLocalStorage } from "./hooks/useLocalStorage";
const APP_SETTINGS_STORAGE_KEY = "t3code:app-settings:v1";
const MAX_CUSTOM_MODEL_COUNT = 32;
export const MAX_CUSTOM_MODEL_LENGTH = 256;
export const TIMESTAMP_FORMAT_OPTIONS = ["locale", "12-hour", "24-hour"] as const;
export type TimestampFormat = (typeof TIMESTAMP_FORMAT_OPTIONS)[number];
export const DEFAULT_TIMESTAMP_FORMAT: TimestampFormat = "locale";
const BUILT_IN_MODEL_SLUGS_BY_PROVIDER: Record<ProviderKind, ReadonlySet<string>> = {
 codex: new Set(getModelOptions("codex").map((option) => option.slug)),
};
Expand All@@ -22,6 +25,9 @@ const AppSettingsSchema = Schema.Struct({
 enableAssistantStreaming: Schema.Boolean.pipe(
 Schema.withConstructorDefault(() => Option.some(false)),
 ),
 timestampFormat: Schema.Literals(["locale", "12-hour", "24-hour"]).pipe(
 Schema.withConstructorDefault(() => Option.some(DEFAULT_TIMESTAMP_FORMAT)),
 ),
 customCodexModels: Schema.Array(Schema.String).pipe(
 Schema.withConstructorDefault(() => Option.some([])),
 ),
Expand Down

3 changes: 3 additions & 0 deletions
apps/web/src/components/ChatView.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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 timestampFormat = settings.timestampFormat;
 const navigate = useNavigate();
 const rawSearch = useSearch({
 strict: false,
Expand DownExpand Up@@ -3244,6 +3245,7 @@ export default function ChatView({ threadId }: ChatViewProps) {
 onImageExpand={onExpandTimelineImage}
 markdownCwd={gitCwd ?? undefined}
 resolvedTheme={resolvedTheme}
 timestampFormat={timestampFormat}
 workspaceRoot={activeProject?.cwd ?? undefined}
 />
 </div>
Expand DownExpand Up@@ -3764,6 +3766,7 @@ export default function ChatView({ threadId }: ChatViewProps) {
 activeProposedPlan={activeProposedPlan}
 markdownCwd={gitCwd ?? undefined}
 workspaceRoot={activeProject?.cwd ?? undefined}
 timestampFormat={timestampFormat}
 onClose={() => {
 setPlanSidebarOpen(false);
 // Track that the user explicitly dismissed for this turn so auto-open won't fight them.
Expand Down

12 changes: 4 additions & 8 deletions
apps/web/src/components/DiffPanel.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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";
Expand DownExpand Up@@ -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";
}
Expand All@@ -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);
Expand DownExpand Up@@ -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.timestampFormat)}
 </span>
 </div>
 </div>
Expand Down

7 changes: 5 additions & 2 deletions
apps/web/src/components/PlanSidebar.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
import { memo, useState, useCallback, useRef, useEffect } from "react";
import { type TimestampFormat } from "../appSettings";
import { Badge } from "./ui/badge";
import { Button } from "./ui/button";
import { ScrollArea } from "./ui/scroll-area";
Expand All@@ -12,9 +13,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,
Expand DownExpand Up@@ -53,6 +54,7 @@ interface PlanSidebarProps {
 activeProposedPlan: LatestProposedPlanState | null;
 markdownCwd: string | undefined;
 workspaceRoot: string | undefined;
 timestampFormat: TimestampFormat;
 onClose: () => void;
}

Expand All@@ -61,6 +63,7 @@ const PlanSidebar = memo(function PlanSidebar({
 activeProposedPlan,
 markdownCwd,
 workspaceRoot,
 timestampFormat,
 onClose,
}: PlanSidebarProps) {
 const [proposedPlanExpanded, setProposedPlanExpanded] = useState(false);
Expand DownExpand Up@@ -145,7 +148,7 @@ const PlanSidebar = memo(function PlanSidebar({
 </Badge>
 {activePlan ? (
 <span className="text-[11px] text-muted-foreground/60">
 {formatTimestamp(activePlan.createdAt)}
 {formatTimestamp(activePlan.createdAt, timestampFormat)}
 </span>
 ) : null}
 </div>
Expand Down

19 changes: 14 additions & 5 deletions
apps/web/src/components/chat/MessagesTimeline.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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";
Expand All@@ -20,6 +20,8 @@ import { ChangedFilesTree } from "./ChangedFilesTree";
import { DiffStatLabel, hasNonZeroStat } from "./DiffStatLabel";
import { MessageCopyButton } from "./MessageCopyButton";
import { computeMessageDurationStart } from "./MessagesTimeline.logic";
import { type TimestampFormat } from "../../appSettings";
import { formatTimestamp } from "../../timestampFormat";

const MAX_VISIBLE_WORK_LOG_ENTRIES = 6;
const ALWAYS_UNVIRTUALIZED_TAIL_ROWS = 8;
Expand All@@ -44,6 +46,7 @@ interface MessagesTimelineProps {
 onImageExpand: (preview: ExpandedImagePreview) => void;
 markdownCwd: string | undefined;
 resolvedTheme: "light" | "dark";
 timestampFormat: TimestampFormat;
 workspaceRoot: string | undefined;
}

Expand All@@ -67,6 +70,7 @@ export const MessagesTimeline = memo(function MessagesTimeline({
 onImageExpand,
 markdownCwd,
 resolvedTheme,
 timestampFormat,
 workspaceRoot,
}: MessagesTimelineProps) {
 const timelineRootRef = useRef<HTMLDivElement | null>(null);
Expand DownExpand Up@@ -424,7 +428,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, timestampFormat)}
 </p>
 </div>
 </div>
Expand DownExpand Up@@ -515,6 +519,7 @@ export const MessagesTimeline = memo(function MessagesTimeline({
 row.message.streaming
 ? formatElapsed(row.durationStart, nowIso)
 : formatElapsed(row.durationStart, row.message.completedAt),
 timestampFormat,
 )}
 </p>
 </div>
Expand DownExpand Up@@ -650,9 +655,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,
 timestampFormat: TimestampFormat,
): string {
 if (!duration) return formatTimestamp(createdAt, timestampFormat);
 return `${formatTimestamp(createdAt, timestampFormat)} • ${duration}`;
}

function workToneClass(tone: "thinking" | "tool" | "info" | "error"): string {
Expand Down

123 changes: 91 additions & 32 deletions
apps/web/src/routes/_chat.settings.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -11,6 +11,13 @@ import { serverConfigQueryOptions } from "../lib/serverReactQuery";
import { ensureNativeApi } from "../nativeApi";
import { Button } from "../components/ui/button";
import { Input } from "../components/ui/input";
import {
 Select,
 SelectItem,
 SelectPopup,
 SelectTrigger,
 SelectValue,
} from "../components/ui/select";
import { Switch } from "../components/ui/switch";
import { APP_VERSION } from "../branding";
import { SidebarInset } from "~/components/ui/sidebar";
Expand DownExpand Up@@ -49,6 +56,12 @@ const MODEL_PROVIDER_SETTINGS: Array<{
 },
] as const;

const TIMESTAMP_FORMAT_LABELS = {
 locale: "System default",
 "12-hour": "12-hour",
 "24-hour": "24-hour",
} as const;

function getCustomModelsForProvider(
 settings: ReturnType<typeof useAppSettings>["settings"],
 provider: ProviderKind,
Expand DownExpand Up@@ -210,43 +223,89 @@ 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">Timestamp format</p>
 <p className="text-xs text-muted-foreground">
 System default follows your browser or OS time format. <code>12-hour</code>{" "}
 and <code>24-hour</code> force the hour cycle.
 </p>
 </div>
 <Select
 value={settings.timestampFormat}
 onValueChange={(value) => {
 if (value !== "locale" && value !== "12-hour" && value !== "24-hour") return;
 updateSettings({
 timestampFormat: value,
 });
 }}
 >
 <SelectTrigger className="w-40" aria-label="Timestamp format">
 <SelectValue>{TIMESTAMP_FORMAT_LABELS[settings.timestampFormat]}</SelectValue>
 </SelectTrigger>
 <SelectPopup align="end">
 <SelectItem value="locale">{TIMESTAMP_FORMAT_LABELS.locale}</SelectItem>
 <SelectItem value="12-hour">{TIMESTAMP_FORMAT_LABELS["12-hour"]}</SelectItem>
 <SelectItem value="24-hour">{TIMESTAMP_FORMAT_LABELS["24-hour"]}</SelectItem>
 </SelectPopup>
 </Select>
 </div>

 {settings.timestampFormat !== defaults.timestampFormat ? (
 <div className="flex justify-end">
 <Button
 size="xs"
 variant="outline"
 onClick={() =>
 updateSettings({
 timestampFormat: defaults.timestampFormat,
 })
 }
 >
 Restore default
 </Button>
 </div>
 ) : null}
 </div>
 </section>

 <section className="rounded-2xl border border-border bg-card p-5">
Expand Down

8 changes: 0 additions & 8 deletions
apps/web/src/session-logic.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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`;
Expand Down
Loading
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
feat: Allow Overriding Timestamp Format in Settings#855

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

juliusmarminge
merged 7 commits into

from

Mar 12, 2026
 Merged


feat: Allow Overriding Timestamp Format in Settings
#855
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


7 commits


Select commit
Hold shift + click to select a range
17cf52d

Add 24-hour timestamp support


huxcrux Mar 10, 2026
7354746

fix(web): remove unrelated app settings refactor


huxcrux Mar 12, 2026
0eb7e8f

Move timestamp setting into appearance


huxcrux Mar 12, 2026
5633b7e

refactor(web): use string timestamp format setting


huxcrux Mar 12, 2026
9c50801

Add locale timestamp format option


huxcrux Mar 12, 2026
caccb80

Rename locale timestamp label to system default


huxcrux Mar 12, 2026
f17bf3f

Fix timestamp format select label


huxcrux Mar 12, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


7 changes: 7 additions & 0 deletions
apps/web/src/appSettings.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
import { describe, expect, it } from "vitest";

import {
 DEFAULT_TIMESTAMP_FORMAT,
 getAppModelOptions,
 normalizeCustomModelSlugs,
 resolveAppModelSelection,
Expand DownExpand Up@@ -57,3 +58,9 @@ describe("resolveAppModelSelection", () => {
 expect(resolveAppModelSelection("codex", [], "")).toBe("gpt-5.4");
 });
});

describe("timestamp format defaults", () => {
 it("defaults timestamp format to locale", () => {
 expect(DEFAULT_TIMESTAMP_FORMAT).toBe("locale");
 });
});

6 changes: 6 additions & 0 deletions
apps/web/src/appSettings.ts

View file


Open in desktop

@juliusmarmingejuliusmarmingeMar 12, 2026

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

looks like rebase went wrong here?
@huxcruxhuxcruxMar 12, 2026

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes you caught me in the middle of a cleanup, it should look beter now :)
Original file line numberDiff line numberDiff line change
Expand Up@@ -7,6 +7,9 @@ import { useLocalStorage } from "./hooks/useLocalStorage";
const APP_SETTINGS_STORAGE_KEY = "t3code:app-settings:v1";
const MAX_CUSTOM_MODEL_COUNT = 32;
export const MAX_CUSTOM_MODEL_LENGTH = 256;
export const TIMESTAMP_FORMAT_OPTIONS = ["locale", "12-hour", "24-hour"] as const;
export type TimestampFormat = (typeof TIMESTAMP_FORMAT_OPTIONS)[number];
export const DEFAULT_TIMESTAMP_FORMAT: TimestampFormat = "locale";
const BUILT_IN_MODEL_SLUGS_BY_PROVIDER: Record<ProviderKind, ReadonlySet<string>> = {
 codex: new Set(getModelOptions("codex").map((option) => option.slug)),
};
Expand All@@ -22,6 +25,9 @@ const AppSettingsSchema = Schema.Struct({
 enableAssistantStreaming: Schema.Boolean.pipe(
 Schema.withConstructorDefault(() => Option.some(false)),
 ),
 timestampFormat: Schema.Literals(["locale", "12-hour", "24-hour"]).pipe(
 Schema.withConstructorDefault(() => Option.some(DEFAULT_TIMESTAMP_FORMAT)),
 ),
 customCodexModels: Schema.Array(Schema.String).pipe(
 Schema.withConstructorDefault(() => Option.some([])),
 ),
Expand Down

3 changes: 3 additions & 0 deletions
apps/web/src/components/ChatView.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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 timestampFormat = settings.timestampFormat;
 const navigate = useNavigate();
 const rawSearch = useSearch({
 strict: false,
Expand DownExpand Up@@ -3244,6 +3245,7 @@ export default function ChatView({ threadId }: ChatViewProps) {
 onImageExpand={onExpandTimelineImage}
 markdownCwd={gitCwd ?? undefined}
 resolvedTheme={resolvedTheme}
 timestampFormat={timestampFormat}
 workspaceRoot={activeProject?.cwd ?? undefined}
 />
 </div>
Expand DownExpand Up@@ -3764,6 +3766,7 @@ export default function ChatView({ threadId }: ChatViewProps) {
 activeProposedPlan={activeProposedPlan}
 markdownCwd={gitCwd ?? undefined}
 workspaceRoot={activeProject?.cwd ?? undefined}
 timestampFormat={timestampFormat}
 onClose={() => {
 setPlanSidebarOpen(false);
 // Track that the user explicitly dismissed for this turn so auto-open won't fight them.
Expand Down

12 changes: 4 additions & 8 deletions
apps/web/src/components/DiffPanel.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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";
Expand DownExpand Up@@ -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";
}
Expand All@@ -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);
Expand DownExpand Up@@ -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.timestampFormat)}
 </span>
 </div>
 </div>
Expand Down

7 changes: 5 additions & 2 deletions
apps/web/src/components/PlanSidebar.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
import { memo, useState, useCallback, useRef, useEffect } from "react";
import { type TimestampFormat } from "../appSettings";
import { Badge } from "./ui/badge";
import { Button } from "./ui/button";
import { ScrollArea } from "./ui/scroll-area";
Expand All@@ -12,9 +13,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,
Expand DownExpand Up@@ -53,6 +54,7 @@ interface PlanSidebarProps {
 activeProposedPlan: LatestProposedPlanState | null;
 markdownCwd: string | undefined;
 workspaceRoot: string | undefined;
 timestampFormat: TimestampFormat;
 onClose: () => void;
}

Expand All@@ -61,6 +63,7 @@ const PlanSidebar = memo(function PlanSidebar({
 activeProposedPlan,
 markdownCwd,
 workspaceRoot,
 timestampFormat,
 onClose,
}: PlanSidebarProps) {
 const [proposedPlanExpanded, setProposedPlanExpanded] = useState(false);
Expand DownExpand Up@@ -145,7 +148,7 @@ const PlanSidebar = memo(function PlanSidebar({
 </Badge>
 {activePlan ? (
 <span className="text-[11px] text-muted-foreground/60">
 {formatTimestamp(activePlan.createdAt)}
 {formatTimestamp(activePlan.createdAt, timestampFormat)}
 </span>
 ) : null}
 </div>
Expand Down

19 changes: 14 additions & 5 deletions
apps/web/src/components/chat/MessagesTimeline.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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";
Expand All@@ -20,6 +20,8 @@ import { ChangedFilesTree } from "./ChangedFilesTree";
import { DiffStatLabel, hasNonZeroStat } from "./DiffStatLabel";
import { MessageCopyButton } from "./MessageCopyButton";
import { computeMessageDurationStart } from "./MessagesTimeline.logic";
import { type TimestampFormat } from "../../appSettings";
import { formatTimestamp } from "../../timestampFormat";

const MAX_VISIBLE_WORK_LOG_ENTRIES = 6;
const ALWAYS_UNVIRTUALIZED_TAIL_ROWS = 8;
Expand All@@ -44,6 +46,7 @@ interface MessagesTimelineProps {
 onImageExpand: (preview: ExpandedImagePreview) => void;
 markdownCwd: string | undefined;
 resolvedTheme: "light" | "dark";
 timestampFormat: TimestampFormat;
 workspaceRoot: string | undefined;
}

Expand All@@ -67,6 +70,7 @@ export const MessagesTimeline = memo(function MessagesTimeline({
 onImageExpand,
 markdownCwd,
 resolvedTheme,
 timestampFormat,
 workspaceRoot,
}: MessagesTimelineProps) {
 const timelineRootRef = useRef<HTMLDivElement | null>(null);
Expand DownExpand Up@@ -424,7 +428,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, timestampFormat)}
 </p>
 </div>
 </div>
Expand DownExpand Up@@ -515,6 +519,7 @@ export const MessagesTimeline = memo(function MessagesTimeline({
 row.message.streaming
 ? formatElapsed(row.durationStart, nowIso)
 : formatElapsed(row.durationStart, row.message.completedAt),
 timestampFormat,
 )}
 </p>
 </div>
Expand DownExpand Up@@ -650,9 +655,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,
 timestampFormat: TimestampFormat,
): string {
 if (!duration) return formatTimestamp(createdAt, timestampFormat);
 return `${formatTimestamp(createdAt, timestampFormat)} • ${duration}`;
}

function workToneClass(tone: "thinking" | "tool" | "info" | "error"): string {
Expand Down

123 changes: 91 additions & 32 deletions
apps/web/src/routes/_chat.settings.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -11,6 +11,13 @@ import { serverConfigQueryOptions } from "../lib/serverReactQuery";
import { ensureNativeApi } from "../nativeApi";
import { Button } from "../components/ui/button";
import { Input } from "../components/ui/input";
import {
 Select,
 SelectItem,
 SelectPopup,
 SelectTrigger,
 SelectValue,
} from "../components/ui/select";
import { Switch } from "../components/ui/switch";
import { APP_VERSION } from "../branding";
import { SidebarInset } from "~/components/ui/sidebar";
Expand DownExpand Up@@ -49,6 +56,12 @@ const MODEL_PROVIDER_SETTINGS: Array<{
 },
] as const;

const TIMESTAMP_FORMAT_LABELS = {
 locale: "System default",
 "12-hour": "12-hour",
 "24-hour": "24-hour",
} as const;

function getCustomModelsForProvider(
 settings: ReturnType<typeof useAppSettings>["settings"],
 provider: ProviderKind,
Expand DownExpand Up@@ -210,43 +223,89 @@ 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">Timestamp format</p>
 <p className="text-xs text-muted-foreground">
 System default follows your browser or OS time format. <code>12-hour</code>{" "}
 and <code>24-hour</code> force the hour cycle.
 </p>
 </div>
 <Select
 value={settings.timestampFormat}
 onValueChange={(value) => {
 if (value !== "locale" && value !== "12-hour" && value !== "24-hour") return;
 updateSettings({
 timestampFormat: value,
 });
 }}
 >
 <SelectTrigger className="w-40" aria-label="Timestamp format">
 <SelectValue>{TIMESTAMP_FORMAT_LABELS[settings.timestampFormat]}</SelectValue>
 </SelectTrigger>
 <SelectPopup align="end">
 <SelectItem value="locale">{TIMESTAMP_FORMAT_LABELS.locale}</SelectItem>
 <SelectItem value="12-hour">{TIMESTAMP_FORMAT_LABELS["12-hour"]}</SelectItem>
 <SelectItem value="24-hour">{TIMESTAMP_FORMAT_LABELS["24-hour"]}</SelectItem>
 </SelectPopup>
 </Select>
 </div>

 {settings.timestampFormat !== defaults.timestampFormat ? (
 <div className="flex justify-end">
 <Button
 size="xs"
 variant="outline"
 onClick={() =>
 updateSettings({
 timestampFormat: defaults.timestampFormat,
 })
 }
 >
 Restore default
 </Button>
 </div>
 ) : null}
 </div>
 </section>

 <section className="rounded-2xl border border-border bg-card p-5">
Expand Down

8 changes: 0 additions & 8 deletions
apps/web/src/session-logic.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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`;
Expand Down
Loading
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
feat: Allow Overriding Timestamp Format in Settings#855

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

juliusmarminge
merged 7 commits into

from

Mar 12, 2026
 Merged


feat: Allow Overriding Timestamp Format in Settings
#855
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


7 commits


Select commit
Hold shift + click to select a range
17cf52d

Add 24-hour timestamp support


huxcrux Mar 10, 2026
7354746

fix(web): remove unrelated app settings refactor


huxcrux Mar 12, 2026
0eb7e8f

Move timestamp setting into appearance


huxcrux Mar 12, 2026
5633b7e

refactor(web): use string timestamp format setting


huxcrux Mar 12, 2026
9c50801

Add locale timestamp format option


huxcrux Mar 12, 2026
caccb80

Rename locale timestamp label to system default


huxcrux Mar 12, 2026
f17bf3f

Fix timestamp format select label


huxcrux Mar 12, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


7 changes: 7 additions & 0 deletions
apps/web/src/appSettings.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
import { describe, expect, it } from "vitest";

import {
 DEFAULT_TIMESTAMP_FORMAT,
 getAppModelOptions,
 normalizeCustomModelSlugs,
 resolveAppModelSelection,
Expand DownExpand Up@@ -57,3 +58,9 @@ describe("resolveAppModelSelection", () => {
 expect(resolveAppModelSelection("codex", [], "")).toBe("gpt-5.4");
 });
});

describe("timestamp format defaults", () => {
 it("defaults timestamp format to locale", () => {
 expect(DEFAULT_TIMESTAMP_FORMAT).toBe("locale");
 });
});

6 changes: 6 additions & 0 deletions
apps/web/src/appSettings.ts

View file


Open in desktop

@juliusmarmingejuliusmarmingeMar 12, 2026

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

looks like rebase went wrong here?
@huxcruxhuxcruxMar 12, 2026

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes you caught me in the middle of a cleanup, it should look beter now :)
Original file line numberDiff line numberDiff line change
Expand Up@@ -7,6 +7,9 @@ import { useLocalStorage } from "./hooks/useLocalStorage";
const APP_SETTINGS_STORAGE_KEY = "t3code:app-settings:v1";
const MAX_CUSTOM_MODEL_COUNT = 32;
export const MAX_CUSTOM_MODEL_LENGTH = 256;
export const TIMESTAMP_FORMAT_OPTIONS = ["locale", "12-hour", "24-hour"] as const;
export type TimestampFormat = (typeof TIMESTAMP_FORMAT_OPTIONS)[number];
export const DEFAULT_TIMESTAMP_FORMAT: TimestampFormat = "locale";
const BUILT_IN_MODEL_SLUGS_BY_PROVIDER: Record<ProviderKind, ReadonlySet<string>> = {
 codex: new Set(getModelOptions("codex").map((option) => option.slug)),
};
Expand All@@ -22,6 +25,9 @@ const AppSettingsSchema = Schema.Struct({
 enableAssistantStreaming: Schema.Boolean.pipe(
 Schema.withConstructorDefault(() => Option.some(false)),
 ),
 timestampFormat: Schema.Literals(["locale", "12-hour", "24-hour"]).pipe(
 Schema.withConstructorDefault(() => Option.some(DEFAULT_TIMESTAMP_FORMAT)),
 ),
 customCodexModels: Schema.Array(Schema.String).pipe(
 Schema.withConstructorDefault(() => Option.some([])),
 ),
Expand Down

3 changes: 3 additions & 0 deletions
apps/web/src/components/ChatView.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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 timestampFormat = settings.timestampFormat;
 const navigate = useNavigate();
 const rawSearch = useSearch({
 strict: false,
Expand DownExpand Up@@ -3244,6 +3245,7 @@ export default function ChatView({ threadId }: ChatViewProps) {
 onImageExpand={onExpandTimelineImage}
 markdownCwd={gitCwd ?? undefined}
 resolvedTheme={resolvedTheme}
 timestampFormat={timestampFormat}
 workspaceRoot={activeProject?.cwd ?? undefined}
 />
 </div>
Expand DownExpand Up@@ -3764,6 +3766,7 @@ export default function ChatView({ threadId }: ChatViewProps) {
 activeProposedPlan={activeProposedPlan}
 markdownCwd={gitCwd ?? undefined}
 workspaceRoot={activeProject?.cwd ?? undefined}
 timestampFormat={timestampFormat}
 onClose={() => {
 setPlanSidebarOpen(false);
 // Track that the user explicitly dismissed for this turn so auto-open won't fight them.
Expand Down

12 changes: 4 additions & 8 deletions
apps/web/src/components/DiffPanel.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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";
Expand DownExpand Up@@ -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";
}
Expand All@@ -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);
Expand DownExpand Up@@ -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.timestampFormat)}
 </span>
 </div>
 </div>
Expand Down

7 changes: 5 additions & 2 deletions
apps/web/src/components/PlanSidebar.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
import { memo, useState, useCallback, useRef, useEffect } from "react";
import { type TimestampFormat } from "../appSettings";
import { Badge } from "./ui/badge";
import { Button } from "./ui/button";
import { ScrollArea } from "./ui/scroll-area";
Expand All@@ -12,9 +13,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,
Expand DownExpand Up@@ -53,6 +54,7 @@ interface PlanSidebarProps {
 activeProposedPlan: LatestProposedPlanState | null;
 markdownCwd: string | undefined;
 workspaceRoot: string | undefined;
 timestampFormat: TimestampFormat;
 onClose: () => void;
}

Expand All@@ -61,6 +63,7 @@ const PlanSidebar = memo(function PlanSidebar({
 activeProposedPlan,
 markdownCwd,
 workspaceRoot,
 timestampFormat,
 onClose,
}: PlanSidebarProps) {
 const [proposedPlanExpanded, setProposedPlanExpanded] = useState(false);
Expand DownExpand Up@@ -145,7 +148,7 @@ const PlanSidebar = memo(function PlanSidebar({
 </Badge>
 {activePlan ? (
 <span className="text-[11px] text-muted-foreground/60">
 {formatTimestamp(activePlan.createdAt)}
 {formatTimestamp(activePlan.createdAt, timestampFormat)}
 </span>
 ) : null}
 </div>
Expand Down

19 changes: 14 additions & 5 deletions
apps/web/src/components/chat/MessagesTimeline.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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";
Expand All@@ -20,6 +20,8 @@ import { ChangedFilesTree } from "./ChangedFilesTree";
import { DiffStatLabel, hasNonZeroStat } from "./DiffStatLabel";
import { MessageCopyButton } from "./MessageCopyButton";
import { computeMessageDurationStart } from "./MessagesTimeline.logic";
import { type TimestampFormat } from "../../appSettings";
import { formatTimestamp } from "../../timestampFormat";

const MAX_VISIBLE_WORK_LOG_ENTRIES = 6;
const ALWAYS_UNVIRTUALIZED_TAIL_ROWS = 8;
Expand All@@ -44,6 +46,7 @@ interface MessagesTimelineProps {
 onImageExpand: (preview: ExpandedImagePreview) => void;
 markdownCwd: string | undefined;
 resolvedTheme: "light" | "dark";
 timestampFormat: TimestampFormat;
 workspaceRoot: string | undefined;
}

Expand All@@ -67,6 +70,7 @@ export const MessagesTimeline = memo(function MessagesTimeline({
 onImageExpand,
 markdownCwd,
 resolvedTheme,
 timestampFormat,
 workspaceRoot,
}: MessagesTimelineProps) {
 const timelineRootRef = useRef<HTMLDivElement | null>(null);
Expand DownExpand Up@@ -424,7 +428,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, timestampFormat)}
 </p>
 </div>
 </div>
Expand DownExpand Up@@ -515,6 +519,7 @@ export const MessagesTimeline = memo(function MessagesTimeline({
 row.message.streaming
 ? formatElapsed(row.durationStart, nowIso)
 : formatElapsed(row.durationStart, row.message.completedAt),
 timestampFormat,
 )}
 </p>
 </div>
Expand DownExpand Up@@ -650,9 +655,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,
 timestampFormat: TimestampFormat,
): string {
 if (!duration) return formatTimestamp(createdAt, timestampFormat);
 return `${formatTimestamp(createdAt, timestampFormat)} • ${duration}`;
}

function workToneClass(tone: "thinking" | "tool" | "info" | "error"): string {
Expand Down

123 changes: 91 additions & 32 deletions
apps/web/src/routes/_chat.settings.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -11,6 +11,13 @@ import { serverConfigQueryOptions } from "../lib/serverReactQuery";
import { ensureNativeApi } from "../nativeApi";
import { Button } from "../components/ui/button";
import { Input } from "../components/ui/input";
import {
 Select,
 SelectItem,
 SelectPopup,
 SelectTrigger,
 SelectValue,
} from "../components/ui/select";
import { Switch } from "../components/ui/switch";
import { APP_VERSION } from "../branding";
import { SidebarInset } from "~/components/ui/sidebar";
Expand DownExpand Up@@ -49,6 +56,12 @@ const MODEL_PROVIDER_SETTINGS: Array<{
 },
] as const;

const TIMESTAMP_FORMAT_LABELS = {
 locale: "System default",
 "12-hour": "12-hour",
 "24-hour": "24-hour",
} as const;

function getCustomModelsForProvider(
 settings: ReturnType<typeof useAppSettings>["settings"],
 provider: ProviderKind,
Expand DownExpand Up@@ -210,43 +223,89 @@ 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">Timestamp format</p>
 <p className="text-xs text-muted-foreground">
 System default follows your browser or OS time format. <code>12-hour</code>{" "}
 and <code>24-hour</code> force the hour cycle.
 </p>
 </div>
 <Select
 value={settings.timestampFormat}
 onValueChange={(value) => {
 if (value !== "locale" && value !== "12-hour" && value !== "24-hour") return;
 updateSettings({
 timestampFormat: value,
 });
 }}
 >
 <SelectTrigger className="w-40" aria-label="Timestamp format">
 <SelectValue>{TIMESTAMP_FORMAT_LABELS[settings.timestampFormat]}</SelectValue>
 </SelectTrigger>
 <SelectPopup align="end">
 <SelectItem value="locale">{TIMESTAMP_FORMAT_LABELS.locale}</SelectItem>
 <SelectItem value="12-hour">{TIMESTAMP_FORMAT_LABELS["12-hour"]}</SelectItem>
 <SelectItem value="24-hour">{TIMESTAMP_FORMAT_LABELS["24-hour"]}</SelectItem>
 </SelectPopup>
 </Select>
 </div>

 {settings.timestampFormat !== defaults.timestampFormat ? (
 <div className="flex justify-end">
 <Button
 size="xs"
 variant="outline"
 onClick={() =>
 updateSettings({
 timestampFormat: defaults.timestampFormat,
 })
 }
 >
 Restore default
 </Button>
 </div>
 ) : null}
 </div>
 </section>

 <section className="rounded-2xl border border-border bg-card p-5">
Expand Down

8 changes: 0 additions & 8 deletions
apps/web/src/session-logic.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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`;
Expand Down
Loading
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
feat: Allow Overriding Timestamp Format in Settings#855

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

juliusmarminge
merged 7 commits into

from

Mar 12, 2026
 Merged


feat: Allow Overriding Timestamp Format in Settings
#855
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


7 commits


Select commit
Hold shift + click to select a range
17cf52d

Add 24-hour timestamp support


huxcrux Mar 10, 2026
7354746

fix(web): remove unrelated app settings refactor


huxcrux Mar 12, 2026
0eb7e8f

Move timestamp setting into appearance


huxcrux Mar 12, 2026
5633b7e

refactor(web): use string timestamp format setting


huxcrux Mar 12, 2026
9c50801

Add locale timestamp format option


huxcrux Mar 12, 2026
caccb80

Rename locale timestamp label to system default


huxcrux Mar 12, 2026
f17bf3f

Fix timestamp format select label


huxcrux Mar 12, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


7 changes: 7 additions & 0 deletions
apps/web/src/appSettings.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
import { describe, expect, it } from "vitest";

import {
 DEFAULT_TIMESTAMP_FORMAT,
 getAppModelOptions,
 normalizeCustomModelSlugs,
 resolveAppModelSelection,
Expand DownExpand Up@@ -57,3 +58,9 @@ describe("resolveAppModelSelection", () => {
 expect(resolveAppModelSelection("codex", [], "")).toBe("gpt-5.4");
 });
});

describe("timestamp format defaults", () => {
 it("defaults timestamp format to locale", () => {
 expect(DEFAULT_TIMESTAMP_FORMAT).toBe("locale");
 });
});

6 changes: 6 additions & 0 deletions
apps/web/src/appSettings.ts

View file


Open in desktop

@juliusmarmingejuliusmarmingeMar 12, 2026

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

looks like rebase went wrong here?
@huxcruxhuxcruxMar 12, 2026

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes you caught me in the middle of a cleanup, it should look beter now :)
Original file line numberDiff line numberDiff line change
Expand Up@@ -7,6 +7,9 @@ import { useLocalStorage } from "./hooks/useLocalStorage";
const APP_SETTINGS_STORAGE_KEY = "t3code:app-settings:v1";
const MAX_CUSTOM_MODEL_COUNT = 32;
export const MAX_CUSTOM_MODEL_LENGTH = 256;
export const TIMESTAMP_FORMAT_OPTIONS = ["locale", "12-hour", "24-hour"] as const;
export type TimestampFormat = (typeof TIMESTAMP_FORMAT_OPTIONS)[number];
export const DEFAULT_TIMESTAMP_FORMAT: TimestampFormat = "locale";
const BUILT_IN_MODEL_SLUGS_BY_PROVIDER: Record<ProviderKind, ReadonlySet<string>> = {
 codex: new Set(getModelOptions("codex").map((option) => option.slug)),
};
Expand All@@ -22,6 +25,9 @@ const AppSettingsSchema = Schema.Struct({
 enableAssistantStreaming: Schema.Boolean.pipe(
 Schema.withConstructorDefault(() => Option.some(false)),
 ),
 timestampFormat: Schema.Literals(["locale", "12-hour", "24-hour"]).pipe(
 Schema.withConstructorDefault(() => Option.some(DEFAULT_TIMESTAMP_FORMAT)),
 ),
 customCodexModels: Schema.Array(Schema.String).pipe(
 Schema.withConstructorDefault(() => Option.some([])),
 ),
Expand Down

3 changes: 3 additions & 0 deletions
apps/web/src/components/ChatView.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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 timestampFormat = settings.timestampFormat;
 const navigate = useNavigate();
 const rawSearch = useSearch({
 strict: false,
Expand DownExpand Up@@ -3244,6 +3245,7 @@ export default function ChatView({ threadId }: ChatViewProps) {
 onImageExpand={onExpandTimelineImage}
 markdownCwd={gitCwd ?? undefined}
 resolvedTheme={resolvedTheme}
 timestampFormat={timestampFormat}
 workspaceRoot={activeProject?.cwd ?? undefined}
 />
 </div>
Expand DownExpand Up@@ -3764,6 +3766,7 @@ export default function ChatView({ threadId }: ChatViewProps) {
 activeProposedPlan={activeProposedPlan}
 markdownCwd={gitCwd ?? undefined}
 workspaceRoot={activeProject?.cwd ?? undefined}
 timestampFormat={timestampFormat}
 onClose={() => {
 setPlanSidebarOpen(false);
 // Track that the user explicitly dismissed for this turn so auto-open won't fight them.
Expand Down

12 changes: 4 additions & 8 deletions
apps/web/src/components/DiffPanel.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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";
Expand DownExpand Up@@ -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";
}
Expand All@@ -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);
Expand DownExpand Up@@ -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.timestampFormat)}
 </span>
 </div>
 </div>
Expand Down

7 changes: 5 additions & 2 deletions
apps/web/src/components/PlanSidebar.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
import { memo, useState, useCallback, useRef, useEffect } from "react";
import { type TimestampFormat } from "../appSettings";
import { Badge } from "./ui/badge";
import { Button } from "./ui/button";
import { ScrollArea } from "./ui/scroll-area";
Expand All@@ -12,9 +13,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,
Expand DownExpand Up@@ -53,6 +54,7 @@ interface PlanSidebarProps {
 activeProposedPlan: LatestProposedPlanState | null;
 markdownCwd: string | undefined;
 workspaceRoot: string | undefined;
 timestampFormat: TimestampFormat;
 onClose: () => void;
}

Expand All@@ -61,6 +63,7 @@ const PlanSidebar = memo(function PlanSidebar({
 activeProposedPlan,
 markdownCwd,
 workspaceRoot,
 timestampFormat,
 onClose,
}: PlanSidebarProps) {
 const [proposedPlanExpanded, setProposedPlanExpanded] = useState(false);
Expand DownExpand Up@@ -145,7 +148,7 @@ const PlanSidebar = memo(function PlanSidebar({
 </Badge>
 {activePlan ? (
 <span className="text-[11px] text-muted-foreground/60">
 {formatTimestamp(activePlan.createdAt)}
 {formatTimestamp(activePlan.createdAt, timestampFormat)}
 </span>
 ) : null}
 </div>
Expand Down

19 changes: 14 additions & 5 deletions
apps/web/src/components/chat/MessagesTimeline.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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";
Expand All@@ -20,6 +20,8 @@ import { ChangedFilesTree } from "./ChangedFilesTree";
import { DiffStatLabel, hasNonZeroStat } from "./DiffStatLabel";
import { MessageCopyButton } from "./MessageCopyButton";
import { computeMessageDurationStart } from "./MessagesTimeline.logic";
import { type TimestampFormat } from "../../appSettings";
import { formatTimestamp } from "../../timestampFormat";

const MAX_VISIBLE_WORK_LOG_ENTRIES = 6;
const ALWAYS_UNVIRTUALIZED_TAIL_ROWS = 8;
Expand All@@ -44,6 +46,7 @@ interface MessagesTimelineProps {
 onImageExpand: (preview: ExpandedImagePreview) => void;
 markdownCwd: string | undefined;
 resolvedTheme: "light" | "dark";
 timestampFormat: TimestampFormat;
 workspaceRoot: string | undefined;
}

Expand All@@ -67,6 +70,7 @@ export const MessagesTimeline = memo(function MessagesTimeline({
 onImageExpand,
 markdownCwd,
 resolvedTheme,
 timestampFormat,
 workspaceRoot,
}: MessagesTimelineProps) {
 const timelineRootRef = useRef<HTMLDivElement | null>(null);
Expand DownExpand Up@@ -424,7 +428,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, timestampFormat)}
 </p>
 </div>
 </div>
Expand DownExpand Up@@ -515,6 +519,7 @@ export const MessagesTimeline = memo(function MessagesTimeline({
 row.message.streaming
 ? formatElapsed(row.durationStart, nowIso)
 : formatElapsed(row.durationStart, row.message.completedAt),
 timestampFormat,
 )}
 </p>
 </div>
Expand DownExpand Up@@ -650,9 +655,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,
 timestampFormat: TimestampFormat,
): string {
 if (!duration) return formatTimestamp(createdAt, timestampFormat);
 return `${formatTimestamp(createdAt, timestampFormat)} • ${duration}`;
}

function workToneClass(tone: "thinking" | "tool" | "info" | "error"): string {
Expand Down

123 changes: 91 additions & 32 deletions
apps/web/src/routes/_chat.settings.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -11,6 +11,13 @@ import { serverConfigQueryOptions } from "../lib/serverReactQuery";
import { ensureNativeApi } from "../nativeApi";
import { Button } from "../components/ui/button";
import { Input } from "../components/ui/input";
import {
 Select,
 SelectItem,
 SelectPopup,
 SelectTrigger,
 SelectValue,
} from "../components/ui/select";
import { Switch } from "../components/ui/switch";
import { APP_VERSION } from "../branding";
import { SidebarInset } from "~/components/ui/sidebar";
Expand DownExpand Up@@ -49,6 +56,12 @@ const MODEL_PROVIDER_SETTINGS: Array<{
 },
] as const;

const TIMESTAMP_FORMAT_LABELS = {
 locale: "System default",
 "12-hour": "12-hour",
 "24-hour": "24-hour",
} as const;

function getCustomModelsForProvider(
 settings: ReturnType<typeof useAppSettings>["settings"],
 provider: ProviderKind,
Expand DownExpand Up@@ -210,43 +223,89 @@ 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">Timestamp format</p>
 <p className="text-xs text-muted-foreground">
 System default follows your browser or OS time format. <code>12-hour</code>{" "}
 and <code>24-hour</code> force the hour cycle.
 </p>
 </div>
 <Select
 value={settings.timestampFormat}
 onValueChange={(value) => {
 if (value !== "locale" && value !== "12-hour" && value !== "24-hour") return;
 updateSettings({
 timestampFormat: value,
 });
 }}
 >
 <SelectTrigger className="w-40" aria-label="Timestamp format">
 <SelectValue>{TIMESTAMP_FORMAT_LABELS[settings.timestampFormat]}</SelectValue>
 </SelectTrigger>
 <SelectPopup align="end">
 <SelectItem value="locale">{TIMESTAMP_FORMAT_LABELS.locale}</SelectItem>
 <SelectItem value="12-hour">{TIMESTAMP_FORMAT_LABELS["12-hour"]}</SelectItem>
 <SelectItem value="24-hour">{TIMESTAMP_FORMAT_LABELS["24-hour"]}</SelectItem>
 </SelectPopup>
 </Select>
 </div>

 {settings.timestampFormat !== defaults.timestampFormat ? (
 <div className="flex justify-end">
 <Button
 size="xs"
 variant="outline"
 onClick={() =>
 updateSettings({
 timestampFormat: defaults.timestampFormat,
 })
 }
 >
 Restore default
 </Button>
 </div>
 ) : null}
 </div>
 </section>

 <section className="rounded-2xl border border-border bg-card p-5">
Expand Down

8 changes: 0 additions & 8 deletions
apps/web/src/session-logic.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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`;
Expand Down
Loading
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
feat: Allow Overriding Timestamp Format in Settings#855

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

juliusmarminge
merged 7 commits into

from

Mar 12, 2026
 Merged


feat: Allow Overriding Timestamp Format in Settings
#855
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


7 commits


Select commit
Hold shift + click to select a range
17cf52d

Add 24-hour timestamp support


huxcrux Mar 10, 2026
7354746

fix(web): remove unrelated app settings refactor


huxcrux Mar 12, 2026
0eb7e8f

Move timestamp setting into appearance


huxcrux Mar 12, 2026
5633b7e

refactor(web): use string timestamp format setting


huxcrux Mar 12, 2026
9c50801

Add locale timestamp format option


huxcrux Mar 12, 2026
caccb80

Rename locale timestamp label to system default


huxcrux Mar 12, 2026
f17bf3f

Fix timestamp format select label


huxcrux Mar 12, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


7 changes: 7 additions & 0 deletions
apps/web/src/appSettings.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
import { describe, expect, it } from "vitest";

import {
 DEFAULT_TIMESTAMP_FORMAT,
 getAppModelOptions,
 normalizeCustomModelSlugs,
 resolveAppModelSelection,
Expand DownExpand Up@@ -57,3 +58,9 @@ describe("resolveAppModelSelection", () => {
 expect(resolveAppModelSelection("codex", [], "")).toBe("gpt-5.4");
 });
});

describe("timestamp format defaults", () => {
 it("defaults timestamp format to locale", () => {
 expect(DEFAULT_TIMESTAMP_FORMAT).toBe("locale");
 });
});

6 changes: 6 additions & 0 deletions
apps/web/src/appSettings.ts

View file


Open in desktop

@juliusmarmingejuliusmarmingeMar 12, 2026

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

looks like rebase went wrong here?
@huxcruxhuxcruxMar 12, 2026

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes you caught me in the middle of a cleanup, it should look beter now :)
Original file line numberDiff line numberDiff line change
Expand Up@@ -7,6 +7,9 @@ import { useLocalStorage } from "./hooks/useLocalStorage";
const APP_SETTINGS_STORAGE_KEY = "t3code:app-settings:v1";
const MAX_CUSTOM_MODEL_COUNT = 32;
export const MAX_CUSTOM_MODEL_LENGTH = 256;
export const TIMESTAMP_FORMAT_OPTIONS = ["locale", "12-hour", "24-hour"] as const;
export type TimestampFormat = (typeof TIMESTAMP_FORMAT_OPTIONS)[number];
export const DEFAULT_TIMESTAMP_FORMAT: TimestampFormat = "locale";
const BUILT_IN_MODEL_SLUGS_BY_PROVIDER: Record<ProviderKind, ReadonlySet<string>> = {
 codex: new Set(getModelOptions("codex").map((option) => option.slug)),
};
Expand All@@ -22,6 +25,9 @@ const AppSettingsSchema = Schema.Struct({
 enableAssistantStreaming: Schema.Boolean.pipe(
 Schema.withConstructorDefault(() => Option.some(false)),
 ),
 timestampFormat: Schema.Literals(["locale", "12-hour", "24-hour"]).pipe(
 Schema.withConstructorDefault(() => Option.some(DEFAULT_TIMESTAMP_FORMAT)),
 ),
 customCodexModels: Schema.Array(Schema.String).pipe(
 Schema.withConstructorDefault(() => Option.some([])),
 ),
Expand Down

3 changes: 3 additions & 0 deletions
apps/web/src/components/ChatView.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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 timestampFormat = settings.timestampFormat;
 const navigate = useNavigate();
 const rawSearch = useSearch({
 strict: false,
Expand DownExpand Up@@ -3244,6 +3245,7 @@ export default function ChatView({ threadId }: ChatViewProps) {
 onImageExpand={onExpandTimelineImage}
 markdownCwd={gitCwd ?? undefined}
 resolvedTheme={resolvedTheme}
 timestampFormat={timestampFormat}
 workspaceRoot={activeProject?.cwd ?? undefined}
 />
 </div>
Expand DownExpand Up@@ -3764,6 +3766,7 @@ export default function ChatView({ threadId }: ChatViewProps) {
 activeProposedPlan={activeProposedPlan}
 markdownCwd={gitCwd ?? undefined}
 workspaceRoot={activeProject?.cwd ?? undefined}
 timestampFormat={timestampFormat}
 onClose={() => {
 setPlanSidebarOpen(false);
 // Track that the user explicitly dismissed for this turn so auto-open won't fight them.
Expand Down

12 changes: 4 additions & 8 deletions
apps/web/src/components/DiffPanel.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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";
Expand DownExpand Up@@ -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";
}
Expand All@@ -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);
Expand DownExpand Up@@ -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.timestampFormat)}
 </span>
 </div>
 </div>
Expand Down

7 changes: 5 additions & 2 deletions
apps/web/src/components/PlanSidebar.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
import { memo, useState, useCallback, useRef, useEffect } from "react";
import { type TimestampFormat } from "../appSettings";
import { Badge } from "./ui/badge";
import { Button } from "./ui/button";
import { ScrollArea } from "./ui/scroll-area";
Expand All@@ -12,9 +13,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,
Expand DownExpand Up@@ -53,6 +54,7 @@ interface PlanSidebarProps {
 activeProposedPlan: LatestProposedPlanState | null;
 markdownCwd: string | undefined;
 workspaceRoot: string | undefined;
 timestampFormat: TimestampFormat;
 onClose: () => void;
}

Expand All@@ -61,6 +63,7 @@ const PlanSidebar = memo(function PlanSidebar({
 activeProposedPlan,
 markdownCwd,
 workspaceRoot,
 timestampFormat,
 onClose,
}: PlanSidebarProps) {
 const [proposedPlanExpanded, setProposedPlanExpanded] = useState(false);
Expand DownExpand Up@@ -145,7 +148,7 @@ const PlanSidebar = memo(function PlanSidebar({
 </Badge>
 {activePlan ? (
 <span className="text-[11px] text-muted-foreground/60">
 {formatTimestamp(activePlan.createdAt)}
 {formatTimestamp(activePlan.createdAt, timestampFormat)}
 </span>
 ) : null}
 </div>
Expand Down

19 changes: 14 additions & 5 deletions
apps/web/src/components/chat/MessagesTimeline.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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";
Expand All@@ -20,6 +20,8 @@ import { ChangedFilesTree } from "./ChangedFilesTree";
import { DiffStatLabel, hasNonZeroStat } from "./DiffStatLabel";
import { MessageCopyButton } from "./MessageCopyButton";
import { computeMessageDurationStart } from "./MessagesTimeline.logic";
import { type TimestampFormat } from "../../appSettings";
import { formatTimestamp } from "../../timestampFormat";

const MAX_VISIBLE_WORK_LOG_ENTRIES = 6;
const ALWAYS_UNVIRTUALIZED_TAIL_ROWS = 8;
Expand All@@ -44,6 +46,7 @@ interface MessagesTimelineProps {
 onImageExpand: (preview: ExpandedImagePreview) => void;
 markdownCwd: string | undefined;
 resolvedTheme: "light" | "dark";
 timestampFormat: TimestampFormat;
 workspaceRoot: string | undefined;
}

Expand All@@ -67,6 +70,7 @@ export const MessagesTimeline = memo(function MessagesTimeline({
 onImageExpand,
 markdownCwd,
 resolvedTheme,
 timestampFormat,
 workspaceRoot,
}: MessagesTimelineProps) {
 const timelineRootRef = useRef<HTMLDivElement | null>(null);
Expand DownExpand Up@@ -424,7 +428,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, timestampFormat)}
 </p>
 </div>
 </div>
Expand DownExpand Up@@ -515,6 +519,7 @@ export const MessagesTimeline = memo(function MessagesTimeline({
 row.message.streaming
 ? formatElapsed(row.durationStart, nowIso)
 : formatElapsed(row.durationStart, row.message.completedAt),
 timestampFormat,
 )}
 </p>
 </div>
Expand DownExpand Up@@ -650,9 +655,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,
 timestampFormat: TimestampFormat,
): string {
 if (!duration) return formatTimestamp(createdAt, timestampFormat);
 return `${formatTimestamp(createdAt, timestampFormat)} • ${duration}`;
}

function workToneClass(tone: "thinking" | "tool" | "info" | "error"): string {
Expand Down

123 changes: 91 additions & 32 deletions
apps/web/src/routes/_chat.settings.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -11,6 +11,13 @@ import { serverConfigQueryOptions } from "../lib/serverReactQuery";
import { ensureNativeApi } from "../nativeApi";
import { Button } from "../components/ui/button";
import { Input } from "../components/ui/input";
import {
 Select,
 SelectItem,
 SelectPopup,
 SelectTrigger,
 SelectValue,
} from "../components/ui/select";
import { Switch } from "../components/ui/switch";
import { APP_VERSION } from "../branding";
import { SidebarInset } from "~/components/ui/sidebar";
Expand DownExpand Up@@ -49,6 +56,12 @@ const MODEL_PROVIDER_SETTINGS: Array<{
 },
] as const;

const TIMESTAMP_FORMAT_LABELS = {
 locale: "System default",
 "12-hour": "12-hour",
 "24-hour": "24-hour",
} as const;

function getCustomModelsForProvider(
 settings: ReturnType<typeof useAppSettings>["settings"],
 provider: ProviderKind,
Expand DownExpand Up@@ -210,43 +223,89 @@ 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">Timestamp format</p>
 <p className="text-xs text-muted-foreground">
 System default follows your browser or OS time format. <code>12-hour</code>{" "}
 and <code>24-hour</code> force the hour cycle.
 </p>
 </div>
 <Select
 value={settings.timestampFormat}
 onValueChange={(value) => {
 if (value !== "locale" && value !== "12-hour" && value !== "24-hour") return;
 updateSettings({
 timestampFormat: value,
 });
 }}
 >
 <SelectTrigger className="w-40" aria-label="Timestamp format">
 <SelectValue>{TIMESTAMP_FORMAT_LABELS[settings.timestampFormat]}</SelectValue>
 </SelectTrigger>
 <SelectPopup align="end">
 <SelectItem value="locale">{TIMESTAMP_FORMAT_LABELS.locale}</SelectItem>
 <SelectItem value="12-hour">{TIMESTAMP_FORMAT_LABELS["12-hour"]}</SelectItem>
 <SelectItem value="24-hour">{TIMESTAMP_FORMAT_LABELS["24-hour"]}</SelectItem>
 </SelectPopup>
 </Select>
 </div>

 {settings.timestampFormat !== defaults.timestampFormat ? (
 <div className="flex justify-end">
 <Button
 size="xs"
 variant="outline"
 onClick={() =>
 updateSettings({
 timestampFormat: defaults.timestampFormat,
 })
 }
 >
 Restore default
 </Button>
 </div>
 ) : null}
 </div>
 </section>

 <section className="rounded-2xl border border-border bg-card p-5">
Expand Down

8 changes: 0 additions & 8 deletions
apps/web/src/session-logic.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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`;
Expand Down
Loading
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
feat: Allow Overriding Timestamp Format in Settings#855

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

juliusmarminge
merged 7 commits into

from

Mar 12, 2026
 Merged


feat: Allow Overriding Timestamp Format in Settings
#855
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


7 commits


Select commit
Hold shift + click to select a range
17cf52d

Add 24-hour timestamp support


huxcrux Mar 10, 2026
7354746

fix(web): remove unrelated app settings refactor


huxcrux Mar 12, 2026
0eb7e8f

Move timestamp setting into appearance


huxcrux Mar 12, 2026
5633b7e

refactor(web): use string timestamp format setting


huxcrux Mar 12, 2026
9c50801

Add locale timestamp format option


huxcrux Mar 12, 2026
caccb80

Rename locale timestamp label to system default


huxcrux Mar 12, 2026
f17bf3f

Fix timestamp format select label


huxcrux Mar 12, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


7 changes: 7 additions & 0 deletions
apps/web/src/appSettings.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
import { describe, expect, it } from "vitest";

import {
 DEFAULT_TIMESTAMP_FORMAT,
 getAppModelOptions,
 normalizeCustomModelSlugs,
 resolveAppModelSelection,
Expand DownExpand Up@@ -57,3 +58,9 @@ describe("resolveAppModelSelection", () => {
 expect(resolveAppModelSelection("codex", [], "")).toBe("gpt-5.4");
 });
});

describe("timestamp format defaults", () => {
 it("defaults timestamp format to locale", () => {
 expect(DEFAULT_TIMESTAMP_FORMAT).toBe("locale");
 });
});

6 changes: 6 additions & 0 deletions
apps/web/src/appSettings.ts

View file


Open in desktop

@juliusmarmingejuliusmarmingeMar 12, 2026

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

looks like rebase went wrong here?
@huxcruxhuxcruxMar 12, 2026

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes you caught me in the middle of a cleanup, it should look beter now :)
Original file line numberDiff line numberDiff line change
Expand Up@@ -7,6 +7,9 @@ import { useLocalStorage } from "./hooks/useLocalStorage";
const APP_SETTINGS_STORAGE_KEY = "t3code:app-settings:v1";
const MAX_CUSTOM_MODEL_COUNT = 32;
export const MAX_CUSTOM_MODEL_LENGTH = 256;
export const TIMESTAMP_FORMAT_OPTIONS = ["locale", "12-hour", "24-hour"] as const;
export type TimestampFormat = (typeof TIMESTAMP_FORMAT_OPTIONS)[number];
export const DEFAULT_TIMESTAMP_FORMAT: TimestampFormat = "locale";
const BUILT_IN_MODEL_SLUGS_BY_PROVIDER: Record<ProviderKind, ReadonlySet<string>> = {
 codex: new Set(getModelOptions("codex").map((option) => option.slug)),
};
Expand All@@ -22,6 +25,9 @@ const AppSettingsSchema = Schema.Struct({
 enableAssistantStreaming: Schema.Boolean.pipe(
 Schema.withConstructorDefault(() => Option.some(false)),
 ),
 timestampFormat: Schema.Literals(["locale", "12-hour", "24-hour"]).pipe(
 Schema.withConstructorDefault(() => Option.some(DEFAULT_TIMESTAMP_FORMAT)),
 ),
 customCodexModels: Schema.Array(Schema.String).pipe(
 Schema.withConstructorDefault(() => Option.some([])),
 ),
Expand Down

3 changes: 3 additions & 0 deletions
apps/web/src/components/ChatView.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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 timestampFormat = settings.timestampFormat;
 const navigate = useNavigate();
 const rawSearch = useSearch({
 strict: false,
Expand DownExpand Up@@ -3244,6 +3245,7 @@ export default function ChatView({ threadId }: ChatViewProps) {
 onImageExpand={onExpandTimelineImage}
 markdownCwd={gitCwd ?? undefined}
 resolvedTheme={resolvedTheme}
 timestampFormat={timestampFormat}
 workspaceRoot={activeProject?.cwd ?? undefined}
 />
 </div>
Expand DownExpand Up@@ -3764,6 +3766,7 @@ export default function ChatView({ threadId }: ChatViewProps) {
 activeProposedPlan={activeProposedPlan}
 markdownCwd={gitCwd ?? undefined}
 workspaceRoot={activeProject?.cwd ?? undefined}
 timestampFormat={timestampFormat}
 onClose={() => {
 setPlanSidebarOpen(false);
 // Track that the user explicitly dismissed for this turn so auto-open won't fight them.
Expand Down

12 changes: 4 additions & 8 deletions
apps/web/src/components/DiffPanel.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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";
Expand DownExpand Up@@ -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";
}
Expand All@@ -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);
Expand DownExpand Up@@ -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.timestampFormat)}
 </span>
 </div>
 </div>
Expand Down

7 changes: 5 additions & 2 deletions
apps/web/src/components/PlanSidebar.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
import { memo, useState, useCallback, useRef, useEffect } from "react";
import { type TimestampFormat } from "../appSettings";
import { Badge } from "./ui/badge";
import { Button } from "./ui/button";
import { ScrollArea } from "./ui/scroll-area";
Expand All@@ -12,9 +13,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,
Expand DownExpand Up@@ -53,6 +54,7 @@ interface PlanSidebarProps {
 activeProposedPlan: LatestProposedPlanState | null;
 markdownCwd: string | undefined;
 workspaceRoot: string | undefined;
 timestampFormat: TimestampFormat;
 onClose: () => void;
}

Expand All@@ -61,6 +63,7 @@ const PlanSidebar = memo(function PlanSidebar({
 activeProposedPlan,
 markdownCwd,
 workspaceRoot,
 timestampFormat,
 onClose,
}: PlanSidebarProps) {
 const [proposedPlanExpanded, setProposedPlanExpanded] = useState(false);
Expand DownExpand Up@@ -145,7 +148,7 @@ const PlanSidebar = memo(function PlanSidebar({
 </Badge>
 {activePlan ? (
 <span className="text-[11px] text-muted-foreground/60">
 {formatTimestamp(activePlan.createdAt)}
 {formatTimestamp(activePlan.createdAt, timestampFormat)}
 </span>
 ) : null}
 </div>
Expand Down

19 changes: 14 additions & 5 deletions
apps/web/src/components/chat/MessagesTimeline.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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";
Expand All@@ -20,6 +20,8 @@ import { ChangedFilesTree } from "./ChangedFilesTree";
import { DiffStatLabel, hasNonZeroStat } from "./DiffStatLabel";
import { MessageCopyButton } from "./MessageCopyButton";
import { computeMessageDurationStart } from "./MessagesTimeline.logic";
import { type TimestampFormat } from "../../appSettings";
import { formatTimestamp } from "../../timestampFormat";

const MAX_VISIBLE_WORK_LOG_ENTRIES = 6;
const ALWAYS_UNVIRTUALIZED_TAIL_ROWS = 8;
Expand All@@ -44,6 +46,7 @@ interface MessagesTimelineProps {
 onImageExpand: (preview: ExpandedImagePreview) => void;
 markdownCwd: string | undefined;
 resolvedTheme: "light" | "dark";
 timestampFormat: TimestampFormat;
 workspaceRoot: string | undefined;
}

Expand All@@ -67,6 +70,7 @@ export const MessagesTimeline = memo(function MessagesTimeline({
 onImageExpand,
 markdownCwd,
 resolvedTheme,
 timestampFormat,
 workspaceRoot,
}: MessagesTimelineProps) {
 const timelineRootRef = useRef<HTMLDivElement | null>(null);
Expand DownExpand Up@@ -424,7 +428,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, timestampFormat)}
 </p>
 </div>
 </div>
Expand DownExpand Up@@ -515,6 +519,7 @@ export const MessagesTimeline = memo(function MessagesTimeline({
 row.message.streaming
 ? formatElapsed(row.durationStart, nowIso)
 : formatElapsed(row.durationStart, row.message.completedAt),
 timestampFormat,
 )}
 </p>
 </div>
Expand DownExpand Up@@ -650,9 +655,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,
 timestampFormat: TimestampFormat,
): string {
 if (!duration) return formatTimestamp(createdAt, timestampFormat);
 return `${formatTimestamp(createdAt, timestampFormat)} • ${duration}`;
}

function workToneClass(tone: "thinking" | "tool" | "info" | "error"): string {
Expand Down

123 changes: 91 additions & 32 deletions
apps/web/src/routes/_chat.settings.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -11,6 +11,13 @@ import { serverConfigQueryOptions } from "../lib/serverReactQuery";
import { ensureNativeApi } from "../nativeApi";
import { Button } from "../components/ui/button";
import { Input } from "../components/ui/input";
import {
 Select,
 SelectItem,
 SelectPopup,
 SelectTrigger,
 SelectValue,
} from "../components/ui/select";
import { Switch } from "../components/ui/switch";
import { APP_VERSION } from "../branding";
import { SidebarInset } from "~/components/ui/sidebar";
Expand DownExpand Up@@ -49,6 +56,12 @@ const MODEL_PROVIDER_SETTINGS: Array<{
 },
] as const;

const TIMESTAMP_FORMAT_LABELS = {
 locale: "System default",
 "12-hour": "12-hour",
 "24-hour": "24-hour",
} as const;

function getCustomModelsForProvider(
 settings: ReturnType<typeof useAppSettings>["settings"],
 provider: ProviderKind,
Expand DownExpand Up@@ -210,43 +223,89 @@ 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">Timestamp format</p>
 <p className="text-xs text-muted-foreground">
 System default follows your browser or OS time format. <code>12-hour</code>{" "}
 and <code>24-hour</code> force the hour cycle.
 </p>
 </div>
 <Select
 value={settings.timestampFormat}
 onValueChange={(value) => {
 if (value !== "locale" && value !== "12-hour" && value !== "24-hour") return;
 updateSettings({
 timestampFormat: value,
 });
 }}
 >
 <SelectTrigger className="w-40" aria-label="Timestamp format">
 <SelectValue>{TIMESTAMP_FORMAT_LABELS[settings.timestampFormat]}</SelectValue>
 </SelectTrigger>
 <SelectPopup align="end">
 <SelectItem value="locale">{TIMESTAMP_FORMAT_LABELS.locale}</SelectItem>
 <SelectItem value="12-hour">{TIMESTAMP_FORMAT_LABELS["12-hour"]}</SelectItem>
 <SelectItem value="24-hour">{TIMESTAMP_FORMAT_LABELS["24-hour"]}</SelectItem>
 </SelectPopup>
 </Select>
 </div>

 {settings.timestampFormat !== defaults.timestampFormat ? (
 <div className="flex justify-end">
 <Button
 size="xs"
 variant="outline"
 onClick={() =>
 updateSettings({
 timestampFormat: defaults.timestampFormat,
 })
 }
 >
 Restore default
 </Button>
 </div>
 ) : null}
 </div>
 </section>

 <section className="rounded-2xl border border-border bg-card p-5">
Expand Down

8 changes: 0 additions & 8 deletions
apps/web/src/session-logic.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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`;
Expand Down
Loading
Loading