+
+ );
+}
diff --git a/studio/src/app/workspace/settings/_components/option-field.tsx b/studio/src/app/workspace/settings/_components/option-field.tsx
new file mode 100644
index 0000000000..a07fdf4953
--- /dev/null
+++ b/studio/src/app/workspace/settings/_components/option-field.tsx
@@ -0,0 +1,131 @@
+"use client";
+
+import { Check, ChevronDown } from "lucide-react";
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Sheet, SheetContent, SheetTitle } from "@/components/ui/sheet";
+import { useIsMobile } from "@/hooks/use-mobile";
+import { cn } from "@/lib/utils";
+
+export interface OptionItem {
+ value: string;
+ label: string;
+ icon?: React.ComponentType<{ className?: string }>;
+}
+
+/**
+ * A select-style settings control: a trigger button showing the current
+ * choice that opens a dropdown on desktop and a bottom sheet on mobile
+ * (the app's picker convention — pill groups don't scale on small screens).
+ */
+export function OptionField({
+ label,
+ value,
+ options,
+ onChange,
+}: {
+ /** Accessible name for the control (the visible label lives beside it). */
+ label: string;
+ value: string;
+ options: readonly OptionItem[];
+ onChange: (value: string) => void;
+}) {
+ const isMobile = useIsMobile();
+ const [sheetOpen, setSheetOpen] = useState(false);
+ const current = options.find((option) => option.value === value);
+ const CurrentIcon = current?.icon;
+
+ const trigger = (
+
+ );
+
+ if (isMobile) {
+ return (
+ <>
+ {trigger}
+
+
+
+ {avatarUrl ? (
+ // biome-ignore lint/performance/noImgElement: a locally stored data URL, not a remote image
+ 
+ ) : (
+ fallback
+ )}
+
+ {/* Remove lives on the picture itself: hover (or keyboard focus)
+ reveals a small ×; without a picture there is nothing to remove. */}
+ {avatarUrl && (
+
+ )}
+
+
+
+
+
+ {options.map((option) => {
+ const Icon = option.icon;
+ return (
+
+ );
+ })}
+
+
+
+ setName(event.target.value)}
+ maxLength={40}
+ className="w-44 min-[500px]:w-60"
+ />
+
+
+
+
+
+
+ {children}
+ + {title} +
+ {description ? ( +{description}
+ ) : null} +` for hairline separators —
+ * the first/last padding collapses so a lone row sits flush in its card.
+ */
+export function SettingsRow({
+ label,
+ description,
+ htmlFor,
+ className,
+ children,
+}: {
+ label: React.ReactNode;
+ description?: React.ReactNode;
+ /** Ties the label to a form control (e.g. a Switch or Input id). */
+ htmlFor?: string;
+ className?: string;
+ children: React.ReactNode;
+}) {
+ return (
+
+ Managed by the external mecated deployment. Configuration writes are not
+ available from this UI — change the deployment’s own settings
+ instead.
+
+ );
+}
+
+function OfflineNote() {
+ return (
+
+ The runtime is offline — its configuration cannot be read right now.
+
+ );
+}
diff --git a/studio/src/app/workspace/settings/_components/settings-header.tsx b/studio/src/app/workspace/settings/_components/settings-header.tsx
new file mode 100644
index 0000000000..2f963d042e
--- /dev/null
+++ b/studio/src/app/workspace/settings/_components/settings-header.tsx
@@ -0,0 +1,63 @@
+"use client";
+
+import { ArrowLeft } from "lucide-react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { Button } from "@/components/ui/button";
+import { pageTitleClass } from "@/lib/typography";
+import { cn } from "@/lib/utils";
+import { settingsSectionFor } from "./settings-sections";
+
+/**
+ * Mobile-only subpage header, styled like the chat header: a full-bleed
+ * h-14 bar with a back arrow and the section title. On a section's deeper
+ * pages (e.g. a memory entry) the arrow goes up to the section; on the
+ * section page itself it goes back to the settings index. Renders nothing
+ * on the index or from 500px up.
+ */
+export function SettingsMobileBar() {
+ const pathname = usePathname() ?? "";
+ const section = settingsSectionFor(pathname);
+ if (!section) return null;
+
+ const backHref =
+ pathname === section.href ? "/workspace/settings" : section.href;
+
+ return (
+
+
+ );
+}
diff --git a/studio/src/app/workspace/settings/appearance/page.tsx b/studio/src/app/workspace/settings/appearance/page.tsx
new file mode 100644
index 0000000000..7efe7f02a1
--- /dev/null
+++ b/studio/src/app/workspace/settings/appearance/page.tsx
@@ -0,0 +1,187 @@
+"use client";
+
+import {
+ Bell,
+ BellRing,
+ CornerDownRight,
+ ListEnd,
+ Minus,
+ Monitor,
+ Moon,
+ PanelLeft,
+ PanelRight,
+ Plus,
+ Sun,
+} from "lucide-react";
+import { useTheme } from "next-themes";
+import { useEffect, useState } from "react";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
+import {
+ UI_SCALE_MAX,
+ UI_SCALE_MIN,
+ useSessionListSide,
+ useUiScale,
+} from "@/lib/profile-preferences";
+import { OptionField } from "../_components/option-field";
+import { SettingsCard, SettingsRow } from "../_components/settings-card";
+
+const THEME_OPTIONS = [
+ { value: "light", label: "Light", icon: Sun },
+ { value: "dark", label: "Dark", icon: Moon },
+ { value: "system", label: "System", icon: Monitor },
+] as const;
+
+const SIDE_OPTIONS = [
+ { value: "left", label: "Left", icon: PanelLeft },
+ { value: "right", label: "Right", icon: PanelRight },
+] as const;
+
+export default function AppearanceSettingsPage() {
+ const { theme: activeTheme, setTheme } = useTheme();
+ const { side, setSide } = useSessionListSide();
+ const { scale, setScale } = useUiScale();
+
+ // Browser notifications: permission mirrored into state so the row reflects
+ // granted / denied / not-yet-asked; "unsupported" hides the row's actions.
+ const [notifyPermission, setNotifyPermission] = useState<
+ NotificationPermission | "unsupported"
+ >("default");
+ useEffect(() => {
+ if (typeof window !== "undefined" && "Notification" in window) {
+ setNotifyPermission(Notification.permission);
+ } else {
+ setNotifyPermission("unsupported");
+ }
+ }, []);
+
+ async function enableNotifications() {
+ if (typeof Notification === "undefined") return;
+ const result = await Notification.requestPermission();
+ setNotifyPermission(result);
+ if (result === "granted") {
+ toast.success("Browser notifications enabled");
+ } else if (result === "denied") {
+ toast.error("Notifications are blocked — enable them in your browser.");
+ }
+ }
+
+ function sendTestNotification() {
+ if (
+ typeof Notification === "undefined" ||
+ Notification.permission !== "granted"
+ ) {
+ return;
+ }
+ new Notification("Scheduled task finished", {
+ body: "Daily dependency audit completed — 0 critical vulnerabilities found.",
+ tag: "atrium-example",
+ icon: "/favicon.ico",
+ });
+ toast.success("Test notification sent");
+ }
+
+ // next-themes resolves only on the client; gate the current value on mount
+ // so the trigger shows the real choice instead of a flash of "system".
+ const [mounted, setMounted] = useState(false);
+ useEffect(() => setMounted(true), []);
+
+ return (
+
+
+ );
+}
diff --git a/studio/src/app/workspace/settings/chat/page.tsx b/studio/src/app/workspace/settings/chat/page.tsx
new file mode 100644
index 0000000000..8c718de438
--- /dev/null
+++ b/studio/src/app/workspace/settings/chat/page.tsx
@@ -0,0 +1,6 @@
+import { redirect } from "next/navigation";
+
+/** The Enter-behavior setting lives on Personalize now; keep old links. */
+export default function LegacyChatSettingsPage() {
+ redirect("/workspace/settings/appearance");
+}
diff --git a/studio/src/app/workspace/settings/layout.tsx b/studio/src/app/workspace/settings/layout.tsx
new file mode 100644
index 0000000000..3d4851f6b1
--- /dev/null
+++ b/studio/src/app/workspace/settings/layout.tsx
@@ -0,0 +1,30 @@
+import {
+ SettingsMobileBar,
+ SettingsTitle,
+} from "./_components/settings-header";
+import { SettingsNav } from "./_components/settings-nav";
+
+export default function SettingsLayout({
+ children,
+}: Readonly<{
+ children: React.ReactNode;
+}>) {
+ return (
+
+ Learning proposals are not enabled on this daemon.
+
+ )}
+ {reflectionSupported && ("staged");
+ const [proposals, setProposals] = useState([]);
+ const [isLoading, setIsLoading] = useState(true);
+ const [error, setError] = useState(null);
+ const [notice, setNotice] = useState(null);
+ const [busyId, setBusyId] = useState(null);
+
+ const load = useCallback(
+ async (signal?: AbortSignal) => {
+ try {
+ const page = await listLearningProposals({ status: filter }, signal);
+ if (signal?.aborted) return;
+ setProposals(page.proposals);
+ setError(null);
+ } catch (caught) {
+ if (signal?.aborted) return;
+ setProposals([]);
+ setError(caught instanceof Error ? caught.message : String(caught));
+ } finally {
+ if (!signal?.aborted) setIsLoading(false);
+ }
+ },
+ [filter],
+ );
+
+ useEffect(() => {
+ if (!connected) return;
+ const controller = new AbortController();
+ void load(controller.signal);
+ return () => controller.abort();
+ }, [connected, load]);
+
+ /**
+ * Runs one decision/undo. A 409 proposal_conflict means the proposal
+ * changed underneath the review — the honest move is refresh-and-re-review,
+ * never a blind retry with the new version.
+ */
+ const act = async (
+ proposal: LearningProposal,
+ run: () => Promise,
+ done: string,
+ ) => {
+ setBusyId(proposal.id);
+ setNotice(null);
+ try {
+ await run();
+ toast.success(done);
+ await load();
+ } catch (caught) {
+ if (isProposalConflict(caught)) {
+ setNotice(
+ "That proposal changed since it was loaded — the queue was refreshed. Review it again before deciding.",
+ );
+ await load();
+ } else {
+ setError(caught instanceof Error ? caught.message : String(caught));
+ }
+ } finally {
+ setBusyId(null);
+ }
+ };
+
+ return (
+
+
+ );
+}
+
+/** One proposal: the bounded digest detail plus the status-appropriate actions. */
+function ProposalRow({
+ proposal,
+ busy,
+ onApprove,
+ onReject,
+ onUndo,
+}: {
+ proposal: LearningProposal;
+ busy: boolean;
+ onApprove: () => void;
+ onReject: () => void;
+ onUndo: () => void;
+}) {
+ const updated = formatRelativeTime(proposal.updatedAtUnix * 1000);
+ const digest = proposal.value || proposal.body;
+ const title = proposal.title || proposal.key || proposal.id;
+
+ return (
+
+
+ );
+}
+
+/**
+ * Explicit reflection over one completed chat: the daemon re-reads the
+ * session and stages proposals from it (which then land in the queue above).
+ * Synchronous and model-driven — it can take a minute.
+ */
+function ReflectionCard({ connected }: { connected: boolean }) {
+ const [sessions, setSessions] = useState<{ id: string; title: string }[]>([]);
+ const [selected, setSelected] = useState("");
+ const [isReflecting, setIsReflecting] = useState(false);
+ const [receipt, setReceipt] = useState(null);
+ const [error, setError] = useState(null);
+
+ useEffect(() => {
+ if (!connected) return;
+ const controller = new AbortController();
+ // One inventory page is plenty for a picker; rows arrive newest-first.
+ fetchAllSessions(controller.signal, 1)
+ .then(({ sessions: rows }) => {
+ if (controller.signal.aborted) return;
+ setSessions(
+ rows
+ .filter((row) => row.isChat && row.state === "completed")
+ .slice(0, 20)
+ .map((row) => ({
+ id: row.sessionId,
+ title: row.title || row.sessionId,
+ })),
+ );
+ })
+ .catch(() => {
+ if (!controller.signal.aborted) setSessions([]);
+ });
+ return () => controller.abort();
+ }, [connected]);
+
+ const reflect = async () => {
+ if (!selected) return;
+ setIsReflecting(true);
+ setError(null);
+ setReceipt(null);
+ try {
+ setReceipt(await reflectHarnessSession(selected));
+ } catch (caught) {
+ setError(caught instanceof Error ? caught.message : String(caught));
+ } finally {
+ setIsReflecting(false);
+ }
+ };
+
+ const summary = useMemo(() => {
+ if (!receipt) return null;
+ if (receipt.abstained) {
+ return "The daemon abstained — nothing in that session was worth remembering.";
+ }
+ const parts = [
+ `${receipt.staged} staged`,
+ `${receipt.promoted} promoted`,
+ `${receipt.conflicted} conflicted`,
+ ];
+ if (receipt.queued > 0) parts.push(`${receipt.queued} queued`);
+ return parts.join(" · ");
+ }, [receipt]);
+
+ return (
+
+
+ );
+}
diff --git a/studio/src/app/workspace/settings/memory/[memoryId]/page.tsx b/studio/src/app/workspace/settings/memory/[memoryId]/page.tsx
new file mode 100644
index 0000000000..4af310db33
--- /dev/null
+++ b/studio/src/app/workspace/settings/memory/[memoryId]/page.tsx
@@ -0,0 +1,14 @@
+import { redirect } from "next/navigation";
+
+/**
+ * Memory details are a dedicated page outside the settings nav now; keep the
+ * old nested URL working for bookmarks.
+ */
+export default async function LegacySettingsMemoryDetailPage({
+ params,
+}: {
+ params: Promise<{ memoryId: string }>;
+}) {
+ const { memoryId } = await params;
+ redirect(`/workspace/memory/${memoryId}`);
+}
diff --git a/studio/src/app/workspace/settings/memory/_components/consolidate-memory.tsx b/studio/src/app/workspace/settings/memory/_components/consolidate-memory.tsx
new file mode 100644
index 0000000000..22225057a9
--- /dev/null
+++ b/studio/src/app/workspace/settings/memory/_components/consolidate-memory.tsx
@@ -0,0 +1,294 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import {
+ AlertDialog,
+ AlertDialogAction,
+ AlertDialogCancel,
+ AlertDialogContent,
+ AlertDialogDescription,
+ AlertDialogFooter,
+ AlertDialogHeader,
+ AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from "@/components/ui/select";
+import { useRuntimeStatus } from "@/features/agent/runtime-status";
+import {
+ type DreamPlan,
+ type DreamReceipt,
+ type DreamTarget,
+ decideDreamPlan,
+ dreamTargetCapability,
+ generateDreamPlan,
+ isStaleDreamPlan,
+} from "@/lib/harness/dream";
+import { SettingsCard } from "../../_components/settings-card";
+
+/**
+ * Manual memory consolidation (ADR 0227): the daemon curates a bounded merge
+ * plan over its own memory store; the human applies or dismisses the WHOLE
+ * plan. This stays inside memory rule 8 — Studio never composes memory
+ * content, it only decides on what the daemon proposed.
+ *
+ * Plan ids are process-local: a daemon restart answers dream_not_found, which
+ * renders as "regenerate", never as a retry.
+ */
+
+const TARGET_LABELS: Record = {
+ user_model: "User model (facts about you)",
+ project_memory: "Project memory",
+};
+
+export function ConsolidateMemoryCard() {
+ const { connected, serverCapabilities } = useRuntimeStatus();
+ const manualDream = serverCapabilities.manual_dream;
+
+ const targets = useMemo(
+ () =>
+ (Object.keys(TARGET_LABELS) as DreamTarget[]).filter(
+ (target) => dreamTargetCapability(manualDream, target).generate,
+ ),
+ [manualDream],
+ );
+
+ const [target, setTarget] = useState("user_model");
+ const [plan, setPlan] = useState(null);
+ const [receipt, setReceipt] = useState(null);
+ const [isGenerating, setIsGenerating] = useState(false);
+ const [isDeciding, setIsDeciding] = useState(false);
+ const [notice, setNotice] = useState(null);
+ const [error, setError] = useState(null);
+ const [confirmApply, setConfirmApply] = useState(false);
+
+ // Absent capability → the surface hides entirely (older/leaner daemon).
+ if (targets.length === 0) return null;
+
+ const effectiveTarget = targets.includes(target) ? target : targets[0];
+ const canDecide = dreamTargetCapability(manualDream, effectiveTarget).decide;
+
+ const generate = async () => {
+ setIsGenerating(true);
+ setError(null);
+ setNotice(null);
+ setReceipt(null);
+ setPlan(null);
+ try {
+ setPlan(await generateDreamPlan(effectiveTarget));
+ } catch (caught) {
+ setError(caught instanceof Error ? caught.message : String(caught));
+ } finally {
+ setIsGenerating(false);
+ }
+ };
+
+ const decide = async (decision: "apply" | "dismiss") => {
+ if (!plan) return;
+ setIsDeciding(true);
+ setError(null);
+ try {
+ setReceipt(await decideDreamPlan(plan.id, decision));
+ setPlan(null);
+ } catch (caught) {
+ if (isStaleDreamPlan(caught)) {
+ // Process-local id: the daemon restarted or the plan aged out.
+ setPlan(null);
+ setNotice(
+ "That plan is no longer valid (the daemon restarted or the plan expired) — generate a new one.",
+ );
+ } else {
+ setError(caught instanceof Error ? caught.message : String(caught));
+ }
+ } finally {
+ setIsDeciding(false);
+ }
+ };
+
+ return (
+
+
+
+
+ Apply the consolidation plan?
+
+ The daemon merges the listed memories exactly as shown. Absorbed
+ entries are replaced by their survivor; a memory that changed
+ since planning is skipped as conflicted, never overwritten.
+
+
+
+ Cancel
+ {
+ setConfirmApply(false);
+ void decide("apply");
+ }}
+ >
+ Apply
+
+
+
+
+
+ );
+}
diff --git a/studio/src/app/workspace/settings/memory/page.tsx b/studio/src/app/workspace/settings/memory/page.tsx
new file mode 100644
index 0000000000..6bcf910e6e
--- /dev/null
+++ b/studio/src/app/workspace/settings/memory/page.tsx
@@ -0,0 +1,148 @@
+"use client";
+
+import { Brain } from "lucide-react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useMemo } from "react";
+import {
+ directed,
+ SortableHead,
+ useTableSort,
+} from "@/components/sortable-head";
+import {
+ Table,
+ TableBody,
+ TableCell,
+ TableHeader,
+ TableRow,
+} from "@/components/ui/table";
+import { type MemoryEntry, useAgentMemory } from "@/features/agent";
+import { ConsolidateMemoryCard } from "./_components/consolidate-memory";
+
+/**
+ * The agent's remembered facts, read-only — a settings subpage. The one
+ * mutation offered is the daemon-curated consolidation flow below the table
+ * (ADR 0227), which never accepts free-text content (memory rule 8).
+ */
+export default function MemorySettingsPage() {
+ const memory = useAgentMemory();
+ const sort = useTableSort<"name" | "remembers">("name");
+
+ const entries = useMemo(() => {
+ const byName = (a: MemoryEntry, b: MemoryEntry) =>
+ a.title.localeCompare(b.title);
+ const primary = (a: MemoryEntry, b: MemoryEntry) =>
+ sort.key === "remembers"
+ ? (a.content || "").localeCompare(b.content || "")
+ : byName(a, b);
+ return [...memory.entries].sort(
+ (a, b) => directed(sort.dir, primary(a, b)) || byName(a, b),
+ );
+ }, [memory.entries, sort.key, sort.dir]);
+
+ // The consolidation card gates itself on capabilities.manual_dream, and the
+ // project-memory target can be consolidatable even when the user model is
+ // disabled — so it renders as a sibling of every state below.
+ if (!memory.isSupported) {
+ return (
+ <>
+ router.push(href)}>
+
+ e.stopPropagation()}
+ className="block truncate text-sm font-medium hover:underline"
+ >
+ {entry.title}
+
+ {/* Mobile collapses to a single stacked cell, like the other tables. */}
+
+
+
+
+ );
+}
diff --git a/studio/src/app/workspace/settings/notifications/page.tsx b/studio/src/app/workspace/settings/notifications/page.tsx
new file mode 100644
index 0000000000..ba4711c5b9
--- /dev/null
+++ b/studio/src/app/workspace/settings/notifications/page.tsx
@@ -0,0 +1,6 @@
+import { redirect } from "next/navigation";
+
+/** Notification settings live on Personalize now; keep old links. */
+export default function LegacyNotificationSettingsPage() {
+ redirect("/workspace/settings/appearance");
+}
diff --git a/studio/src/app/workspace/settings/page.tsx b/studio/src/app/workspace/settings/page.tsx
new file mode 100644
index 0000000000..41c602f788
--- /dev/null
+++ b/studio/src/app/workspace/settings/page.tsx
@@ -0,0 +1,68 @@
+"use client";
+
+import { ChevronRight } from "lucide-react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useEffect } from "react";
+import { cn } from "@/lib/utils";
+import { SETTINGS_GROUPS } from "./_components/settings-sections";
+
+/**
+ * The settings index. On mobile it is the first level of a native-style
+ * drill-down, following the inset-grouped-list convention: filled cards
+ * (no border), a neutral icon square, and hairline dividers inset to the
+ * text edge. Desktop keeps the old
+ * behaviour — land on the first section, with the left secondary nav for
+ * switching — via a client redirect (the split is a viewport question,
+ * so the server cannot decide it).
+ */
+export default function SettingsIndexPage() {
+ const router = useRouter();
+
+ useEffect(() => {
+ if (window.matchMedia("(min-width: 500px)").matches) {
+ router.replace("/workspace/settings/profile");
+ }
+ }, [router]);
+
+ return (
+
+
+ );
+}
+
+export function Note({ children }: { children: React.ReactNode }) {
+ return
+ {htmlFor ? (
+
+ ) : (
+
+ {label}
+ )} + {description ? ( ++ {description} +
+ ) : null} +{children}
+ {children}
; +} + +/** Shown in place of a form when the configuration is owned elsewhere: the + * controller answers 409 for every write in external mode, so offering the + * form would only manufacture errors. */ +function ExternalManagedNote() { + return ( +
+
+
+ );
+}
+
+/**
+ * The big serif page title. On a mobile subpage the SettingsMobileBar
+ * replaces it; everywhere else (desktop, and the mobile index) it renders.
+ */
+export function SettingsTitle() {
+ const pathname = usePathname() ?? "";
+ const section = settingsSectionFor(pathname);
+
+ return (
+ + {section.label} +
++ Settings +
+ ); +} diff --git a/studio/src/app/workspace/settings/_components/settings-nav.tsx b/studio/src/app/workspace/settings/_components/settings-nav.tsx new file mode 100644 index 0000000000..2c3fc97680 --- /dev/null +++ b/studio/src/app/workspace/settings/_components/settings-nav.tsx @@ -0,0 +1,54 @@ +"use client"; + +import Link from "next/link"; +import { usePathname } from "next/navigation"; +import { cn } from "@/lib/utils"; +import { SETTINGS_GROUPS } from "./settings-sections"; + +/** + * The settings sections as a left secondary menu; one subpage per section. + * Hidden on mobile, where the settings index renders the same sections as a + * drill-down list instead (see `settings/page.tsx`). + */ +export function SettingsNav() { + const pathname = usePathname(); + return ( + + ); +} diff --git a/studio/src/app/workspace/settings/_components/settings-sections.ts b/studio/src/app/workspace/settings/_components/settings-sections.ts new file mode 100644 index 0000000000..19a5982c40 --- /dev/null +++ b/studio/src/app/workspace/settings/_components/settings-sections.ts @@ -0,0 +1,72 @@ +import { Bot, Brain, GraduationCap, Palette, UserRound } from "lucide-react"; + +export interface SettingsSection { + href: string; + label: string; + icon: React.ComponentType<{ className?: string }>; +} + +/** + * The settings information architecture, shared by the desktop secondary nav, + * the mobile drill-down list on the settings index, and the mobile subpage + * back-header. One entry per subpage. + */ +export const SETTINGS_GROUPS: Array<{ + label: string; + items: SettingsSection[]; +}> = [ + { + label: "Preferences", + items: [ + { + href: "/workspace/settings/profile", + label: "You", + icon: UserRound, + }, + { + href: "/workspace/settings/appearance", + label: "Personalize", + icon: Palette, + }, + // After Appearance: identity, then how the app looks, then how the chat + // behaves, then when it interrupts you. + ], + }, + { + label: "Agent runtime", + items: [ + { + href: "/workspace/settings/agent", + label: "Agent", + icon: Bot, + }, + { + href: "/workspace/settings/memory", + label: "Memory", + icon: Brain, + }, + { + href: "/workspace/settings/learning", + label: "Learning", + icon: GraduationCap, + }, + ], + }, +]; + +/** + * The section a pathname belongs to, for the mobile back-header and the + * desktop nav active state. Prefix-aware so a section's deeper pages + * (e.g. a memory entry) still resolve to their section. + */ +export function settingsSectionFor( + pathname: string, +): SettingsSection | undefined { + for (const group of SETTINGS_GROUPS) { + const hit = group.items.find( + (item) => item.href === pathname || pathname.startsWith(`${item.href}/`), + ); + if (hit) return hit; + } + return undefined; +} diff --git a/studio/src/app/workspace/settings/agent/page.tsx b/studio/src/app/workspace/settings/agent/page.tsx new file mode 100644 index 0000000000..1a1a6f5b97 --- /dev/null +++ b/studio/src/app/workspace/settings/agent/page.tsx @@ -0,0 +1,49 @@ +"use client"; + +import { Bot } from "lucide-react"; +import { Input } from "@/components/ui/input"; +import { useAgentAvatar, useAgentDisplayName } from "@/lib/profile-preferences"; +import { AvatarPicker } from "../_components/avatar-picker"; +import { SettingsCard, SettingsRow } from "../_components/settings-card"; + +/** + * The agent's cosmetic identity — display name and picture, browser-local + * (no daemon concept of either). The picture replaces the default bot mark + * in chat. + */ +export default function AgentSettingsPage() { + const { name, setName, defaultName } = useAgentDisplayName(); + const { avatarUrl, setAvatarUrl } = useAgentAvatar(); + + return ( +
+
+ setName(event.target.value)}
+ maxLength={40}
+ className="w-44 min-[500px]:w-60"
+ />
+
+
+
+
+
+
+
+
+
+ {/* Same footprint as the OptionField triggers so the control
+ column lines up. */}
+
+
+ {/* Meaningless on mobile — the session list is full-screen there. */}
+
+ setSide(next as "left" | "right")}
+ />
+
+
+ {notifyPermission !== "unsupported" && (
+
+
+ )}
+
+
+
+
+ {Math.round(scale * 100)}%
+
+
+
+
+
+
+
+
+ {/* Mobile subpages get a chat-style back header, full-bleed so its
+ border spans the card; the scroll area below keeps the padding. */}
+
+ );
+}
diff --git a/studio/src/app/workspace/settings/learning/page.tsx b/studio/src/app/workspace/settings/learning/page.tsx
new file mode 100644
index 0000000000..0d8362d240
--- /dev/null
+++ b/studio/src/app/workspace/settings/learning/page.tsx
@@ -0,0 +1,455 @@
+"use client";
+
+import { GraduationCap } from "lucide-react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { toast } from "sonner";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from "@/components/ui/select";
+import { useRuntimeStatus } from "@/features/agent/runtime-status";
+import { formatRelativeTime } from "@/lib/formatters";
+import { fetchAllSessions } from "@/lib/harness/client";
+import {
+ decideLearningProposal,
+ isProposalConflict,
+ type LearningProposal,
+ listLearningProposals,
+ type ReflectionReceipt,
+ reflectHarnessSession,
+ undoLearningPromotion,
+} from "@/lib/harness/learning";
+import { cn } from "@/lib/utils";
+import { Note, SettingsCard } from "../_components/settings-card";
+
+/**
+ * Settings → Learning: the human half of the daemon's reflection loop
+ * (ADR 0109). Pending proposals are reviewed here — approve promotes the
+ * daemon-curated digest into memory, reject retires it, undo reverts a
+ * promotion. Studio never composes memory content; it only decides on what
+ * the daemon staged (the same posture as the read-only Memory panel).
+ */
+
+/** Status pills over the daemon's proposal vocabulary ("staged" = pending). */
+const PROPOSAL_FILTERS = [
+ { value: "staged", label: "Pending" },
+ { value: "promoted", label: "Promoted" },
+ { value: "rejected", label: "Rejected" },
+] as const;
+type ProposalFilterValue = (typeof PROPOSAL_FILTERS)[number]["value"];
+
+export default function LearningSettingsPage() {
+ const runtime = useRuntimeStatus();
+ const proposalsSupported =
+ runtime.serverCapabilities.learning_proposals === true;
+ const reflectionSupported = runtime.serverCapabilities.reflection === true;
+
+ if (!proposalsSupported && !reflectionSupported) {
+ return (
+
+
+
+
+
+
+ {children}
+
+
+ );
+ }
+
+ return (
+ <>
+ {proposalsSupported ? (
+
+
+
+
+
+
+ + Learning is not supported by this daemon +
++ This daemon reports neither learning proposals nor reflection in + its capabilities. Enable learning in the daemon’s settings + (learning.mode) to review what the agent wants to remember. +
+
+
+
+ {PROPOSAL_FILTERS.map((f) => (
+
+ ))}
+
+
+ {notice && (
+ + {notice} +
+ )} + {error &&{error}
} + + {isLoading && connected ? ( ++ Loading proposals… +
+ ) : proposals.length === 0 ? ( ++ {filter === "staged" + ? "Nothing waiting for review." + : `No ${filter} proposals.`} +
+ ) : ( +-
+ {proposals.map((proposal) => (
+
+
+ {title}
+
+ {proposal.kind && {proposal.kind} }
+ {proposal.projectScoped && project }
+ {updated && (
+ {updated} ago
+ )}
+
+ {proposal.key && proposal.key !== title && (
+ + {proposal.key} +
+ )} + {proposal.description && ( +{proposal.description}
+ )} + {digest && ( +
+ {digest}
+
+ )}
+
+ {proposal.evidenceCount > 0 && (
+
+ {proposal.evidenceCount} evidence ref
+ {proposal.evidenceCount === 1 ? "" : "s"}
+
+ )}
+ {proposal.triggers.slice(0, 4).map((trigger) => (
+
+ {trigger}
+
+ ))}
+
+
+ {proposal.status === "staged" && (
+ <>
+
+
+
+ )}
+ {proposal.status === "promoted" && (
+
+ )}
+ {proposal.status !== "staged" && proposal.status !== "promoted" && (
+ {proposal.status.replaceAll("_", " ")}
+ )}
+
+
+ No completed chats to reflect on yet.
+ )}
+ {isReflecting && (
+
+
+
+
+
+ {sessions.length === 0 && (
+ + Reflection is model-driven and can take a minute — leave this page + open. +
+ )} + {summary && ( ++ Reflection {receipt?.disposition || "finished"}: {summary} +
+ )} + {error &&{error}
} +
+
+
+
+ {targets.length > 1 ? (
+
+ ) : (
+
+ {TARGET_LABELS[effectiveTarget]}
+
+ )}
+
+
+ {isGenerating && (
+ + The daemon is reviewing its memories — this can take a minute. +
+ )} + {notice && ( ++ {notice} +
+ )} + {error &&{error}
} + + {plan && plan.operations.length === 0 && ( +
+
+ )}
+
+ {plan && plan.operations.length > 0 && (
+ + Nothing to consolidate — this memory is already tidy. +
+ +
+
+ )}
+
+ {receipt && (
+ + {plan.plannedOperationCount} operation + {plan.plannedOperationCount === 1 ? "" : "s"} over{" "} + {plan.plannedSourceCount} memor + {plan.plannedSourceCount === 1 ? "y" : "ies"}. Review, then apply + or dismiss the whole plan. +
+-
+ {plan.operations.map((operation) => (
+
- source.key)
+ .join(",")}`}
+ className="space-y-2 rounded-lg border p-3"
+ >
+ ++
+ {operation.kind.replaceAll("_", " ") || "merge"} + + {operation.reason && ( + + {operation.reason} + + )} ++++ Keeps{" "} + + {operation.survivor.key} + + {operation.sources.length > 0 && ( + <> + {" "} + — absorbs{" "} + {operation.sources.map((source, i) => ( + + {i > 0 && ", "} + {source.key} + + ))} + + )} +
+ {operation.replacement.value && ( ++ {operation.replacement.value} ++ )} +
+ ))}
+
+
+
+
+ + {receipt.disposition === "apply" + ? `Applied: ${receipt.applied} merged, ${receipt.conflicted} conflicted, ${receipt.skipped} skipped, ${receipt.failed} failed.` + : "Plan dismissed — nothing changed."} +
+ )} +
+
+
+
+
+
+
+
+ + Memory is disabled on this daemon +
++ The daemon is running without a user model (e.g. started with + --no-user-model), so there are no remembered facts to show. +
+ {memory.disabledReason && ( ++ {memory.disabledReason} +
+ )} +
+ Loading memory…
+
+ );
+ }
+
+ if (entries.length === 0) {
+ return (
+ <>
+
+ The agent hasn't stored any facts yet.
+
+
+
+
+
+ + {entry.content || "No description recorded."} +
++ {entry.content || "No description recorded."} +
+
+ {SETTINGS_GROUPS.map((group) => (
+
+
+ ))}
+
+ );
+}
diff --git a/studio/src/app/workspace/settings/profile/page.tsx b/studio/src/app/workspace/settings/profile/page.tsx
new file mode 100644
index 0000000000..6aa2ca1951
--- /dev/null
+++ b/studio/src/app/workspace/settings/profile/page.tsx
@@ -0,0 +1,5 @@
+import { ProfileSection } from "../_components/profile-section";
+
+export default function ProfileSettingsPage() {
+ return + {group.label} +
+
+ {group.items.map((item, index) => {
+ const Icon = item.icon;
+ return (
+
+ {/* Bare glyph, sized explicitly so the global mobile
+ size-4 bump doesn't inflate it. */}
+
+