@sero-ai/ui 0.3.1 → 0.4.0

package/src/components/context-editor/CapabilitySection.tsx

@@ -0,0 +1,85 @@
+import type { LucideIcon } from 'lucide-react';
+import type { ContextSkillInfo, ContextToolInfo } from '@sero-ai/common';
+import { Switch } from '../ui/switch';
+import { ContextSection, ToggleRow } from './parts';
+
+interface CapabilitySectionProps<TItem extends ContextToolInfo | ContextSkillInfo> {
+  icon: LucideIcon;
+  title: string;
+  tint: 'amber' | 'violet';
+  includeAllLabel: string;
+  emptyLabel: string;
+  items: TItem[];
+  allDisabled: boolean;
+  enabledCount: number;
+  isEnabled: (name: string) => boolean;
+  onToggle: (name: string) => void;
+  onToggleAll: (disabled: boolean) => void;
+}
+
+export function CapabilitySection<TItem extends ContextToolInfo | ContextSkillInfo>({
+  icon,
+  title,
+  tint,
+  includeAllLabel,
+  emptyLabel,
+  items,
+  allDisabled,
+  enabledCount,
+  isEnabled,
+  onToggle,
+  onToggleAll,
+}: CapabilitySectionProps<TItem>) {
+  const badgeVariant = allDisabled
+    ? 'disabled' as const
+    : enabledCount < items.length
+      ? 'partial' as const
+      : 'default' as const;
+
+  return (
+    <ContextSection
+      icon={icon}
+      title={title}
+      tint={tint}
+      count={items.length}
+      badge={
+        items.length > 0 && enabledCount < items.length
+          ? `${enabledCount}/${items.length} included`
+          : undefined
+      }
+      badgeVariant={badgeVariant}
+      defaultOpen={false}
+    >
+      <div className="space-y-1">
+        {items.length > 0 && (
+          <div className="mb-1 flex items-center justify-between rounded-md border-b border-border/20 px-2 pb-2">
+            <span className="text-[11px] font-medium text-[var(--text-secondary)]">
+              {includeAllLabel}
+            </span>
+            <Switch
+              size="sm"
+              checked={!allDisabled}
+              onCheckedChange={(checked) => onToggleAll(!checked)}
+            />
+          </div>
+        )}
+
+        {items.map((item) => (
+          <ToggleRow
+            key={item.name}
+            name={item.name}
+            description={item.description}
+            enabled={isEnabled(item.name)}
+            onToggle={() => onToggle(item.name)}
+          />
+        ))}
+
+        {items.length === 0 && (
+          <span className="text-[11px] italic text-[var(--text-muted)]">
+            {emptyLabel}
+          </span>
+        )}
+      </div>
+    </ContextSection>
+  );
+}

package/src/components/context-editor/ContextEditor.tsx

@@ -0,0 +1,138 @@
+/**
+ * ContextEditor — shared, controlled context editor dialog.
+ *
+ * Edits a system prompt plus tool/skill enablement and saved presets, against
+ * an `available` context. Host-agnostic: the consumer supplies the available
+ * context, the current overrides, the preset list, and the persistence
+ * callbacks. Used by the desktop chat session editor and by app modules (e.g.
+ * the Orchestrator loop context override).
+ */
+
+import { useState } from 'react';
+import { AlertCircle, Loader2, Settings2 } from 'lucide-react';
+import type { AvailableContext, ContextOverrides, ContextPreset } from '@sero-ai/common';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '../ui/dialog';
+import { ScrollArea } from '../ui/scroll-area';
+import { PresetBar } from './PresetBar';
+import { SkillsSection } from './SkillsSection';
+import { SystemPromptSection, type SystemPromptCopy } from './SystemPromptSection';
+import { ToolsSection } from './ToolsSection';
+import { useContextEditorModel, type ContextPresetBody } from './use-context-editor-model';
+
+export interface ContextEditorProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  available: AvailableContext | null;
+  initialOverrides: ContextOverrides | null;
+  presets: ContextPreset[];
+  /** Persist the chosen overrides. Return false to keep the dialog open (error). */
+  onApply: (overrides: ContextOverrides | null) => Promise<boolean> | boolean;
+  onSavePreset: (name: string, preset: ContextPresetBody) => void;
+  onDeletePreset: (id: string) => void;
+  applyError?: string | null;
+  title?: string;
+  description?: string;
+  systemPromptCopy?: SystemPromptCopy;
+  applyLabel?: string;
+  /** Hide the Tools section (e.g. the Orchestrator picks tools per step, not per loop). */
+  hideTools?: boolean;
+}
+
+export function ContextEditor({
+  open,
+  onOpenChange,
+  available,
+  initialOverrides,
+  presets,
+  onApply,
+  onSavePreset,
+  onDeletePreset,
+  applyError,
+  title = 'Context Editor',
+  description = 'Configure what is included in the LLM context.',
+  systemPromptCopy,
+  applyLabel = 'Apply',
+  hideTools = false,
+}: ContextEditorProps) {
+  const model = useContextEditorModel({ open, available, initialOverrides, presets, onSavePreset, onDeletePreset });
+  const [applying, setApplying] = useState(false);
+
+  const handleApply = async () => {
+    setApplying(true);
+    try {
+      const ok = await onApply(model.buildOverrides());
+      if (ok !== false) onOpenChange(false);
+    } finally {
+      setApplying(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent
+        className="max-h-[85vh] overflow-hidden bg-[var(--bg-surface)] sm:max-w-[58rem]"
+        showCloseButton
+      >
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2 text-sm">
+            <Settings2 className="size-4 text-[var(--text-muted)]" />
+            {title}
+          </DialogTitle>
+          <DialogDescription className="text-xs">{description}</DialogDescription>
+        </DialogHeader>
+
+        <PresetBar {...model.preset} />
+
+        {!available ? (
+          <div className="flex items-center justify-center gap-2 py-8">
+            <Loader2 className="size-4 animate-spin text-[var(--text-muted)]" />
+            <span className="text-xs text-[var(--text-muted)]">Loading context…</span>
+          </div>
+        ) : (
+          <ScrollArea className="max-h-[65vh] overflow-hidden">
+            <div className="min-w-0 space-y-2 pr-2">
+              <SystemPromptSection
+                displayedPrompt={model.displayedPrompt}
+                systemPrompt={model.systemPrompt}
+                onSystemPromptChange={model.setSystemPrompt}
+                copy={systemPromptCopy}
+              />
+              {!hideTools && <ToolsSection {...model.tools} />}
+              <SkillsSection {...model.skills} />
+            </div>
+          </ScrollArea>
+        )}
+
+        {applyError && (
+          <div className="flex items-start gap-2 rounded-md border border-status-error-border bg-status-error-muted px-3 py-2">
+            <AlertCircle className="mt-0.5 size-3.5 shrink-0 text-status-error" />
+            <span className="text-[11px] text-status-error">{applyError}</span>
+          </div>
+        )}
+
+        <DialogFooter>
+          <button type="button"
+            onClick={() => onOpenChange(false)}
+            className="rounded-md border border-border/50 px-3 py-1.5 text-xs text-[var(--text-secondary)] transition-colors hover:bg-[var(--bg-elevated)]"
+          >
+            Cancel
+          </button>
+          <button type="button"
+            onClick={() => { void handleApply(); }}
+            disabled={!available || applying}
+            className="rounded-md bg-[var(--accent-primary)] px-3 py-1.5 text-xs font-medium text-white transition-colors hover:bg-[var(--accent-hover)] disabled:opacity-50"
+          >
+            {applyLabel}
+          </button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/context-editor/PresetBar.tsx

@@ -0,0 +1,94 @@
+import { RotateCcw, Save, Trash2 } from 'lucide-react';
+import type { ContextPreset } from '@sero-ai/common';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../ui/select';
+import { SavePresetInput } from './parts';
+
+interface PresetBarProps {
+  allPresets: ContextPreset[];
+  activePresetId: string | null;
+  activeUserPreset: ContextPreset | null;
+  hasOverrides: boolean;
+  showSaveInput: boolean;
+  onPresetChange: (id: string) => void;
+  onDelete: (id: string) => void;
+  onReset: () => void;
+  onShowSave: () => void;
+  onSave: (name: string) => void;
+  onCancelSave: () => void;
+}
+
+export function PresetBar({
+  allPresets,
+  activePresetId,
+  activeUserPreset,
+  hasOverrides,
+  showSaveInput,
+  onPresetChange,
+  onDelete,
+  onReset,
+  onShowSave,
+  onSave,
+  onCancelSave,
+}: PresetBarProps) {
+  return (
+    <>
+      <div className="flex items-center gap-2">
+        <span className="text-[11px] font-medium text-[var(--text-muted)]">
+          Preset:
+        </span>
+        <Select value={activePresetId ?? ''} onValueChange={onPresetChange}>
+          <SelectTrigger size="sm" className="h-7 w-40 text-xs">
+            <SelectValue placeholder="Custom" />
+          </SelectTrigger>
+          <SelectContent>
+            {allPresets.map((preset) => (
+              <SelectItem key={preset.id} value={preset.id}>
+                {preset.name}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+
+        {activeUserPreset && (
+          <button type="button"
+            onClick={() => onDelete(activeUserPreset.id)}
+            className="flex items-center gap-1 rounded-md px-1.5 py-1 text-[var(--text-muted)] transition-colors hover:bg-status-error-muted hover:text-status-error"
+            title={`Delete "${activeUserPreset.name}"`}
+          >
+            <Trash2 className="size-3" />
+          </button>
+        )}
+
+        {!showSaveInput && (
+          <button type="button"
+            onClick={onShowSave}
+            className="flex items-center gap-1 rounded-md px-2 py-1 text-[11px] text-[var(--text-muted)] transition-colors hover:bg-[var(--bg-elevated)] hover:text-[var(--text-secondary)]"
+          >
+            <Save className="size-3" />
+            Save as
+          </button>
+        )}
+
+        {hasOverrides && (
+          <button type="button"
+            onClick={onReset}
+            className="ml-auto flex items-center gap-1 rounded-md px-2 py-1 text-[11px] text-[var(--text-muted)] transition-colors hover:bg-[var(--bg-elevated)] hover:text-[var(--text-secondary)]"
+          >
+            <RotateCcw className="size-3" />
+            Reset
+          </button>
+        )}
+      </div>
+
+      {showSaveInput && (
+        <SavePresetInput onSave={onSave} onCancel={onCancelSave} />
+      )}
+    </>
+  );
+}

package/src/components/context-editor/SkillsSection.tsx

@@ -0,0 +1,37 @@
+import { Sparkles } from 'lucide-react';
+import type { ContextSkillInfo } from '@sero-ai/common';
+import { CapabilitySection } from './CapabilitySection';
+
+interface SkillsSectionProps {
+  items: ContextSkillInfo[];
+  allDisabled: boolean;
+  enabledCount: number;
+  isEnabled: (name: string) => boolean;
+  onToggle: (name: string) => void;
+  onToggleAll: (disabled: boolean) => void;
+}
+
+export function SkillsSection({
+  items,
+  allDisabled,
+  enabledCount,
+  isEnabled,
+  onToggle,
+  onToggleAll,
+}: SkillsSectionProps) {
+  return (
+    <CapabilitySection
+      icon={Sparkles}
+      title="Skills"
+      tint="violet"
+      includeAllLabel="Include all skills"
+      emptyLabel="No skills available"
+      items={items}
+      allDisabled={allDisabled}
+      enabledCount={enabledCount}
+      isEnabled={isEnabled}
+      onToggle={onToggle}
+      onToggleAll={onToggleAll}
+    />
+  );
+}

package/src/components/context-editor/SystemPromptSection.tsx

@@ -0,0 +1,88 @@
+import { FileText } from 'lucide-react';
+import { ContextSection } from './parts';
+
+export interface SystemPromptCopy {
+  /** Section title. Defaults to "System Prompt". */
+  title?: string;
+  /** Help text when no override is set. */
+  defaultHint?: string;
+  /** Help text when the prompt is set to empty string. */
+  emptyHint?: string;
+  /** Help text when a custom prompt is set. */
+  customHint?: string;
+  /** Textarea placeholder. */
+  placeholder?: string;
+  /** Footer note under the textarea. */
+  footnote?: string;
+}
+
+const DEFAULT_COPY: Required<SystemPromptCopy> = {
+  title: 'System Prompt',
+  defaultHint: 'Using the default system prompt',
+  emptyHint: 'System prompt excluded',
+  customHint: 'Using a custom system prompt',
+  placeholder: 'Enter system prompt...',
+  footnote: 'Leave the prompt blank to exclude it entirely, or reset to use the default.',
+};
+
+interface SystemPromptSectionProps {
+  displayedPrompt: string;
+  systemPrompt: string | null;
+  onSystemPromptChange: (value: string | null) => void;
+  copy?: SystemPromptCopy;
+}
+
+export function SystemPromptSection({
+  displayedPrompt,
+  systemPrompt,
+  onSystemPromptChange,
+  copy,
+}: SystemPromptSectionProps) {
+  const c = { ...DEFAULT_COPY, ...copy };
+
+  return (
+    <ContextSection
+      icon={FileText}
+      title={c.title}
+      tint="blue"
+      badge={
+        systemPrompt !== null
+          ? (systemPrompt === '' ? 'excluded' : 'custom')
+          : undefined
+      }
+      badgeVariant={
+        systemPrompt !== null
+          ? (systemPrompt === '' ? 'disabled' : 'modified')
+          : 'default'
+      }
+      defaultOpen={false}
+    >
+      <div className="space-y-2">
+        <div className="flex items-center justify-between">
+          <span className="text-[10px] text-[var(--text-muted)]">
+            {systemPrompt === null
+              ? c.defaultHint
+              : systemPrompt === ''
+                ? c.emptyHint
+                : c.customHint}
+          </span>
+          {systemPrompt !== null && (
+            <button type="button"
+              onClick={() => onSystemPromptChange(null)}
+              className="text-[10px] text-[var(--text-muted)] transition-colors hover:text-[var(--text-secondary)]"
+            >
+              Reset to default
+            </button>
+          )}
+        </div>
+        <textarea aria-label="System prompt"
+          value={displayedPrompt}
+          onChange={(event) => onSystemPromptChange(event.target.value)}
+          className="h-80 w-full resize-y rounded-md border border-border/30 bg-[var(--bg-base)] p-2 font-mono text-[11px] text-[var(--text-secondary)] placeholder:text-[var(--text-muted)] outline-none focus:border-[var(--accent-primary)]"
+          placeholder={c.placeholder}
+        />
+        <p className="text-[10px] text-[var(--text-muted)]">{c.footnote}</p>
+      </div>
+    </ContextSection>
+  );
+}

package/src/components/context-editor/ToolsSection.tsx

@@ -0,0 +1,37 @@
+import { Wrench } from 'lucide-react';
+import type { ContextToolInfo } from '@sero-ai/common';
+import { CapabilitySection } from './CapabilitySection';
+
+interface ToolsSectionProps {
+  items: ContextToolInfo[];
+  allDisabled: boolean;
+  enabledCount: number;
+  isEnabled: (name: string) => boolean;
+  onToggle: (name: string) => void;
+  onToggleAll: (disabled: boolean) => void;
+}
+
+export function ToolsSection({
+  items,
+  allDisabled,
+  enabledCount,
+  isEnabled,
+  onToggle,
+  onToggleAll,
+}: ToolsSectionProps) {
+  return (
+    <CapabilitySection
+      icon={Wrench}
+      title="Tools"
+      tint="amber"
+      includeAllLabel="Include all tools"
+      emptyLabel="No tools available"
+      items={items}
+      allDisabled={allDisabled}
+      enabledCount={enabledCount}
+      isEnabled={isEnabled}
+      onToggle={onToggle}
+      onToggleAll={onToggleAll}
+    />
+  );
+}

package/src/components/context-editor/index.ts

@@ -0,0 +1,7 @@
+export { ContextEditor, type ContextEditorProps } from './ContextEditor';
+export {
+  useContextEditorModel,
+  type ContextEditorModel,
+  type UseContextEditorModelParams,
+} from './use-context-editor-model';
+export { type SystemPromptCopy } from './SystemPromptSection';