web: converge shell visual language and emit ISO timestamps from core

Cargo.toml

@@ -25,6 +25,7 @@ bytes = "1"
 dotenvy = "0.15"
 futures-core = "0.3"
 futures-util = "0.3"
+jiff = "0.2"
 mini-stim-proto-client = { path = "proto/crates/client" }
 mini-stim-proto-server = { path = "proto/crates/server" }
 mini-stim-proto-transport = { path = "proto/crates/transport" }

apps/client/soma/web/src/components/ChatHeader.tsx

@@ -44,8 +44,7 @@ export function ChatHeader(props: {
   return (
     <Pane padding="lg">
       <Inline justify="between" align="start" wrap gap="md">
-        <Stack gap="xs">
-          <Text size="xs" tone="subtle">SESSION</Text>
+        <Stack gap="none" grow>
           {editing ? (
             <Input
               autoFocus
@@ -66,8 +65,10 @@ export function ChatHeader(props: {
             />
           ) : (
             <Button
+              block
               justify="start"
               size="sm"
+              title={props.title}
               variant="ghost"
               disabled={!props.selectedSessionId}
               type="button"
@@ -77,18 +78,19 @@ export function ChatHeader(props: {
                 }
               }}
             >
-              <Text size="lg" tone="strong">
+              <Text size="lg" tone="strong" truncate>
                 {props.title}
               </Text>
             </Button>
           )}
         </Stack>
         <Inline gap="sm" wrap>
-          <Badge size="sm" tone={props.busy ? "success" : "neutral"}>
-            {props.busy ? "sending" : "idle"}
-          </Badge>
-          {props.selectedSessionId ? <Badge size="sm" tone="accent">{props.connection}</Badge> : null}
-          {!props.selectedSessionId ? <Badge size="sm">new</Badge> : null}
+          {props.busy ? (
+            <Badge size="sm" tone="success">sending</Badge>
+          ) : null}
+          {props.connection === "error" ? (
+            <Badge size="sm" tone="danger">reconnecting</Badge>
+          ) : null}
         </Inline>
       </Inline>
     </Pane>

apps/client/soma/web/src/components/SessionRail.tsx

@@ -9,6 +9,7 @@ import {
   ScrollArea,
   Stack,
   Text,
+  Timestamp,
 } from "@mini-stim/components";
 import type { Session } from "@mini-stim/hooks";
 
@@ -25,8 +26,8 @@ export function SessionRail(props: {
         <Stack gap="sm">
           <Inline justify="between" align="start" gap="md">
             <Stack gap="xs">
-              <Text size="xs" tone="subtle">WORKSPACE</Text>
-              <Heading tag="h1" size="lg">mini-stim</Heading>
+              <Heading tag="h1" size="lg" truncate>mini-stim</Heading>
+              <Text size="xs" tone="subtle">Local-first AI chat</Text>
             </Stack>
           <Button
             size="sm"
@@ -39,32 +40,32 @@ export function SessionRail(props: {
           </Button>
           </Inline>
           <Inline justify="between" align="center">
-            <Text size="xs" tone="subtle">CONVERSATIONS</Text>
+            <Text size="xs" tone="subtle">Conversations</Text>
             <Badge size="sm">{props.sessions.length}</Badge>
           </Inline>
         </Stack>
         <ScrollArea grow>
           <Stack gap="xs">
             {props.sessions.map((session) => {
               const selected = session.id === props.selectedSessionId;
+              const label = sessionLabel(session);
               return (
                 <Button
                   key={session.id}
                   block
                   justify="start"
                   size="lg"
+                  title={label}
                   variant={selected ? "rail-selected" : "rail"}
                   onClick={() => props.onSelect(session.id)}
                 >
                   <Stack tag="span" gap="xs" grow align="start">
                     <Text tone={selected ? "strong" : "default"} truncate>
-                      {sessionLabel(session)}
+                      {label}
                     </Text>
-                    <Inline tag="span" justify="between" grow wrap gap="sm">
-                      <Text size="xs" tone="subtle" truncate>
-                        {formatSessionStamp(session.updated_at)}
-                      </Text>
-                      {selected ? <Badge size="sm" tone="accent">current</Badge> : null}
+                    <Inline tag="span" justify="between" align="center" grow gap="sm">
+                      <Timestamp value={session.updated_at} size="xs" tone="subtle" truncate />
+                      {selected ? <Badge size="sm" tone="accent">active</Badge> : null}
                     </Inline>
                   </Stack>
                 </Button>
@@ -85,16 +86,3 @@ export function SessionRail(props: {
 function sessionLabel(session: { id: string; title?: string | null }) {
   return session.title?.trim() || session.id;
 }
-
-function formatSessionStamp(value: string) {
-  const date = new Date(value);
-  if (Number.isNaN(date.getTime())) {
-    return value;
-  }
-  return new Intl.DateTimeFormat(undefined, {
-    month: "short",
-    day: "numeric",
-    hour: "numeric",
-    minute: "2-digit",
-  }).format(date);
-}

apps/client/soma/web/src/components/TimelineItemView.tsx

@@ -4,6 +4,7 @@ import {
   Stack,
   Surface,
   Text,
+  Timestamp,
 } from "@mini-stim/components";
 import type { TimelineItem } from "@mini-stim/hooks";
 
@@ -26,9 +27,7 @@ export function TimelineItemView(props: {
             <Text size="xs" tone="subtle">
               {roleLabel(role)}
             </Text>
-            <Text size="xs" tone="subtle">
-              {formatStamp(item.createdAt)}
-            </Text>
+            <Timestamp value={item.createdAt} size="xs" tone="subtle" />
           </Inline>
           <Text>{item.message.content_text}</Text>
         </Stack>
@@ -124,14 +123,3 @@ function roleLabel(role: string) {
   }
   return "ASSISTANT";
 }
-
-function formatStamp(value: string) {
-  const date = new Date(value);
-  if (Number.isNaN(date.getTime())) {
-    return value;
-  }
-  return new Intl.DateTimeFormat(undefined, {
-    hour: "numeric",
-    minute: "2-digit",
-  }).format(date);
-}

apps/server/soma/crates/santi-core/Cargo.toml

@@ -9,6 +9,7 @@ async-stream.workspace = true
 async-trait.workspace = true
 futures-core.workspace = true
 futures-util.workspace = true
+jiff.workspace = true
 rusqlite.workspace = true
 santi-provider.workspace = true
 serde.workspace = true

apps/server/soma/crates/santi-core/src/model.rs

@@ -340,12 +340,20 @@ pub struct SessionRuntimeSnapshot {
 }
 
 pub fn timestamp_now() -> Timestamp {
-    use std::time::{SystemTime, UNIX_EPOCH};
-
-    let duration = SystemTime::now()
-        .duration_since(UNIX_EPOCH)
-        .expect("system clock before unix epoch");
-    format!("{}-{:03}", duration.as_secs(), duration.subsec_millis())
+    use jiff::fmt::temporal::DateTimePrinter;
+
+    // RFC3339 / ISO 8601 UTC with fixed millisecond precision. Fixed-width
+    // fractional digits keep the string lexicographically sortable, which the
+    // store and the browser projection both rely on (timestamps are used as
+    // `ORDER BY` / `localeCompare` sort keys). A `jiff::Timestamp` is UTC, so
+    // the printed form ends in `Z`.
+    let now = jiff::Timestamp::now();
+    let mut buf = String::new();
+    DateTimePrinter::new()
+        .precision(Some(3))
+        .print_timestamp(&now, &mut buf)
+        .expect("formatting a timestamp into a String cannot fail");
+    buf
 }
 
 pub fn prefixed_id(prefix: &str) -> String {

packages/components/package.json

@@ -11,6 +11,7 @@
     "typecheck": "tsc --noEmit -p tsconfig.json"
   },
   "dependencies": {
+    "dayjs": "^1.11.21",
     "lucide-react": "^1.17.0",
     "react": "^19.2.7"
   },

packages/components/src/atoms/Badge/Badge.scss

@@ -1,45 +1,53 @@
 .msBadge {
   --ms-badge-bg: var(--ms-color-badge-neutral-bg);
+  --ms-badge-border: var(--ms-color-badge-neutral-border);
   --ms-badge-text: var(--ms-color-badge-neutral-text);
 
   display: inline-flex;
   align-items: center;
+  justify-content: center;
   min-width: 0;
-  border: 1px solid var(--ms-color-border);
+  min-height: 1.5rem;
+  border: 1px solid var(--ms-badge-border);
   border-radius: 999px;
   background: var(--ms-badge-bg);
   color: var(--ms-badge-text);
-  font-weight: 600;
-  letter-spacing: 0.02em;
+  font-weight: 650;
+  letter-spacing: 0.01em;
   line-height: 1.15;
+  white-space: nowrap;
 
   &--size-sm {
-    padding: 0.1875rem 0.5rem;
+    padding: 0.125rem 0.5rem;
     font-size: var(--ms-font-size-xs);
   }
 
   &--size-md {
-    padding: 0.25rem 0.625rem;
+    padding: 0.1875rem 0.625rem;
     font-size: var(--ms-font-size-sm);
   }
 
   &--tone-neutral {
     --ms-badge-bg: var(--ms-color-badge-neutral-bg);
+    --ms-badge-border: var(--ms-color-badge-neutral-border);
     --ms-badge-text: var(--ms-color-badge-neutral-text);
   }
 
   &--tone-accent {
     --ms-badge-bg: var(--ms-color-badge-accent-bg);
+    --ms-badge-border: var(--ms-color-badge-accent-border);
     --ms-badge-text: var(--ms-color-badge-accent-text);
   }
 
   &--tone-success {
     --ms-badge-bg: var(--ms-color-badge-success-bg);
+    --ms-badge-border: var(--ms-color-badge-success-border);
     --ms-badge-text: var(--ms-color-badge-success-text);
   }
 
   &--tone-danger {
     --ms-badge-bg: var(--ms-color-badge-danger-bg);
+    --ms-badge-border: var(--ms-color-badge-danger-border);
     --ms-badge-text: var(--ms-color-badge-danger-text);
   }
 }