@sero-ai/ui 0.3.2 → 0.4.1

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';

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

@@ -0,0 +1,217 @@
+/**
+ * Presentational sub-components for the shared ContextEditor dialog.
+ * Controlled, host-agnostic — no window.sero / session coupling.
+ */
+
+import { useState } from 'react';
+import { AnimatePresence, motion } from 'motion/react';
+import { ChevronRight } from 'lucide-react';
+import { cn } from '../../lib/utils';
+import { Switch } from '../ui/switch';
+
+// ── Color tint definitions ──────────────────────────────────────
+
+type SectionTint = 'blue' | 'amber' | 'violet' | 'neutral';
+type BadgeVariant = 'default' | 'modified' | 'disabled' | 'partial';
+
+const iconTintClass: Record<SectionTint, string> = {
+  blue: 'text-status-info',
+  amber: 'text-status-warning',
+  violet: 'text-[var(--collab-primary)]',
+  neutral: 'text-[var(--text-muted)]',
+};
+
+const badgeClass: Record<BadgeVariant, string> = {
+  default: 'bg-[var(--bg-base)] text-[var(--text-muted)]',
+  modified: 'bg-status-warning-subtle text-status-warning',
+  disabled: 'bg-status-error-subtle text-status-error',
+  partial: 'bg-status-info-subtle text-status-info',
+};
+
+const sectionBorderClass: Record<BadgeVariant, string> = {
+  default: 'border-border/50',
+  modified: 'border-status-warning-border',
+  disabled: 'border-status-error-border',
+  partial: 'border-status-info-border',
+};
+
+const sectionBgClass: Record<BadgeVariant, string> = {
+  default: 'bg-[var(--bg-elevated)]/50',
+  modified: 'bg-status-warning-faint',
+  disabled: 'bg-status-error-faint',
+  partial: 'bg-status-info-faint',
+};
+
+// ── Collapsible Section ─────────────────────────────────────────
+
+export function ContextSection({
+  icon: Icon,
+  title,
+  count,
+  badge,
+  badgeVariant = 'default',
+  tint = 'neutral',
+  defaultOpen = false,
+  children,
+}: {
+  icon: React.ComponentType<{ className?: string }>;
+  title: string;
+  count?: number;
+  badge?: string;
+  badgeVariant?: BadgeVariant;
+  tint?: SectionTint;
+  defaultOpen?: boolean;
+  children: React.ReactNode;
+}) {
+  const [expanded, setExpanded] = useState(defaultOpen);
+
+  return (
+    <div
+      className={cn(
+        'overflow-hidden rounded-lg border transition-colors duration-200',
+        sectionBorderClass[badgeVariant],
+        sectionBgClass[badgeVariant],
+      )}
+    >
+      <button type="button"
+        onClick={() => setExpanded((prev) => !prev)}
+        className={cn(
+          'flex w-full items-center gap-2.5 px-3 py-2 text-left transition-colors duration-150',
+          'hover:bg-[var(--bg-elevated)]/80',
+        )}
+      >
+        <motion.div
+          animate={{ rotate: expanded ? 90 : 0 }}
+          transition={{ type: 'spring', stiffness: 300, damping: 25 }}
+        >
+          <ChevronRight className="size-3.5 text-[var(--text-muted)]" />
+        </motion.div>
+
+        <Icon className={cn('size-3.5', iconTintClass[tint])} />
+
+        <span className="text-xs font-medium text-[var(--text-secondary)]">
+          {title}
+        </span>
+
+        {count !== undefined && (
+          <span className="text-[11px] text-[var(--text-muted)]">
+            ({count})
+          </span>
+        )}
+
+        {badge && (
+          <span
+            className={cn(
+              'ml-auto rounded-full px-2 py-0.5 text-[10px] font-medium',
+              badgeClass[badgeVariant],
+            )}
+          >
+            {badge}
+          </span>
+        )}
+      </button>
+
+      <AnimatePresence>
+        {expanded && (
+          <motion.div
+            initial={{ height: 0, opacity: 0 }}
+            animate={{ height: 'auto', opacity: 1 }}
+            exit={{ height: 0, opacity: 0 }}
+            transition={{ duration: 0.2, ease: [0.25, 0.46, 0.45, 0.94] }}
+            className="overflow-hidden"
+          >
+            <div className="min-w-0 border-t border-border/30 p-3">
+              {children}
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}
+
+// ── Generic Toggle Row (used for both tools and skills) ─────────
+
+export function ToggleRow({
+  name,
+  description,
+  enabled,
+  onToggle,
+}: {
+  name: string;
+  description?: string;
+  enabled: boolean;
+  onToggle: () => void;
+}) {
+  return (
+    <div
+      className={cn(
+        'flex min-w-0 items-start justify-between gap-3 rounded-md px-2 py-1.5 transition-colors',
+        enabled
+          ? 'hover:bg-[var(--bg-elevated)]/60'
+          : 'opacity-60 hover:bg-[var(--bg-elevated)]/40',
+      )}
+    >
+      <div className="min-w-0 flex-1">
+        <div className={cn(
+          'text-[11px] font-medium',
+          enabled ? 'text-[var(--text-secondary)]' : 'text-[var(--text-muted)]',
+        )}>
+          {name}
+        </div>
+        {description && (
+          <div className="mt-0.5 text-[10px] leading-snug text-[var(--text-muted)]/60">
+            {description}
+          </div>
+        )}
+      </div>
+      <Switch
+        size="sm"
+        className="mt-0.5 shrink-0"
+        checked={enabled}
+        onCheckedChange={onToggle}
+      />
+    </div>
+  );
+}
+
+// ── Save Preset Input ───────────────────────────────────────────
+
+export function SavePresetInput({
+  onSave,
+  onCancel,
+}: {
+  onSave: (name: string) => void;
+  onCancel: () => void;
+}) {
+  const [name, setName] = useState('');
+
+  return (
+    <div className="flex items-center gap-2">
+      <input aria-label="Preset name"
+        type="text"
+        value={name}
+        onChange={(e) => setName(e.target.value)}
+        placeholder="Preset name..."
+        className="flex-1 rounded-md border border-border/50 bg-[var(--bg-base)] px-2 py-1 text-xs text-[var(--text-primary)] placeholder:text-[var(--text-muted)] outline-none focus:border-[var(--accent-primary)]"
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' && name.trim()) onSave(name.trim());
+          if (e.key === 'Escape') onCancel();
+        }}
+      />
+      <button type="button"
+        onClick={() => name.trim() && onSave(name.trim())}
+        disabled={!name.trim()}
+        className="rounded-md bg-[var(--accent-primary)] px-2 py-1 text-[11px] font-medium text-white disabled:opacity-50"
+      >
+        Save
+      </button>
+      <button type="button"
+        onClick={onCancel}
+        className="text-[11px] text-[var(--text-muted)] hover:text-[var(--text-secondary)]"
+      >
+        Cancel
+      </button>
+    </div>
+  );
+}

package/src/components/context-editor/use-context-editor-model.ts

@@ -0,0 +1,296 @@
+/**
+ * useContextEditorModel — the controlled editing state for the ContextEditor.
+ *
+ * Holds the working overrides (system prompt, disabled tools/skills, preset
+ * selection) and all the toggle/normalize/preset logic, seeded from the
+ * `available` context and `initialOverrides`. Host-agnostic: persistence
+ * (apply / save preset / delete preset) is injected by the consumer, so the
+ * chat session editor and an app module (e.g. an Orchestrator loop) share one
+ * implementation.
+ */
+
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import type {
+  AvailableContext,
+  ContextOverrides,
+  ContextPreset,
+  ContextSkillInfo,
+  ContextToolInfo,
+} from '@sero-ai/common';
+
+const NONE_PRESET: ContextPreset = {
+  id: '__none__',
+  name: 'None',
+  systemPrompt: '',
+  disabledTools: ['__all__'],
+  disabledSkills: ['__all__'],
+};
+
+const DEFAULT_PRESET: ContextPreset = {
+  id: '__default__',
+  name: 'Default',
+  systemPrompt: null,
+  disabledTools: [],
+  disabledSkills: [],
+};
+
+const BUILTIN_PRESETS: ContextPreset[] = [DEFAULT_PRESET, NONE_PRESET];
+
+function normalizeDisabledNames(names: string[] | undefined, availableNames: string[]): Set<string> {
+  const allowed = new Set(availableNames);
+  return new Set((names ?? []).filter((name) => allowed.has(name)));
+}
+
+function appliedSystemPrompt(overrides: ContextOverrides | null): string | null {
+  if (!overrides || !Object.prototype.hasOwnProperty.call(overrides, 'systemPrompt')) return null;
+  return typeof overrides.systemPrompt === 'string' ? overrides.systemPrompt : null;
+}
+
+function enabledCount<TItem extends ContextToolInfo | ContextSkillInfo>(
+  items: TItem[],
+  disabled: Set<string>,
+  allDisabled: boolean,
+): number {
+  if (allDisabled) return 0;
+  return items.filter((item) => !disabled.has(item.name)).length;
+}
+
+/** The persistable body of a preset (id assigned by the consumer). */
+export type ContextPresetBody = Pick<ContextPreset, 'systemPrompt' | 'disabledTools' | 'disabledSkills'>;
+
+interface CapabilityState<TItem extends ContextToolInfo | ContextSkillInfo> {
+  items: TItem[];
+  allDisabled: boolean;
+  enabledCount: number;
+  isEnabled: (name: string) => boolean;
+  onToggle: (name: string) => void;
+  onToggleAll: (disabled: boolean) => void;
+}
+
+export interface ContextEditorModel {
+  displayedPrompt: string;
+  systemPrompt: string | null;
+  setSystemPrompt: (value: string | null) => void;
+  preset: {
+    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;
+  };
+  tools: CapabilityState<ContextToolInfo>;
+  skills: CapabilityState<ContextSkillInfo>;
+  /** Build the overrides to persist, or null when nothing is overridden. */
+  buildOverrides: () => ContextOverrides | null;
+}
+
+export interface UseContextEditorModelParams {
+  /** Whether the editor is open — drives one-time seeding per open. */
+  open: boolean;
+  available: AvailableContext | null;
+  initialOverrides: ContextOverrides | null;
+  presets: ContextPreset[];
+  onSavePreset: (name: string, preset: ContextPresetBody) => void;
+  onDeletePreset: (id: string) => void;
+}
+
+export function useContextEditorModel({
+  open,
+  available,
+  initialOverrides,
+  presets,
+  onSavePreset,
+  onDeletePreset,
+}: UseContextEditorModelParams): ContextEditorModel {
+  const [systemPrompt, setSystemPromptState] = useState<string | null>(null);
+  const [disabledTools, setDisabledTools] = useState<Set<string>>(new Set());
+  const [disabledSkills, setDisabledSkills] = useState<Set<string>>(new Set());
+  const [allToolsDisabled, setAllToolsDisabled] = useState(false);
+  const [allSkillsDisabled, setAllSkillsDisabled] = useState(false);
+  const [activePresetId, setActivePresetId] = useState<string | null>('__default__');
+  const [showSaveInput, setShowSaveInput] = useState(false);
+
+  const tools = available?.tools ?? [];
+  const skills = available?.skills ?? [];
+
+  // Seed once per open, after the available context has loaded, so the editor
+  // reflects the target's current overrides without clobbering live edits.
+  const seededRef = useRef(false);
+  useEffect(() => {
+    if (!open) {
+      seededRef.current = false;
+      return;
+    }
+    if (seededRef.current || !available) return;
+    seededRef.current = true;
+
+    const seedDisabledTools = normalizeDisabledNames(
+      initialOverrides?.disabledTools,
+      available.tools.map((t) => t.name),
+    );
+    const seedDisabledSkills = normalizeDisabledNames(
+      initialOverrides?.disabledSkills,
+      available.skills.map((s) => s.name),
+    );
+    const allTools = available.tools.length > 0 && seedDisabledTools.size >= available.tools.length;
+    const allSkills = available.skills.length > 0 && seedDisabledSkills.size >= available.skills.length;
+
+    setSystemPromptState(appliedSystemPrompt(initialOverrides));
+    setDisabledTools(allTools ? new Set() : seedDisabledTools);
+    setDisabledSkills(allSkills ? new Set() : seedDisabledSkills);
+    setAllToolsDisabled(allTools);
+    setAllSkillsDisabled(allSkills);
+    setActivePresetId(initialOverrides ? null : '__default__');
+    setShowSaveInput(false);
+  }, [open, available, initialOverrides]);
+
+  const setSystemPrompt = useCallback((value: string | null) => {
+    setSystemPromptState(value);
+    setActivePresetId(null);
+  }, []);
+
+  const toggleCapability = useCallback(
+    (
+      name: string,
+      items: { name: string }[],
+      disabled: Set<string>,
+      allDisabled: boolean,
+      setDisabled: (s: Set<string>) => void,
+      setAll: (b: boolean) => void,
+    ) => {
+      let next: Set<string>;
+      if (allDisabled) {
+        next = new Set(items.map((i) => i.name));
+        next.delete(name);
+      } else {
+        next = new Set(disabled);
+        if (next.has(name)) next.delete(name);
+        else next.add(name);
+      }
+      const total = items.length;
+      const allNowDisabled = total > 0 && next.size >= total;
+      setDisabled(allNowDisabled ? new Set() : next);
+      setAll(allNowDisabled);
+      setActivePresetId(null);
+    },
+    [],
+  );
+
+  const loadPreset = useCallback(
+    (presetId: string) => {
+      const all = [...BUILTIN_PRESETS, ...presets];
+      const preset = all.find((p) => p.id === presetId);
+      if (!preset) return;
+      const allTools = preset.disabledTools.includes('__all__');
+      const allSkills = preset.disabledSkills.includes('__all__');
+      setSystemPromptState(preset.systemPrompt);
+      setDisabledTools(new Set(allTools ? [] : preset.disabledTools));
+      setDisabledSkills(new Set(allSkills ? [] : preset.disabledSkills));
+      setAllToolsDisabled(allTools);
+      setAllSkillsDisabled(allSkills);
+      setActivePresetId(presetId);
+    },
+    [presets],
+  );
+
+  const resetToDefault = useCallback(() => {
+    setSystemPromptState(null);
+    setDisabledTools(new Set());
+    setDisabledSkills(new Set());
+    setAllToolsDisabled(false);
+    setAllSkillsDisabled(false);
+    setActivePresetId('__default__');
+    setShowSaveInput(false);
+  }, []);
+
+  const buildOverrides = useCallback((): ContextOverrides | null => {
+    const toolsToDisable = allToolsDisabled ? tools.map((t) => t.name) : Array.from(disabledTools);
+    const skillsToDisable = allSkillsDisabled ? skills.map((s) => s.name) : Array.from(disabledSkills);
+    const has = systemPrompt !== null || toolsToDisable.length > 0 || skillsToDisable.length > 0;
+    if (!has) return null;
+    return {
+      systemPrompt: systemPrompt ?? undefined,
+      disabledTools: toolsToDisable.length > 0 ? toolsToDisable : undefined,
+      disabledSkills: skillsToDisable.length > 0 ? skillsToDisable : undefined,
+    };
+  }, [allToolsDisabled, allSkillsDisabled, tools, skills, disabledTools, disabledSkills, systemPrompt]);
+
+  const handleSavePreset = useCallback(
+    (name: string) => {
+      onSavePreset(name, {
+        systemPrompt,
+        disabledTools: allToolsDisabled ? ['__all__'] : Array.from(disabledTools),
+        disabledSkills: allSkillsDisabled ? ['__all__'] : Array.from(disabledSkills),
+      });
+      setShowSaveInput(false);
+    },
+    [onSavePreset, systemPrompt, allToolsDisabled, disabledTools, allSkillsDisabled, disabledSkills],
+  );
+
+  const allPresets = useMemo(() => [...BUILTIN_PRESETS, ...presets], [presets]);
+  const activeUserPreset = useMemo(
+    () =>
+      activePresetId && !activePresetId.startsWith('__')
+        ? allPresets.find((p) => p.id === activePresetId) ?? null
+        : null,
+    [activePresetId, allPresets],
+  );
+  const hasOverrides =
+    systemPrompt !== null ||
+    disabledTools.size > 0 ||
+    disabledSkills.size > 0 ||
+    allToolsDisabled ||
+    allSkillsDisabled;
+
+  return {
+    displayedPrompt: systemPrompt ?? available?.systemPrompt ?? '',
+    systemPrompt,
+    setSystemPrompt,
+    preset: {
+      allPresets,
+      activePresetId,
+      activeUserPreset,
+      hasOverrides,
+      showSaveInput,
+      onPresetChange: loadPreset,
+      onDelete: onDeletePreset,
+      onReset: resetToDefault,
+      onShowSave: () => setShowSaveInput(true),
+      onSave: handleSavePreset,
+      onCancelSave: () => setShowSaveInput(false),
+    },
+    tools: {
+      items: tools,
+      allDisabled: allToolsDisabled,
+      enabledCount: enabledCount(tools, disabledTools, allToolsDisabled),
+      isEnabled: (name) => !allToolsDisabled && !disabledTools.has(name),
+      onToggle: (name) =>
+        toggleCapability(name, tools, disabledTools, allToolsDisabled, setDisabledTools, setAllToolsDisabled),
+      onToggleAll: (disabled) => {
+        setAllToolsDisabled(disabled);
+        setDisabledTools(new Set());
+        setActivePresetId(null);
+      },
+    },
+    skills: {
+      items: skills,
+      allDisabled: allSkillsDisabled,
+      enabledCount: enabledCount(skills, disabledSkills, allSkillsDisabled),
+      isEnabled: (name) => !allSkillsDisabled && !disabledSkills.has(name),
+      onToggle: (name) =>
+        toggleCapability(name, skills, disabledSkills, allSkillsDisabled, setDisabledSkills, setAllSkillsDisabled),
+      onToggleAll: (disabled) => {
+        setAllSkillsDisabled(disabled);
+        setDisabledSkills(new Set());
+        setActivePresetId(null);
+      },
+    },
+    buildOverrides,
+  };
+}