AmrMsCLL · Oct 11, 2026 · Oct 11, 2026
diff --git a/app/frontend/package.json b/app/frontend/package.json
@@ -28,7 +28,7 @@
     "@excalidraw/excalidraw": "0.18.1",
     "@hocuspocus/provider": "4.7.0",
     "@mozilla/readability": "0.6.0",
-    "@project-graphite/ui": "https://github.com/project-graphite/graphite-ui/releases/download/v0.3.0/project-graphite-ui-0.3.0.tgz",
+    "@project-graphite/ui": "https://github.com/project-graphite/graphite-ui/releases/download/v0.4.0/project-graphite-ui-0.4.0.tgz",
     "@tiptap/core": "3.31.4",
     "@tiptap/extension-collaboration": "3.31.4",
     "@tiptap/extension-collaboration-caret": "3.31.4",

diff --git a/app/frontend/src/App.tsx b/app/frontend/src/App.tsx
@@ -26,13 +26,11 @@ import { ForgotPasswordPage, ResetPasswordPage } from './pages/PasswordPages';
 import { RegisterPage } from './pages/RegisterPage';
 import { RsvpPage, SharePage } from './pages/RsvpPages';
 import { SavePage } from './pages/SavePage';
-import { ApiSettings } from './pages/settings/ApiSettings';
 import { DataSettings } from './pages/settings/DataSettings';
+import { DeveloperSettings } from './pages/settings/DeveloperSettings';
 import { ProfileSettings } from './pages/settings/ProfileSettings';
 import { SecuritySettings } from './pages/settings/SecuritySettings';
-import { SessionsSettings } from './pages/settings/SessionsSettings';
 import { SettingsLayout } from './pages/settings/SettingsLayout';
-import { TokensSettings } from './pages/settings/TokensSettings';
 import { SpaceActivity } from './pages/spaces/SpaceActivity';
 import { SpaceItems } from './pages/spaces/SpaceItems';
 import { SpaceLayout } from './pages/spaces/SpaceLayout';
@@ -282,9 +280,10 @@ export function App() {
           >
             <Route index element={<ProfileSettings />} />
             <Route path="security" element={<SecuritySettings />} />
-            <Route path="sessions" element={<SessionsSettings />} />
-            <Route path="tokens" element={<TokensSettings />} />
-            <Route path="api" element={<ApiSettings />} />
+            <Route path="developer" element={<DeveloperSettings />} />
+            <Route path="sessions" element={<Navigate replace to="/settings/security" />} />
+            <Route path="tokens" element={<Navigate replace to="/settings/developer" />} />
+            <Route path="api" element={<Navigate replace to="/settings/developer" />} />
             <Route path="data" element={<DataSettings />} />
           </Route>
           <Route path="*" element={<NotFoundPage />} />

diff --git a/app/frontend/src/choices.ts b/app/frontend/src/choices.ts
@@ -0,0 +1,23 @@
+import type { SelectOption } from '@project-graphite/ui';
+
+function offsetOf(zone: string) {
+  return new Intl.DateTimeFormat('en', { timeZone: zone, timeZoneName: 'shortOffset' }).formatToParts(new Date()).find((part) => part.type === 'timeZoneName')?.value ?? '';
+}
+
+let zones: SelectOption[] | undefined;
+
+export function timeZoneOptions(current?: string | null) {
+  zones ??= [...new Set(['Etc/UTC', ...Intl.supportedValuesOf('timeZone')])].map((zone) => {
+    const parts = zone.split('/');
+    return { value: zone, label: parts.at(-1)!.replaceAll('_', ' '), hint: `${parts.length > 1 ? `${parts.slice(0, -1).join(' / ').replaceAll('_', ' ')} · ` : ''}${offsetOf(zone)}` };
+  });
+  return current && !zones.some((option) => option.value === current) ? [{ value: current, label: current }, ...zones] : zones;
+}
+
+const currencyNames = new Intl.DisplayNames(undefined, { type: 'currency' });
+
+export function currencyOptions(codes: string[]) {
+  return [...new Set(codes)].sort().map((code) => ({ value: code, label: code, hint: currencyNames.of(code) }));
+}
+
+export const allCurrencies = Intl.supportedValuesOf('currency');
diff --git a/app/frontend/src/components/CopyLink.tsx b/app/frontend/src/components/CopyLink.tsx
@@ -1,9 +1,25 @@
+import { useState } from 'react';
+import { Icon } from '@project-graphite/ui';
+
 export function CopyLink({ link }: { link: string }) {
+  const [copied, setCopied] = useState(false);
   return (
-    <div className="flex flex-wrap items-center gap-3">
-      <code className="mono-sm break-all text-ink">{link}</code>
-      <button className="secondary-button px-3 py-2 text-sm" onClick={() => void navigator.clipboard.writeText(link)} type="button">
-        Copy link
+    <div className="flex min-w-0 items-center gap-2 rounded-[var(--radius-field)] border border-line bg-surface py-1.5 pr-1.5 pl-3">
+      <code className="mono-sm min-w-0 flex-1 truncate text-ink select-all" title={link}>
+        {link}
+      </code>
+      <button
+        className="secondary-button shrink-0 px-3 py-1.5 text-sm"
+        onClick={() =>
+          void navigator.clipboard.writeText(link).then(() => {
+            setCopied(true);
+            window.setTimeout(() => setCopied(false), 2000);
+          })
+        }
+        type="button"
+      >
+        <Icon name={copied ? 'check-mark' : 'link'} size={16} />
+        {copied ? 'Copied' : 'Copy link'}
       </button>
     </div>
   );

diff --git a/app/frontend/src/components/DatePoll.tsx b/app/frontend/src/components/DatePoll.tsx
@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import { DatePicker, TimePicker } from '@project-graphite/ui';
 import { useAction } from '../useAction';
 
 export type PollAnswer = 'yes' | 'maybe' | 'no';
@@ -96,12 +97,12 @@ export function PollEditor({
       }}
     >
       {rows.map((row, index) => (
-        <div className="flex flex-wrap items-center gap-2" key={index}>
-          <input aria-label={`Date ${index + 1}`} onChange={(event) => update(index, { startsOn: event.currentTarget.value })} type="date" value={row.startsOn} />
-          <input
+        <div className="grid grid-cols-[minmax(0,1fr)_minmax(0,9rem)_auto] items-center gap-2" key={index}>
+          <DatePicker aria-label={`Date ${index + 1}`} onChange={(startsOn) => update(index, { startsOn })} value={row.startsOn} />
+          <TimePicker
             aria-label={`Time ${index + 1} (optional)`}
-            onChange={(event) => update(index, { startTime: event.currentTarget.value || null })}
-            type="time"
+            emptyLabel="Any time"
+            onChange={(startTime) => update(index, { startTime: startTime || null })}
             value={row.startTime ?? ''}
           />
           {rows.length > 2 && (

diff --git a/app/frontend/src/components/DevicePush.tsx b/app/frontend/src/components/DevicePush.tsx
@@ -36,10 +36,16 @@ export function DevicePush() {
     })();
   }, [request]);
 
-  if (key.data?.publicKey === null) return <p className="m-0 text-sm text-muted">Notifications on your devices are not set up on this server yet.</p>;
-  if (device === null) {
-    return <p className="m-0 text-sm text-muted">This browser cannot show notifications from Strata. Install Strata as an app, or use a recent Chrome, Edge, Firefox or Safari.</p>;
-  }
+  const note = (text: string) => (
+    <div className="panel-rows">
+      <div className="panel-row">
+        <p className="m-0 font-medium text-ink">Notifications on this device</p>
+        <p className="m-0 mt-0.5 text-sm text-muted">{text}</p>
+      </div>
+    </div>
+  );
+  if (key.data?.publicKey === null) return note('Not set up on this server yet.');
+  if (device === null) return note('This browser cannot show notifications from Strata. Install Strata as an app, or use a recent Chrome, Edge, Firefox or Safari.');
   if (!device || !key.data) return null;
   const { registration, subscription, kinds } = device;
   const publicKey = key.data.publicKey;
@@ -53,7 +59,7 @@ export function DevicePush() {
   }
 
   return (
-    <div className="grid gap-3">
+    <div className="panel-rows">
       <Toggle
         checked={kinds !== null}
         description="Shows inbox notices on this device, even when Strata is closed."

diff --git a/app/frontend/src/components/EventEditor.tsx b/app/frontend/src/components/EventEditor.tsx
@@ -1,8 +1,8 @@
-import { Dialog, TextAreaField, TextField } from '@project-graphite/ui';
+import { DatePicker, Dialog, Select, TextAreaField, TextField, TimePicker } from '@project-graphite/ui';
 import type { EventDetails } from '../agenda';
 import { useAuth } from '../auth';
-import { useSpaces } from '../spaces';
-import { repeatPresets, reminderPresets } from '../tasks';
+import { spaceOptions, useSpaces } from '../spaces';
+import { reminderOptions, repeatOptions } from '../tasks';
 import { useAction } from '../useAction';
 import { atMost, required, useFormErrors, type Check } from '../validation';
 
@@ -26,7 +26,6 @@ export function EventEditor({
   const saving = useAction();
   const form = useFormErrors();
   const editable = (spaces.data ?? []).filter((space) => space.role !== 'viewer');
-  const custom = event?.repeatRule && !repeatPresets.some(([value]) => value === event.repeatRule);
 
   return (
     <Dialog onClose={onClose} title={event ? `Edit ${event.title}` : 'New event'}>
@@ -73,55 +72,27 @@ export function EventEditor({
       >
         <TextField defaultValue={event?.title} label="Title" maxLength={200} {...form.field('title')} />
         {!event && (
-          <label className="field-label">
-            Space
-            <select defaultValue={editable[0]?.id} name="spaceId">
-              {editable.map((space) => (
-                <option key={space.id} value={space.id}>
-                  {space.name}
-                </option>
-              ))}
-            </select>
-          </label>
+          <Select
+            defaultValue={editable[0]?.id}
+            label="Space"
+            name="spaceId"
+            options={spaceOptions(editable)}
+          />
         )}
-        <div className="grid gap-4 sm:grid-cols-2">
-          <label className="field-label">
-            Starts
-            <input defaultValue={event?.startsOn ?? startsOn} name="startsOn" type="date" />
-          </label>
-          <label className="field-label">
-            Start time (empty for all day)
-            <input defaultValue={event?.startTime ?? ''} name="startTime" type="time" />
-          </label>
-          <label className="field-label">
-            Ends
-            <input defaultValue={event?.endsOn ?? ''} name="endsOn" type="date" />
-          </label>
-          <label className="field-label">
-            End time
-            <input defaultValue={event?.endTime ?? ''} name="endTime" type="time" />
-          </label>
-          <label className="field-label">
-            Repeats
-            <select defaultValue={event?.repeatRule ?? ''} name="repeatRule">
-              {repeatPresets.map(([value, label]) => (
-                <option key={value} value={value}>
-                  {label}
-                </option>
-              ))}
-              {custom && <option value={event.repeatRule!}>Custom ({event.repeatRule})</option>}
-            </select>
-          </label>
-          <label className="field-label">
-            Remind me
-            <select defaultValue={event?.reminderMinutes === null || !event ? '' : String(event.reminderMinutes)} name="reminderMinutes">
-              {reminderPresets.map(([value, label]) => (
-                <option key={value} value={value}>
-                  {label}
-                </option>
-              ))}
-            </select>
-          </label>
+        <div className="grid gap-x-4 gap-y-1 sm:grid-cols-2">
+          <DatePicker
+            defaultValue={event?.startsOn ?? startsOn ?? ''}
+            error={form.errors.startsOn}
+            label="Starts"
+            name="startsOn"
+            onChange={form.field('startsOn').onInput}
+            optional={false}
+          />
+          <TimePicker defaultValue={event?.startTime ?? ''} emptyLabel="All day" label="Start time" name="startTime" />
+          <DatePicker defaultValue={event?.endsOn ?? ''} label="Ends" name="endsOn" placeholder="Same day" />
+          <TimePicker defaultValue={event?.endTime ?? ''} emptyLabel="No end time" label="End time" name="endTime" />
+          <Select defaultValue={event?.repeatRule ?? ''} label="Repeats" name="repeatRule" options={repeatOptions(event?.repeatRule)} />
+          <Select defaultValue={event?.reminderMinutes == null ? '' : String(event.reminderMinutes)} label="Remind me" name="reminderMinutes" options={reminderOptions(event?.reminderMinutes)} />
         </div>
         <TextField defaultValue={event?.location ?? ''} label="Where" maxLength={200} name="location" />
         <TextField defaultValue={event?.meetingUrl ?? ''} inputMode="url" label="Meeting link" {...form.field('meetingUrl')} />

diff --git a/app/frontend/src/components/ImportPages.tsx b/app/frontend/src/components/ImportPages.tsx
@@ -1,7 +1,7 @@
 import { useState } from 'react';
-import { Dialog } from '@project-graphite/ui';
+import { Dialog, Select } from '@project-graphite/ui';
 import { useAuth } from '../auth';
-import type { Space } from '../spaces';
+import { spaceOptions, type Space } from '../spaces';
 import { useAction } from '../useAction';
 
 export function ImportPages({ onClose, onDone, spaces }: { onClose: () => void; onDone: () => void; spaces: Space[] }) {
@@ -33,16 +33,7 @@ export function ImportPages({ onClose, onDone, spaces }: { onClose: () => void;
           Markdown files become pages. For a Notion export, unzip it and choose the folder: pages keep their nesting and their images come along.
         </p>
         {spaces.length > 1 && (
-          <label className="field-label">
-            Space
-            <select onChange={(event) => setSpaceId(event.currentTarget.value)} value={spaceId}>
-              {spaces.map((space) => (
-                <option key={space.id} value={space.id}>
-                  {space.name}
-                </option>
-              ))}
-            </select>
-          </label>
+          <Select label="Space" onChange={setSpaceId} options={spaceOptions(spaces)} value={spaceId} />
         )}
         <div className="flex flex-wrap gap-3">
           <label className={`secondary-button ${importing.busy ? 'pointer-events-none opacity-60' : ''}`}>

diff --git a/app/frontend/src/components/NoteHistory.tsx b/app/frontend/src/components/NoteHistory.tsx
@@ -29,7 +29,7 @@ export function NoteHistory({ editable, noteId, onClose }: { editable: boolean;
           <EmptyState title="No earlier versions yet" />
         ) : (
           <>
-            <ul className="panel-rows m-0 grid max-h-56 list-none overflow-y-auto p-0">
+            <ul className="panel-rows max-h-56 overflow-y-auto">
               {versions.data.map((version) => (
                 <li key={version.id}>
                   <button

diff --git a/app/frontend/src/components/NoteMark.tsx b/app/frontend/src/components/NoteMark.tsx
@@ -0,0 +1,10 @@
+import { Icon } from '@project-graphite/ui';
+import type { Note } from '../notes';
+
+export function NoteMark({ note }: { note: Pick<Note, 'icon' | 'kind'> }) {
+  return (
+    <span aria-hidden="true" className="note-mark">
+      {note.icon ?? <Icon name={note.kind === 'board' ? 'board' : 'file'} size={16} />}
+    </span>
+  );
+}
diff --git a/app/frontend/src/components/Page.tsx b/app/frontend/src/components/Page.tsx
@@ -0,0 +1,72 @@
+import type { ReactNode } from 'react';
+import { Icon, PageHeader, type IconName } from '@project-graphite/ui';
+
+export function Page({
+  actions,
+  children,
+  description,
+  eyebrow,
+  title,
+  wide = false,
+}: {
+  actions?: ReactNode;
+  children: ReactNode;
+  description?: ReactNode;
+  eyebrow?: ReactNode;
+  title: ReactNode;
+  wide?: boolean;
+}) {
+  return (
+    <section className={`page-enter grid content-start gap-8 ${wide ? '' : 'max-w-3xl'}`}>
+      <PageHeader actions={actions} eyebrow={eyebrow} title={title}>
+        {description}
+      </PageHeader>
+      {children}
+    </section>
+  );
+}
+
+export function HeaderButton({
+  disabled,
+  icon,
+  label,
+  onClick,
+  primary = false,
+}: {
+  disabled?: boolean;
+  icon?: IconName;
+  label: string;
+  onClick: () => void;
+  primary?: boolean;
+}) {
+  return (
+    <button className={`${primary ? 'primary-button' : 'secondary-button'} px-3 py-2 text-sm`} disabled={disabled} onClick={onClick} type="button">
+      {icon && <Icon name={icon} size={16} />}
+      {label}
+    </button>
+  );
+}
+
+export function Toolbar({ actions, children }: { actions?: ReactNode; children?: ReactNode }) {
+  return (
+    <div className="flex flex-wrap items-center gap-3">
+      <div className="flex min-w-0 flex-1 flex-wrap items-center gap-2">{children}</div>
+      {actions && <div className="flex shrink-0 items-center gap-2">{actions}</div>}
+    </div>
+  );
+}
+
+export function Section({ action, children, description, title }: { action?: ReactNode; children: ReactNode; description?: ReactNode; title: string }) {
+  return (
+    <section className="grid gap-3">
+      <div className="flex flex-wrap items-center justify-between gap-3">
+        <div className="min-w-0">
+          <h2 className="m-0 text-lg font-medium">{title}</h2>
+          {description && <p className="m-0 mt-1 text-sm text-muted">{description}</p>}
+        </div>
+        {action}
+      </div>
+      {children}
+    </section>
+  );
+}