v1.9: settings pane + per-project defaults + bulk archive + themes lift
Adds a singleton, ephemeral 'settings' pane kind to the workspace. Opened via a new bottom-pinned button in ProjectSidebar (emits an open_settings_pane event when a session is mounted; navigates to /settings otherwise). Pane has three sections — Session, Project, Theme — and a maximize toggle that hides sibling pane columns via display:none on desktop only. Settings panes don't count toward MAX_PANES and are filtered out of the localStorage persistence layer so reload always restores a clean workspace. Schema (additive): - projects.default_system_prompt TEXT NOT NULL DEFAULT '' - projects.default_web_search_enabled BOOLEAN NOT NULL DEFAULT false - sessions.web_search_enabled BOOLEAN (nullable; null = inherit) Inference resolves user_prompt = session.system_prompt.trim() || project.default_system_prompt.trim() — empty/whitespace at either layer means "no override". Keeps the columns NOT NULL and matches the existing inherit semantics. Server routes: - GET /api/projects/:id (new; settings pane refetches on project_updated) - PATCH /api/projects/:id accepts default_system_prompt, default_web_search_enabled - PATCH /api/sessions/:id accepts web_search_enabled (tri-state) - POST /api/projects/:id/sessions/archive-all + GET /api/projects/:id/sessions/open-count - POST /api/sessions/:id/chats/archive-all + GET /api/sessions/:id/chats/open-count - PATCH /api/sessions/:id now broadcasts session_updated on every successful PATCH (was rename-only). Lets SettingsPane open in another tab pick up edits without a refetch. Bulk-archive publishes one session_archived / chat_archived frame per affected id so useSidebar's existing reducer cases handle them incrementally — no new frame type, no payload widening. ModelPicker refactored: shared ModelList inside a responsive shell. Desktop = labeled trigger + DropdownMenu, mobile = icon-only Cpu button + BottomSheet. Header in Session.tsx drops the pill wrap on mobile since the new trigger is the visual. ChatInput gains an icon-only '+' DropdownMenu next to AgentPicker when sessionId + webSearchEnabled props are provided. One item for now — Web search — with a checkmark reflecting the stored value (true), not the effective one. Click PATCHes the override; to restore inherit-from-project the user opens SettingsPane. ThemePicker lifted out of pages/Settings.tsx into a reusable component. The standalone /settings route is now a thin wrapper that mounts <ThemePicker /> with a Back button on top (navigate(-1) with fallback to '/'); the SettingsPane Theme tab renders the same picker bare. Project section delete-flow removed (button + confirm dialog + handler). Replaced with "Archive all sessions" using the same two-step count → confirm → fire pattern as "Archive all chats" in the Session section. api.projects.remove() stays in the client because useProjects.ts still uses it. Hand-rolled Switch primitive in SettingsPane (no shadcn switch in the project; spec said no new deps). Section nav is plain buttons (no shadcn Tabs). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -1,8 +1,14 @@
|
||||
import { useCallback, useEffect, useRef, useState, type DragEvent, type KeyboardEvent } from 'react';
|
||||
import { Send } from 'lucide-react';
|
||||
import { Check, Plus, Send } from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from '@/components/ui/dropdown-menu';
|
||||
import {
|
||||
flattenToMessage,
|
||||
inferLanguage,
|
||||
@@ -29,11 +35,18 @@ interface Props {
|
||||
// When omitted, the toolbar row is hidden entirely.
|
||||
agentId?: string | null;
|
||||
onAgentChange?: (agentId: string | null) => void | Promise<void>;
|
||||
// v1.9: when sessionId + webSearchEnabled are both provided, the + menu
|
||||
// renders next to the AgentPicker with a single "Web search" toggle item.
|
||||
// The check reflects the *stored* session value (not the effective one):
|
||||
// null counts as unchecked. Clicking PATCHes session.web_search_enabled
|
||||
// with the inverted boolean (null → true, true → false, false → true).
|
||||
sessionId?: string;
|
||||
webSearchEnabled?: boolean | null;
|
||||
onSend: (content: string) => void | Promise<void>;
|
||||
onForceSend?: (content: string) => void | Promise<void>;
|
||||
}
|
||||
|
||||
export function ChatInput({ disabled, projectId, agentId, onAgentChange, onSend, onForceSend }: Props) {
|
||||
export function ChatInput({ disabled, projectId, agentId, onAgentChange, sessionId, webSearchEnabled, onSend, onForceSend }: Props) {
|
||||
const { isMobile } = useViewport();
|
||||
const [value, setValue] = useState('');
|
||||
const [busy, setBusy] = useState(false);
|
||||
@@ -425,16 +438,51 @@ export function ChatInput({ disabled, projectId, agentId, onAgentChange, onSend,
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{/* Batch 9 toolbar — agent picker. Sits above the input row so it
|
||||
doesn't compete with the send button for vertical alignment.
|
||||
When Batch 7 lands, ModelPicker and the + button join this row. */}
|
||||
{onAgentChange && (
|
||||
{/* Batch 9 toolbar — agent picker. v1.9 adds the icon-only + menu next
|
||||
to it for quick toggles (currently: Web search). When omitted at the
|
||||
callsite the row stays collapsed so nothing else has to change. */}
|
||||
{(onAgentChange || sessionId) && (
|
||||
<div className="px-4 pt-2 flex items-center gap-1.5">
|
||||
<AgentPicker
|
||||
projectId={projectId}
|
||||
value={agentId ?? null}
|
||||
onChange={onAgentChange}
|
||||
/>
|
||||
{onAgentChange && (
|
||||
<AgentPicker
|
||||
projectId={projectId}
|
||||
value={agentId ?? null}
|
||||
onChange={onAgentChange}
|
||||
/>
|
||||
)}
|
||||
{sessionId && (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Quick toggles"
|
||||
title="Quick toggles"
|
||||
className="inline-flex items-center justify-center size-6 rounded text-muted-foreground hover:bg-muted hover:text-foreground"
|
||||
>
|
||||
<Plus className="size-3.5" />
|
||||
</button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="start">
|
||||
<DropdownMenuItem
|
||||
onSelect={async () => {
|
||||
// v1.9: tri-state collapses to two on the wire when toggled
|
||||
// here. null (inherit) treated as off; click flips to true.
|
||||
// To restore "inherit" the user opens SettingsPane.
|
||||
const next = webSearchEnabled === true ? false : true;
|
||||
try {
|
||||
await api.sessions.update(sessionId, { web_search_enabled: next });
|
||||
} catch (err) {
|
||||
toast.error(err instanceof Error ? err.message : 'failed to toggle web search');
|
||||
}
|
||||
}}
|
||||
className="text-xs"
|
||||
>
|
||||
<Check className={`size-3 ${webSearchEnabled === true ? 'opacity-100' : 'opacity-0'}`} />
|
||||
Web search
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<div className="px-4 py-3 flex items-end gap-2">
|
||||
|
||||
@@ -5,6 +5,7 @@ import {
|
||||
Edit2,
|
||||
MessageSquare,
|
||||
MoreHorizontal,
|
||||
Settings as SettingsIcon,
|
||||
Terminal,
|
||||
X,
|
||||
} from 'lucide-react';
|
||||
@@ -33,6 +34,7 @@ interface Props {
|
||||
function paneIcon(kind: WorkspacePane['kind']) {
|
||||
if (kind === 'terminal') return <Terminal size={14} />;
|
||||
if (kind === 'agent') return <Bot size={14} />;
|
||||
if (kind === 'settings') return <SettingsIcon size={14} />;
|
||||
return <MessageSquare size={14} />;
|
||||
}
|
||||
|
||||
@@ -53,6 +55,7 @@ function paneLabel(pane: WorkspacePane, chats: Chat[]): string {
|
||||
if (pane.kind === 'chat') return 'Chat';
|
||||
if (pane.kind === 'terminal') return 'Terminal';
|
||||
if (pane.kind === 'agent') return 'Agent';
|
||||
if (pane.kind === 'settings') return 'Settings';
|
||||
return 'Empty';
|
||||
}
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { Check, ChevronDown } from 'lucide-react';
|
||||
import { Check, ChevronDown, Cpu } from 'lucide-react';
|
||||
import { api } from '@/api/client';
|
||||
import type { ModelInfo } from '@/api/types';
|
||||
import {
|
||||
@@ -8,26 +8,94 @@ import {
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from '@/components/ui/dropdown-menu';
|
||||
import { BottomSheet } from '@/components/BottomSheet';
|
||||
import { useViewport } from '@/hooks/useViewport';
|
||||
|
||||
interface Props {
|
||||
value: string;
|
||||
onChange: (model: string) => void | Promise<void>;
|
||||
}
|
||||
|
||||
// v1.9: shared list rendered inside both shells. Lazy-fetches /api/models on
|
||||
// first open so the picker doesn't pay for a request when it's never shown.
|
||||
function ModelList({
|
||||
models,
|
||||
error,
|
||||
value,
|
||||
onPick,
|
||||
}: {
|
||||
models: ModelInfo[] | null;
|
||||
error: string | null;
|
||||
value: string;
|
||||
onPick: (id: string) => void;
|
||||
}) {
|
||||
if (error) {
|
||||
return <div className="px-2 py-1.5 text-xs text-destructive">{error}</div>;
|
||||
}
|
||||
if (models === null) {
|
||||
return <div className="px-2 py-1.5 text-xs text-muted-foreground">Loading…</div>;
|
||||
}
|
||||
return (
|
||||
<>
|
||||
{models.map((m) => (
|
||||
<button
|
||||
key={m.id}
|
||||
type="button"
|
||||
onClick={() => onPick(m.id)}
|
||||
className="w-full text-left flex items-center gap-2 font-mono text-xs px-2 py-1.5 hover:bg-accent rounded"
|
||||
>
|
||||
<Check className={`size-3 ${m.id === value ? 'opacity-100' : 'opacity-0'}`} />
|
||||
<span className="truncate">{m.id}</span>
|
||||
</button>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export function ModelPicker({ value, onChange }: Props) {
|
||||
const { isMobile } = useViewport();
|
||||
const [models, setModels] = useState<ModelInfo[] | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (!open || models !== null) return;
|
||||
api.models()
|
||||
api
|
||||
.models()
|
||||
.then(setModels)
|
||||
.catch((err) =>
|
||||
setError(err instanceof Error ? err.message : 'failed to load models')
|
||||
setError(err instanceof Error ? err.message : 'failed to load models'),
|
||||
);
|
||||
}, [open, models]);
|
||||
|
||||
function handlePick(id: string) {
|
||||
setOpen(false);
|
||||
void onChange(id);
|
||||
}
|
||||
|
||||
// v1.9: mobile = icon-only trigger + bottom-sheet shell. Desktop = labeled
|
||||
// trigger (model name + chevron) + dropdown. Same ModelList under the hood.
|
||||
if (isMobile) {
|
||||
return (
|
||||
<>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setOpen(true)}
|
||||
aria-label={`Model: ${value}`}
|
||||
title={value}
|
||||
className="inline-flex items-center justify-center min-h-[44px] min-w-[44px] rounded text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
<Cpu className="size-4" />
|
||||
</button>
|
||||
<BottomSheet open={open} onClose={() => setOpen(false)} title="Model">
|
||||
<div className="px-2 py-2 space-y-1">
|
||||
<ModelList models={models} error={error} value={value} onPick={handlePick} />
|
||||
</div>
|
||||
</BottomSheet>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<DropdownMenu open={open} onOpenChange={setOpen}>
|
||||
<DropdownMenuTrigger asChild>
|
||||
@@ -49,7 +117,7 @@ export function ModelPicker({ value, onChange }: Props) {
|
||||
{models?.map((m) => (
|
||||
<DropdownMenuItem
|
||||
key={m.id}
|
||||
onSelect={() => void onChange(m.id)}
|
||||
onSelect={() => handlePick(m.id)}
|
||||
className="font-mono text-xs"
|
||||
>
|
||||
<Check
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
import { useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { NavLink, useLocation, useNavigate } from 'react-router-dom';
|
||||
import { ChevronRight, ExternalLink, Folder, MessageSquare, Plus } from 'lucide-react';
|
||||
import { ChevronRight, ExternalLink, Folder, MessageSquare, Plus, Settings as SettingsIcon } from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { sessionEvents } from '@/hooks/sessionEvents';
|
||||
import {
|
||||
ContextMenu,
|
||||
ContextMenuContent,
|
||||
@@ -198,7 +199,7 @@ export function ProjectSidebar() {
|
||||
const rowCls = (active: boolean) =>
|
||||
active ? 'bg-sidebar-accent text-sidebar-accent-foreground' : 'hover:bg-sidebar-accent/60';
|
||||
|
||||
const { open: drawerOpen } = useSidebarDrawer();
|
||||
const { open: drawerOpen, setOpen: setDrawerOpen } = useSidebarDrawer();
|
||||
const { isMobile } = useViewport();
|
||||
const pull = usePullToRefresh(() => retry(), { enabled: isMobile });
|
||||
|
||||
@@ -412,6 +413,30 @@ export function ProjectSidebar() {
|
||||
})}
|
||||
</nav>
|
||||
|
||||
{/* v1.9: bottom-pinned Settings button. In a session, opens/focuses the
|
||||
workspace settings pane via the sessionEvents bus (Session.tsx owns
|
||||
the panesHook). Outside a session there's no workspace to mount the
|
||||
pane in, so we navigate to /settings (themes page) instead. */}
|
||||
<div className="border-t shrink-0 p-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
if (activeSession) {
|
||||
sessionEvents.emit({ type: 'open_settings_pane' });
|
||||
if (isMobile) setDrawerOpen(false);
|
||||
} else {
|
||||
navigate('/settings');
|
||||
if (isMobile) setDrawerOpen(false);
|
||||
}
|
||||
}}
|
||||
className="w-full flex items-center gap-2 px-2 py-1.5 rounded-md text-sm hover:bg-sidebar-accent/60 text-sidebar-foreground"
|
||||
aria-label="Settings"
|
||||
>
|
||||
<SettingsIcon className="size-3.5 shrink-0 opacity-70" />
|
||||
<span className="flex-1 text-left">Settings</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<AddProjectModal open={addOpen} onOpenChange={setAddOpen} onAdded={() => {}} />
|
||||
|
||||
<Dialog open={archiveProjectConfirm !== null} onOpenChange={(open) => { if (!open) setArchiveProjectConfirm(null); }}>
|
||||
|
||||
122
apps/web/src/components/ThemePicker.tsx
Normal file
122
apps/web/src/components/ThemePicker.tsx
Normal file
@@ -0,0 +1,122 @@
|
||||
import { useState } from 'react';
|
||||
import { Check } from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
import { Card } from '@/components/ui/card';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
|
||||
import { THEMES, setTheme, useTheme, type ThemeId, type ThemeMode } from '@/lib/theme';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
// v1.9: lifted out of pages/Settings.tsx so the SettingsPane Theme tab and
|
||||
// the standalone /settings route render the same picker. Theme is global —
|
||||
// not per-project, not per-session — so no contextual props are needed.
|
||||
|
||||
const MODES: { value: ThemeMode; label: string; hint: string }[] = [
|
||||
{ value: 'dark', label: 'Dark', hint: 'Use the dark variant.' },
|
||||
{ value: 'light', label: 'Light', hint: 'Use the light variant.' },
|
||||
{ value: 'system', label: 'System', hint: 'Follow OS preference.' },
|
||||
];
|
||||
|
||||
export function ThemePicker() {
|
||||
const { id: currentId, mode: currentMode } = useTheme();
|
||||
// Track the most recent in-flight pick so the picker can show a subtle
|
||||
// "applying…" state on the targeted card while the PATCH is in flight.
|
||||
const [pending, setPending] = useState<
|
||||
{ kind: 'theme'; id: ThemeId } | { kind: 'mode'; mode: ThemeMode } | null
|
||||
>(null);
|
||||
|
||||
async function pickTheme(id: ThemeId) {
|
||||
if (id === currentId || pending) return;
|
||||
setPending({ kind: 'theme', id });
|
||||
try {
|
||||
await setTheme(id, currentMode);
|
||||
} catch (err) {
|
||||
toast.error(err instanceof Error ? err.message : 'failed to apply theme');
|
||||
} finally {
|
||||
setPending(null);
|
||||
}
|
||||
}
|
||||
|
||||
async function pickMode(mode: ThemeMode) {
|
||||
if (mode === currentMode || pending) return;
|
||||
setPending({ kind: 'mode', mode });
|
||||
try {
|
||||
await setTheme(currentId, mode);
|
||||
} catch (err) {
|
||||
toast.error(err instanceof Error ? err.message : 'failed to apply mode');
|
||||
} finally {
|
||||
setPending(null);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
<section className="space-y-3">
|
||||
<h2 className="text-sm font-medium">Mode</h2>
|
||||
<RadioGroup
|
||||
value={currentMode}
|
||||
onValueChange={(v) => void pickMode(v as ThemeMode)}
|
||||
className="flex flex-wrap gap-4"
|
||||
>
|
||||
{MODES.map((m) => (
|
||||
<div key={m.value} className="flex items-center gap-2">
|
||||
<RadioGroupItem id={`mode-${m.value}`} value={m.value} />
|
||||
<Label htmlFor={`mode-${m.value}`} className="cursor-pointer">
|
||||
<span className="font-medium">{m.label}</span>
|
||||
<span className="ml-2 text-xs text-muted-foreground">{m.hint}</span>
|
||||
</Label>
|
||||
</div>
|
||||
))}
|
||||
</RadioGroup>
|
||||
</section>
|
||||
|
||||
<section className="space-y-3">
|
||||
<h2 className="text-sm font-medium">Theme</h2>
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 gap-3">
|
||||
{THEMES.map((t) => {
|
||||
const isActive = t.id === currentId;
|
||||
const isPending = pending?.kind === 'theme' && pending.id === t.id;
|
||||
const isLightOnly = !t.supportsDark;
|
||||
return (
|
||||
<Card
|
||||
key={t.id}
|
||||
onClick={() => void pickTheme(t.id)}
|
||||
className={cn(
|
||||
'p-3 cursor-pointer transition-colors',
|
||||
'hover:bg-accent/10',
|
||||
isActive && 'ring-2 ring-ring',
|
||||
isPending && 'opacity-60',
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<div className="min-w-0">
|
||||
<div className="font-mono text-sm truncate">{t.name}</div>
|
||||
<div className="text-xs text-muted-foreground">{t.family}</div>
|
||||
</div>
|
||||
{isActive && (
|
||||
<span className="inline-flex items-center gap-1 text-xs text-primary shrink-0">
|
||||
<Check className="size-3" /> Selected
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex mt-2 rounded overflow-hidden border border-border/40">
|
||||
{t.anchors.map((hex, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="flex-1 h-6"
|
||||
style={{ backgroundColor: hex }}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
{isLightOnly && (
|
||||
<div className="mt-2 text-xs text-muted-foreground italic">Light only</div>
|
||||
)}
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,9 +1,11 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { PanelRight, MessageSquare, Terminal, Bot } from 'lucide-react';
|
||||
import type { Chat, WorkspacePane } from '@/api/types';
|
||||
import type { Chat, Project, Session, WorkspacePane } from '@/api/types';
|
||||
import { MAX_PANES, type UseWorkspacePanesResult } from '@/hooks/useWorkspacePanes';
|
||||
import type { UseSessionChatsResult } from '@/hooks/useSessionChats';
|
||||
import { useViewport } from '@/hooks/useViewport';
|
||||
import { ChatPane } from '@/components/panes/ChatPane';
|
||||
import { SettingsPane } from '@/components/panes/SettingsPane';
|
||||
import { ChatTabBar } from '@/components/ChatTabBar';
|
||||
import { SessionLandingPage } from '@/components/SessionLandingPage';
|
||||
import {
|
||||
@@ -24,6 +26,9 @@ interface Props {
|
||||
// (MobileTabSwitcher) can share state with the pane grid.
|
||||
panesHook: UseWorkspacePanesResult;
|
||||
chatsHook: UseSessionChatsResult;
|
||||
// v1.9: passed through to SettingsPane when one is mounted in the grid.
|
||||
session: Session;
|
||||
project: Project | null;
|
||||
}
|
||||
|
||||
export function Workspace({
|
||||
@@ -33,6 +38,8 @@ export function Workspace({
|
||||
onAgentChange,
|
||||
panesHook,
|
||||
chatsHook,
|
||||
session,
|
||||
project,
|
||||
}: Props) {
|
||||
const {
|
||||
panes,
|
||||
@@ -67,6 +74,28 @@ export function Workspace({
|
||||
|
||||
const { isMobile } = useViewport();
|
||||
|
||||
// v1.9: workspace-level maximize state for the settings pane. CSS-only:
|
||||
// sibling panes get display:none, the maximized pane fills the grid cell.
|
||||
// ESC listener only mounted while maximized. Mobile is always full-width
|
||||
// for a single pane so maximize doesn't apply.
|
||||
const [maximized, setMaximized] = useState(false);
|
||||
const settingsIdx = panes.findIndex((p) => p.kind === 'settings');
|
||||
|
||||
useEffect(() => {
|
||||
if (!maximized) return;
|
||||
function onKey(e: KeyboardEvent) {
|
||||
if (e.key === 'Escape') setMaximized(false);
|
||||
}
|
||||
window.addEventListener('keydown', onKey);
|
||||
return () => window.removeEventListener('keydown', onKey);
|
||||
}, [maximized]);
|
||||
|
||||
// If the settings pane was closed (no longer in panes) while maximized,
|
||||
// clear the maximize state so the grid renders normally.
|
||||
useEffect(() => {
|
||||
if (maximized && settingsIdx < 0) setMaximized(false);
|
||||
}, [maximized, settingsIdx]);
|
||||
|
||||
function chatsForPane(pane: WorkspacePane): Chat[] {
|
||||
return pane.chatIds
|
||||
.map((id) => chats.find((c) => c.id === id))
|
||||
@@ -81,10 +110,12 @@ export function Workspace({
|
||||
<DropdownMenuTrigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
disabled={panes.length >= MAX_PANES}
|
||||
// v1.9: settings panes excluded from the MAX cap (decision c).
|
||||
disabled={panes.filter((p) => p.kind !== 'settings').length >= MAX_PANES}
|
||||
className={cn(
|
||||
'flex items-center gap-1 text-xs px-2 py-1 rounded hover:bg-muted',
|
||||
panes.length >= MAX_PANES && 'opacity-40 cursor-not-allowed hover:bg-transparent'
|
||||
panes.filter((p) => p.kind !== 'settings').length >= MAX_PANES &&
|
||||
'opacity-40 cursor-not-allowed hover:bg-transparent'
|
||||
)}
|
||||
>
|
||||
<PanelRight size={14} />
|
||||
@@ -114,12 +145,24 @@ export function Workspace({
|
||||
style={
|
||||
isMobile
|
||||
? undefined
|
||||
: { gridTemplateColumns: `repeat(${panes.length}, minmax(0, 1fr))` }
|
||||
: maximized && settingsIdx >= 0
|
||||
? { gridTemplateColumns: 'minmax(0, 1fr)' }
|
||||
: { gridTemplateColumns: `repeat(${panes.length}, minmax(0, 1fr))` }
|
||||
}
|
||||
>
|
||||
{panes.map((pane, idx) => {
|
||||
const visible = !isMobile || idx === activePaneIdx;
|
||||
if (!visible) return null;
|
||||
const isSettings = pane.kind === 'settings';
|
||||
// v1.9: when maximized, hide every pane except the settings one.
|
||||
// display:none keeps the React tree mounted so streams / drafts
|
||||
// survive the toggle without re-mount cost.
|
||||
const hiddenForMaximize = !isMobile && maximized && idx !== settingsIdx;
|
||||
const visible = (!isMobile || idx === activePaneIdx) && !hiddenForMaximize;
|
||||
if (!visible) {
|
||||
if (hiddenForMaximize) {
|
||||
return <div key={pane.id} className="hidden" />;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<div
|
||||
key={pane.id}
|
||||
@@ -131,19 +174,19 @@ export function Workspace({
|
||||
'before:absolute before:inset-y-0 before:left-0 before:w-0.5 before:bg-primary before:z-10'
|
||||
)}
|
||||
onClick={() => setActivePaneIdx(idx)}
|
||||
onDragOver={!isMobile && panes.length > 1 ? handlePaneDragOver(idx) : undefined}
|
||||
onDragLeave={!isMobile && panes.length > 1 ? handlePaneDragLeave : undefined}
|
||||
onDrop={!isMobile && panes.length > 1 ? handlePaneDrop(idx) : undefined}
|
||||
onDragOver={!isMobile && !isSettings && panes.length > 1 ? handlePaneDragOver(idx) : undefined}
|
||||
onDragLeave={!isMobile && !isSettings && panes.length > 1 ? handlePaneDragLeave : undefined}
|
||||
onDrop={!isMobile && !isSettings && panes.length > 1 ? handlePaneDrop(idx) : undefined}
|
||||
>
|
||||
<div
|
||||
draggable={!isMobile && panes.length > 1}
|
||||
onDragStart={!isMobile && panes.length > 1 ? handlePaneDragStart(idx) : undefined}
|
||||
onDragEnd={!isMobile && panes.length > 1 ? handlePaneDragEnd : undefined}
|
||||
draggable={!isMobile && !isSettings && panes.length > 1}
|
||||
onDragStart={!isMobile && !isSettings && panes.length > 1 ? handlePaneDragStart(idx) : undefined}
|
||||
onDragEnd={!isMobile && !isSettings && panes.length > 1 ? handlePaneDragEnd : undefined}
|
||||
>
|
||||
{/* Hidden on mobile per v1.8: chat-within-pane navigation
|
||||
is not exposed on small screens; users switch panes via
|
||||
the header pill instead. */}
|
||||
{!isMobile && (
|
||||
{/* Hidden on mobile per v1.8; settings panes own their own
|
||||
section nav / maximize toggle so they skip ChatTabBar
|
||||
entirely. */}
|
||||
{!isMobile && !isSettings && (
|
||||
<ChatTabBar
|
||||
pane={pane}
|
||||
tabs={chatsForPane(pane)}
|
||||
@@ -161,7 +204,15 @@ export function Workspace({
|
||||
</div>
|
||||
|
||||
<div className="flex-1 min-h-0 overflow-hidden">
|
||||
{pane.kind === 'chat' && pane.chatId ? (
|
||||
{isSettings && project ? (
|
||||
<SettingsPane
|
||||
session={session}
|
||||
project={project}
|
||||
maximized={maximized}
|
||||
onToggleMaximize={() => setMaximized((v) => !v)}
|
||||
isMobile={isMobile}
|
||||
/>
|
||||
) : pane.kind === 'chat' && pane.chatId ? (
|
||||
<ChatPane
|
||||
sessionId={sessionId}
|
||||
chatId={pane.chatId}
|
||||
@@ -169,6 +220,7 @@ export function Workspace({
|
||||
agentId={agentId}
|
||||
onAgentChange={onAgentChange}
|
||||
sessionChats={chats}
|
||||
webSearchEnabled={session.web_search_enabled}
|
||||
/>
|
||||
) : (
|
||||
<SessionLandingPage
|
||||
|
||||
@@ -22,9 +22,13 @@ interface Props {
|
||||
agentId?: string | null;
|
||||
onAgentChange?: (agentId: string | null) => void | Promise<void>;
|
||||
sessionChats?: import('@/api/types').Chat[];
|
||||
// v1.9: threaded down to ChatInput's + menu (Web search quick toggle).
|
||||
// null means "inherit project default" — ChatInput PATCHes with the
|
||||
// opposite of the effective value.
|
||||
webSearchEnabled?: boolean | null;
|
||||
}
|
||||
|
||||
export function ChatPane({ sessionId, chatId, projectId, agentId, onAgentChange, sessionChats }: Props) {
|
||||
export function ChatPane({ sessionId, chatId, projectId, agentId, onAgentChange, sessionChats, webSearchEnabled }: Props) {
|
||||
const stream = useSessionStream(sessionId);
|
||||
const lastErrorRef = useRef<string | null>(null);
|
||||
const [queue, setQueue] = useState<string[]>([]);
|
||||
@@ -173,8 +177,10 @@ export function ChatPane({ sessionId, chatId, projectId, agentId, onAgentChange,
|
||||
<ChatInput
|
||||
disabled={false}
|
||||
projectId={projectId}
|
||||
sessionId={sessionId}
|
||||
agentId={agentId}
|
||||
onAgentChange={onAgentChange}
|
||||
webSearchEnabled={webSearchEnabled}
|
||||
onSend={handleSend}
|
||||
onForceSend={streaming ? handleForceSend : undefined}
|
||||
/>
|
||||
|
||||
520
apps/web/src/components/panes/SettingsPane.tsx
Normal file
520
apps/web/src/components/panes/SettingsPane.tsx
Normal file
@@ -0,0 +1,520 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { Archive, Maximize2, Minimize2 } from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
import { api } from '@/api/client';
|
||||
import type { Project, Session } from '@/api/types';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog';
|
||||
import { ModelPicker } from '@/components/ModelPicker';
|
||||
import { ThemePicker } from '@/components/ThemePicker';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
type Section = 'session' | 'project' | 'theme';
|
||||
|
||||
interface Props {
|
||||
session: Session;
|
||||
project: Project;
|
||||
maximized: boolean;
|
||||
onToggleMaximize: () => void;
|
||||
isMobile: boolean;
|
||||
}
|
||||
|
||||
// v1.9: hand-rolled Switch primitive. No shadcn switch in the existing
|
||||
// ui/ set and the dispatch said don't pnpm dlx for v1.9 either. Single
|
||||
// purpose — clicking flips aria-checked + calls onCheckedChange.
|
||||
function Switch({
|
||||
checked,
|
||||
onCheckedChange,
|
||||
disabled,
|
||||
id,
|
||||
}: {
|
||||
checked: boolean;
|
||||
onCheckedChange: (v: boolean) => void;
|
||||
disabled?: boolean;
|
||||
id?: string;
|
||||
}) {
|
||||
return (
|
||||
<button
|
||||
id={id}
|
||||
type="button"
|
||||
role="switch"
|
||||
aria-checked={checked}
|
||||
disabled={disabled}
|
||||
onClick={() => onCheckedChange(!checked)}
|
||||
className={cn(
|
||||
'relative inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full transition-colors',
|
||||
checked ? 'bg-primary' : 'bg-muted',
|
||||
disabled && 'opacity-50 cursor-not-allowed',
|
||||
)}
|
||||
>
|
||||
<span
|
||||
className={cn(
|
||||
'inline-block h-4 w-4 transform rounded-full bg-background transition-transform',
|
||||
checked ? 'translate-x-[1.125rem]' : 'translate-x-0.5',
|
||||
)}
|
||||
/>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
export function SettingsPane({ session, project, maximized, onToggleMaximize, isMobile }: Props) {
|
||||
const [activeSection, setActiveSection] = useState<Section>('session');
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full min-h-0">
|
||||
<div className="flex items-center gap-2 border-b border-border bg-muted/20 px-3 py-1.5 shrink-0">
|
||||
<div className="flex items-center gap-1 flex-1 min-w-0">
|
||||
{(['session', 'project', 'theme'] as const).map((s) => (
|
||||
<button
|
||||
key={s}
|
||||
type="button"
|
||||
onClick={() => setActiveSection(s)}
|
||||
className={cn(
|
||||
'text-xs px-2 py-1 rounded capitalize',
|
||||
activeSection === s
|
||||
? 'bg-background text-foreground'
|
||||
: 'text-muted-foreground hover:bg-muted',
|
||||
)}
|
||||
>
|
||||
{s}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
{!isMobile && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onToggleMaximize}
|
||||
className="inline-flex items-center justify-center p-1 rounded text-muted-foreground hover:bg-muted hover:text-foreground"
|
||||
aria-label={maximized ? 'Restore' : 'Maximize'}
|
||||
title={maximized ? 'Restore (Esc)' : 'Maximize'}
|
||||
>
|
||||
{maximized ? <Minimize2 size={14} /> : <Maximize2 size={14} />}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
<div className="max-w-[720px] mx-auto w-full px-4 py-4 space-y-6">
|
||||
{activeSection === 'session' && <SessionSection session={session} project={project} />}
|
||||
{activeSection === 'project' && <ProjectSection project={project} />}
|
||||
{activeSection === 'theme' && <ThemePicker />}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function SessionSection({ session, project }: { session: Session; project: Project }) {
|
||||
const [name, setName] = useState(session.name);
|
||||
const [systemPrompt, setSystemPrompt] = useState(session.system_prompt);
|
||||
// v1.9: tri-state on the wire (null = inherit). UI surfaces a 3-way toggle
|
||||
// via "Inherit project default" checkbox plus the override switch.
|
||||
const [webSearch, setWebSearch] = useState<boolean | null>(session.web_search_enabled);
|
||||
const [saving, setSaving] = useState(false);
|
||||
// v1.9: bulk-archive chats. Two-step: openChatsCount → confirm dialog →
|
||||
// archiveAllChats. Server publishes one chat_archived frame per id so
|
||||
// useSidebar / chat lists update incrementally.
|
||||
const [archiveOpen, setArchiveOpen] = useState(false);
|
||||
const [archiveCount, setArchiveCount] = useState(0);
|
||||
const [archiving, setArchiving] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setName(session.name);
|
||||
setSystemPrompt(session.system_prompt);
|
||||
setWebSearch(session.web_search_enabled);
|
||||
}, [session.id, session.name, session.system_prompt, session.web_search_enabled]);
|
||||
|
||||
const dirty =
|
||||
name !== session.name ||
|
||||
systemPrompt !== session.system_prompt ||
|
||||
webSearch !== session.web_search_enabled;
|
||||
|
||||
const effectiveWebSearch = webSearch ?? project.default_web_search_enabled;
|
||||
const projectPreview = project.default_system_prompt.trim().slice(0, 200);
|
||||
|
||||
async function save() {
|
||||
if (saving) return;
|
||||
setSaving(true);
|
||||
try {
|
||||
await api.sessions.update(session.id, {
|
||||
name: name.trim() || session.name,
|
||||
system_prompt: systemPrompt,
|
||||
web_search_enabled: webSearch,
|
||||
});
|
||||
toast.success('Session saved');
|
||||
} catch (err) {
|
||||
toast.error(err instanceof Error ? err.message : 'save failed');
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function resetSystemPrompt() {
|
||||
if (saving) return;
|
||||
setSaving(true);
|
||||
try {
|
||||
await api.sessions.update(session.id, { system_prompt: '' });
|
||||
toast.success('Reset to project default');
|
||||
} catch (err) {
|
||||
toast.error(err instanceof Error ? err.message : 'reset failed');
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function openArchiveDialog() {
|
||||
if (archiving) return;
|
||||
try {
|
||||
const { count } = await api.sessions.openChatsCount(session.id);
|
||||
if (count === 0) {
|
||||
toast('No open chats to archive.');
|
||||
return;
|
||||
}
|
||||
setArchiveCount(count);
|
||||
setArchiveOpen(true);
|
||||
} catch (err) {
|
||||
toast.error(err instanceof Error ? err.message : 'failed to count chats');
|
||||
}
|
||||
}
|
||||
|
||||
async function confirmArchive() {
|
||||
if (archiving) return;
|
||||
setArchiving(true);
|
||||
try {
|
||||
const { archived } = await api.sessions.archiveAllChats(session.id);
|
||||
toast.success(`Archived ${archived} chat${archived === 1 ? '' : 's'}`);
|
||||
setArchiveOpen(false);
|
||||
} catch (err) {
|
||||
toast.error(err instanceof Error ? err.message : 'archive failed');
|
||||
} finally {
|
||||
setArchiving(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
|
||||
Session name
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
className="w-full bg-background border border-border rounded px-2 py-1.5 text-sm outline-none focus:border-ring"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
|
||||
Model
|
||||
</label>
|
||||
<div className="inline-flex items-center rounded-full bg-muted/40 hover:bg-muted/70 px-1">
|
||||
<ModelPicker
|
||||
value={session.model}
|
||||
onChange={async (model) => {
|
||||
try {
|
||||
await api.sessions.update(session.id, { model });
|
||||
toast.success('Model updated');
|
||||
} catch (err) {
|
||||
toast.error(err instanceof Error ? err.message : 'failed to set model');
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<label htmlFor="session-web-search" className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
|
||||
Web search
|
||||
</label>
|
||||
<Switch
|
||||
id="session-web-search"
|
||||
checked={effectiveWebSearch}
|
||||
onCheckedChange={(v) => setWebSearch(v)}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-xs text-muted-foreground">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="session-web-search-inherit"
|
||||
checked={webSearch === null}
|
||||
onChange={(e) => setWebSearch(e.target.checked ? null : project.default_web_search_enabled)}
|
||||
/>
|
||||
<label htmlFor="session-web-search-inherit" className="cursor-pointer">
|
||||
Inherit project default ({project.default_web_search_enabled ? 'on' : 'off'})
|
||||
</label>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground italic">
|
||||
Plumbed for Batch 8 (web_search tool). No effect yet.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<label className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
|
||||
System prompt
|
||||
</label>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => void resetSystemPrompt()}
|
||||
disabled={saving || session.system_prompt === ''}
|
||||
className="text-xs text-muted-foreground hover:text-foreground disabled:opacity-40 disabled:cursor-not-allowed"
|
||||
>
|
||||
Reset to project default
|
||||
</button>
|
||||
</div>
|
||||
<Textarea
|
||||
value={systemPrompt}
|
||||
onChange={(e) => setSystemPrompt(e.target.value)}
|
||||
rows={6}
|
||||
className="resize-y min-h-[120px] max-h-[60vh]"
|
||||
placeholder="Per-session override (optional). Empty = inherit project default."
|
||||
/>
|
||||
{systemPrompt.trim().length === 0 && projectPreview.length > 0 && (
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Falls back to project default: <span className="italic">{projectPreview}{projectPreview.length === 200 ? '…' : ''}</span>
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-2">
|
||||
<Button onClick={() => void save()} disabled={!dirty || saving}>
|
||||
{saving ? 'Saving…' : 'Save'}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="border-t pt-4">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => void openArchiveDialog()}
|
||||
disabled={archiving}
|
||||
className="gap-1.5"
|
||||
>
|
||||
<Archive size={14} /> Archive all chats
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Dialog open={archiveOpen} onOpenChange={(open) => { if (!archiving) setArchiveOpen(open); }}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Archive all chats?</DialogTitle>
|
||||
<DialogDescription>
|
||||
Archive {archiveCount} open chat{archiveCount === 1 ? '' : 's'} in this session?
|
||||
Archived chats stay accessible via the archive view.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setArchiveOpen(false)} disabled={archiving}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button onClick={() => void confirmArchive()} disabled={archiving}>
|
||||
{archiving ? 'Archiving…' : `Archive ${archiveCount}`}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ProjectSection({ project }: { project: Project }) {
|
||||
const [name, setName] = useState(project.name);
|
||||
const [defaultPrompt, setDefaultPrompt] = useState(project.default_system_prompt);
|
||||
const [defaultWebSearch, setDefaultWebSearch] = useState(project.default_web_search_enabled);
|
||||
const [saving, setSaving] = useState(false);
|
||||
// v1.9: bulk-archive sessions. Same shape as the chats-archive flow in
|
||||
// SessionSection — count, confirm, fire.
|
||||
const [archiveOpen, setArchiveOpen] = useState(false);
|
||||
const [archiveCount, setArchiveCount] = useState(0);
|
||||
const [archiving, setArchiving] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setName(project.name);
|
||||
setDefaultPrompt(project.default_system_prompt);
|
||||
setDefaultWebSearch(project.default_web_search_enabled);
|
||||
}, [
|
||||
project.id,
|
||||
project.name,
|
||||
project.default_system_prompt,
|
||||
project.default_web_search_enabled,
|
||||
]);
|
||||
|
||||
const dirty =
|
||||
name !== project.name ||
|
||||
defaultPrompt !== project.default_system_prompt ||
|
||||
defaultWebSearch !== project.default_web_search_enabled;
|
||||
|
||||
async function save() {
|
||||
if (saving) return;
|
||||
setSaving(true);
|
||||
try {
|
||||
await api.projects.update(project.id, {
|
||||
name: name.trim() || project.name,
|
||||
default_system_prompt: defaultPrompt,
|
||||
default_web_search_enabled: defaultWebSearch,
|
||||
});
|
||||
toast.success('Project saved');
|
||||
} catch (err) {
|
||||
toast.error(err instanceof Error ? err.message : 'save failed');
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function clearDefaultPrompt() {
|
||||
if (saving) return;
|
||||
setSaving(true);
|
||||
try {
|
||||
await api.projects.update(project.id, { default_system_prompt: '' });
|
||||
toast.success('Cleared');
|
||||
} catch (err) {
|
||||
toast.error(err instanceof Error ? err.message : 'clear failed');
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function openArchiveDialog() {
|
||||
if (archiving) return;
|
||||
try {
|
||||
const { count } = await api.projects.openSessionsCount(project.id);
|
||||
if (count === 0) {
|
||||
toast('No open sessions to archive.');
|
||||
return;
|
||||
}
|
||||
setArchiveCount(count);
|
||||
setArchiveOpen(true);
|
||||
} catch (err) {
|
||||
toast.error(err instanceof Error ? err.message : 'failed to count sessions');
|
||||
}
|
||||
}
|
||||
|
||||
async function confirmArchive() {
|
||||
if (archiving) return;
|
||||
setArchiving(true);
|
||||
try {
|
||||
const { archived } = await api.projects.archiveAllSessions(project.id);
|
||||
toast.success(`Archived ${archived} session${archived === 1 ? '' : 's'}`);
|
||||
setArchiveOpen(false);
|
||||
} catch (err) {
|
||||
toast.error(err instanceof Error ? err.message : 'archive failed');
|
||||
} finally {
|
||||
setArchiving(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
|
||||
Project name
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
className="w-full bg-background border border-border rounded px-2 py-1.5 text-sm outline-none focus:border-ring"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
|
||||
Root path
|
||||
</label>
|
||||
<div className="font-mono text-xs text-muted-foreground bg-muted/40 rounded px-2 py-1.5 select-all">
|
||||
{project.path}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<label htmlFor="project-default-web-search" className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
|
||||
Default web search
|
||||
</label>
|
||||
<Switch
|
||||
id="project-default-web-search"
|
||||
checked={defaultWebSearch}
|
||||
onCheckedChange={setDefaultWebSearch}
|
||||
/>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground italic">
|
||||
Applies to new sessions only. Plumbed for Batch 8.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<label className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
|
||||
Default system prompt
|
||||
</label>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => void clearDefaultPrompt()}
|
||||
disabled={saving || project.default_system_prompt === ''}
|
||||
className="text-xs text-muted-foreground hover:text-foreground disabled:opacity-40 disabled:cursor-not-allowed"
|
||||
>
|
||||
Clear
|
||||
</button>
|
||||
</div>
|
||||
<Textarea
|
||||
value={defaultPrompt}
|
||||
onChange={(e) => setDefaultPrompt(e.target.value)}
|
||||
rows={6}
|
||||
className="resize-y min-h-[120px] max-h-[60vh]"
|
||||
placeholder="Prepended to every new session's system prompt (when its own is empty). Empty = no project default."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Existing sessions are not affected by changes here.
|
||||
</p>
|
||||
|
||||
<div className="flex justify-end gap-2">
|
||||
<Button onClick={() => void save()} disabled={!dirty || saving}>
|
||||
{saving ? 'Saving…' : 'Save'}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="border-t pt-4">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => void openArchiveDialog()}
|
||||
disabled={archiving}
|
||||
className="gap-1.5"
|
||||
>
|
||||
<Archive size={14} /> Archive all sessions
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Dialog open={archiveOpen} onOpenChange={(open) => { if (!archiving) setArchiveOpen(open); }}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Archive all sessions?</DialogTitle>
|
||||
<DialogDescription>
|
||||
Archive {archiveCount} open session{archiveCount === 1 ? '' : 's'} in this project?
|
||||
Archived sessions stay accessible via the archive view.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setArchiveOpen(false)} disabled={archiving}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button onClick={() => void confirmArchive()} disabled={archiving}>
|
||||
{archiving ? 'Archiving…' : `Archive ${archiveCount}`}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user