@polderlabs/bizar 7.0.2 → 8.0.0

package/bizar-dash/src/web/views/Skills.tsx

@@ -1,383 +0,0 @@
-// src/views/Skills.tsx — v4.0.0 skills browser: scans all local SKILL.md sources.
-import React, { useEffect, useMemo, useState } from 'react';
-import {
-  Sparkles,
-  Search,
-  RefreshCw,
-  ExternalLink,
-  XCircle,
-  BookOpen,
-  Folder,
-  Users,
-  Package,
-} from 'lucide-react';
-import { Button } from '../components/Button';
-import { Card } from '../components/Card';
-import { EmptyState } from '../components/EmptyState';
-import { Spinner } from '../components/Spinner';
-import { useToast } from '../components/Toast';
-import { useModal } from '../components/Modal';
-import { api } from '../lib/api';
-import { cn } from '../lib/utils';
-import type { Settings, Snapshot } from '../lib/types';
-
-type Props = {
-  snapshot: Snapshot;
-  settings: Settings;
-  activeTab: string;
-  setActiveTab: (id: string) => void;
-  refreshSnapshot: () => Promise<void>;
-};
-
-type Skill = {
-  name: string;
-  description: string;
-  source: 'shipped' | 'user' | 'project';
-  path: string;
-  body?: string;
-};
-
-type Tab = { id: 'all' | 'shipped' | 'user' | 'project'; label: string; icon: typeof Sparkles };
-
-const TABS: Tab[] = [
-  { id: 'all',     label: 'All',     icon: Sparkles   },
-  { id: 'shipped', label: 'Shipped', icon: Package    },
-  { id: 'user',    label: 'User',    icon: Users      },
-  { id: 'project', label: 'Project', icon: Folder     },
-];
-
-const SOURCE_LABEL: Record<string, string> = {
-  shipped: 'Shipped',
-  user:    'User',
-  project: 'Project',
-};
-
-const SOURCE_ICON: Record<string, typeof Package> = {
-  shipped: Package,
-  user:    Users,
-  project: Folder,
-};
-
-function SkillsInner({ snapshot, refreshSnapshot }: Props) {
-  const toast = useToast();
-  const modal = useModal();
-  const [skills, setSkills]       = useState<Skill[]>([]);
-  const [counts, setCounts]       = useState({ shipped: 0, user: 0, project: 0, all: 0 });
-  const [loading, setLoading]     = useState(true);
-  const [activeTab, setActiveTab]  = useState<'all' | 'shipped' | 'user' | 'project'>('all');
-  const [searchQ, setSearchQ]     = useState('');
-  const [searchResults, setSearchResults] = useState<Skill[] | null>(null);
-  const [searching, setSearching] = useState(false);
-
-  const reload = async () => {
-    setLoading(true);
-    try {
-      const d = await api.get<{ skills: Skill[]; counts: Record<string, number> }>('/skills');
-      setSkills(d.skills || []);
-      setCounts({ shipped: d.counts?.shipped ?? 0, user: d.counts?.user ?? 0, project: d.counts?.project ?? 0, all: (d.skills || []).length });
-    } catch (err) {
-      toast.error(`Skills load failed: ${(err as Error).message}`);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  useEffect(() => { reload(); }, []);
-
-  // Debounced search
-  useEffect(() => {
-    if (!searchQ.trim()) {
-      setSearchResults(null);
-      return;
-    }
-    setSearching(true);
-    const id = setTimeout(async () => {
-      try {
-        const d = await api.get<{ results: Skill[] }>(
-          `/skills/search?q=${encodeURIComponent(searchQ.trim())}`,
-        );
-        setSearchResults(d.results || []);
-      } catch (err) {
-        toast.error(`Search failed: ${(err as Error).message}`);
-      } finally {
-        setSearching(false);
-      }
-    }, 280);
-    return () => clearTimeout(id);
-  }, [searchQ]);
-
-  const displayed = useMemo<Skill[]>(() => {
-    if (searchResults !== null) return searchResults;
-    if (activeTab === 'all') return skills;
-    return skills.filter((s) => s.source === activeTab);
-  }, [skills, activeTab, searchResults]);
-
-  const onRefresh = async () => {
-    try {
-      await api.post('/skills/refresh', {});
-      toast.success('Skills refreshed.');
-      await reload();
-    } catch (err) {
-      toast.error(`Refresh failed: ${(err as Error).message}`);
-    }
-  };
-
-  const onShowDetail = async (skill: Skill) => {
-    try {
-      const full = await api.get<Skill>(
-        `/skills/${encodeURIComponent(skill.source)}/${encodeURIComponent(skill.name)}`,
-      );
-      modal.open({
-        title: full.name,
-        width: 640,
-        children: (
-          <div className="skill-detail">
-            <div className="skill-detail-meta">
-              <span className="skill-source-badge" data-source={full.source}>
-                {SOURCE_LABEL[full.source] || full.source}
-              </span>
-              <code className="mono text-sm muted">{full.path}</code>
-            </div>
-            {full.description && (
-              <p className="skill-detail-desc">{full.description}</p>
-            )}
-            {full.body && (
-              <div className="skill-detail-body">
-                <pre className="skill-body-pre">{full.body}</pre>
-              </div>
-            )}
-          </div>
-        ),
-        footer: (
-          <Button variant="ghost" onClick={() => modal.close()}>Close</Button>
-        ),
-      });
-    } catch {
-      // Fallback: show what we already have
-      modal.open({
-        title: skill.name,
-        width: 560,
-        children: (
-          <div className="skill-detail">
-            <div className="skill-detail-meta">
-              <span className="skill-source-badge" data-source={skill.source}>
-                {SOURCE_LABEL[skill.source] || skill.source}
-              </span>
-              <code className="mono text-sm muted">{skill.path}</code>
-            </div>
-            {skill.description && (
-              <p className="skill-detail-desc">{skill.description}</p>
-            )}
-          </div>
-        ),
-        footer: (
-          <Button variant="ghost" onClick={() => modal.close()}>Close</Button>
-        ),
-      });
-    }
-  };
-
-  return (
-    <div className="view view-skills">
-      {/* ── Header ─────────────────────────────────────────────────────── */}
-      <header className="view-header">
-        <div className="view-header-text">
-          <h2 className="view-title">
-            <Sparkles size={18} /> Skills
-          </h2>
-          <p className="view-subtitle">
-            Browse all available skills — shipped, user, and project-local.
-          </p>
-        </div>
-        <div className="view-actions">
-          <div className="search-input">
-            <Search size={14} aria-hidden />
-            <label htmlFor="skills-search" className="sr-only">Search skills</label>
-            <input
-              id="skills-search"
-              className="input"
-              type="text"
-              placeholder="Search skills…"
-              value={searchQ}
-              onChange={(e) => setSearchQ(e.target.value)}
-              aria-label="Search skills"
-            />
-            {searchQ && (
-              <button
-                type="button"
-                className="icon-btn"
-                aria-label="Clear search"
-                onClick={() => setSearchQ('')}
-              >
-                <XCircle size={12} />
-              </button>
-            )}
-          </div>
-          <Button variant="secondary" size="sm" onClick={onRefresh}>
-            <RefreshCw size={14} /> Refresh
-          </Button>
-        </div>
-      </header>
-
-      {/* ── Source tabs ────────────────────────────────────────────────── */}
-      {!searchQ.trim() && (
-        <div className="skills-tabs">
-          {TABS.map((tab) => {
-            const Icon = tab.icon;
-            const count = tab.id === 'all'
-              ? counts.all
-              : counts[tab.id as keyof typeof counts] ?? 0;
-            return (
-              <button
-                key={tab.id}
-                type="button"
-                className={cn('skills-tab', activeTab === tab.id && 'skills-tab-active')}
-                onClick={() => setActiveTab(tab.id)}
-              >
-                <Icon size={14} />
-                <span>{tab.label}</span>
-                <span className="skills-tab-count">{count}</span>
-              </button>
-            );
-          })}
-        </div>
-      )}
-
-      {/* ── Search results ───────────────────────────────────────────── */}
-      {searchQ.trim() && (
-        <section className="skills-section">
-          <h3 className="skills-section-title">
-            <Search size={14} /> Search results
-            {searching && <Spinner size="sm" />}
-          </h3>
-          {searching ? (
-            <div className="skills-grid">
-              {[0, 1, 2].map((i) => (
-                <div key={i} className="skill-card skill-card-skeleton" />
-              ))}
-            </div>
-          ) : searchResults && searchResults.length === 0 ? (
-            <EmptyState
-              icon={<Search size={28} />}
-              title="No matches"
-              message={`No skills match "${searchQ}".`}
-            />
-          ) : (
-            <div className="skills-grid">
-              {(searchResults || []).map((s, i) => (
-                <SkillCard
-                  key={`search-${i}`}
-                  skill={s}
-                  onShow={() => onShowDetail(s)}
-                  searchQ={searchQ}
-                />
-              ))}
-            </div>
-          )}
-        </section>
-      )}
-
-      {/* ── Skills grid (tab view) ───────────────────────────────────── */}
-      {!searchQ.trim() && (
-        <section className="skills-section">
-          {loading ? (
-            <div className="view-loading"><Spinner size="lg" /></div>
-          ) : displayed.length === 0 ? (
-            <EmptyState
-              icon={<BookOpen size={28} />}
-              title="No skills here"
-              message={
-                activeTab === 'all'
-                  ? 'No skills found. Install skills with the skills CLI or add SKILL.md files to a skills directory.'
-                  : `No skills in the ${SOURCE_LABEL[activeTab]} tab.`
-              }
-            />
-          ) : (
-            <div className="skills-grid">
-              {displayed.map((s, i) => (
-                <SkillCard
-                  key={`${s.source}-${s.name}-${i}`}
-                  skill={s}
-                  onShow={() => onShowDetail(s)}
-                />
-              ))}
-            </div>
-          )}
-        </section>
-      )}
-
-      {/* ── Footer ────────────────────────────────────────────────────── */}
-      {!searchQ.trim() && (
-        <footer className="view-footer">
-          <span className="text-sm muted">
-            Skills are discovered from{' '}
-            <code>~/.cline/skills/</code>,{' '}
-            <code>~/.agents/skills/</code>,{' '}
-            <code>bizar-dash/skills/</code>, and project-local directories.
-          </span>
-        </footer>
-      )}
-    </div>
-  );
-}
-
-// ── SkillCard ─────────────────────────────────────────────────────────────────
-
-function SkillCard({
-  skill,
-  onShow,
-  searchQ = '',
-}: {
-  skill: Skill;
-  onShow: () => void;
-  searchQ?: string;
-}) {
-  const Icon = SOURCE_ICON[skill.source] || Package;
-  const desc = skill.description
-    ? skill.description.length > 200
-      ? skill.description.slice(0, 200) + '…'
-      : skill.description
-    : 'No description.';
-
-  return (
-    <Card variant="elevated" interactive className="skill-card">
-      <div className="skill-card-head">
-        <div
-          className="skill-card-icon"
-          style={{ background: `color-mix(in srgb, var(--accent) 12%, transparent)` }}
-        >
-          <Icon size={18} />
-        </div>
-        <div className="skill-card-title-area">
-          <div className="skill-card-title">
-            {highlightMatch(skill.name, searchQ)}
-          </div>
-          <span className="skill-source-badge" data-source={skill.source}>
-            {SOURCE_LABEL[skill.source] || skill.source}
-          </span>
-        </div>
-      </div>
-      <p className="skill-card-desc">{desc}</p>
-      <div className="skill-card-actions">
-        <Button variant="ghost" size="sm" onClick={onShow}>
-          <ExternalLink size={12} /> View
-        </Button>
-      </div>
-    </Card>
-  );
-}
-
-/** Simple substring highlight — wraps matched term in <mark>. */
-function highlightMatch(text: string, q: string): React.ReactNode {
-  if (!q.trim()) return text;
-  const idx = text.toLowerCase().indexOf(q.toLowerCase());
-  if (idx < 0) return text;
-  return (
-    <>
-      {text.slice(0, idx)}
-      <mark className="skill-highlight">{text.slice(idx, idx + q.length)}</mark>
-      {text.slice(idx + q.length)}
-    </>
-  );
-}
-export const Skills = React.memo(SkillsInner);

package/bizar-dash/src/web/views/SpawnAgentModal.tsx

@@ -1,221 +0,0 @@
-// src/web/views/SpawnAgentModal.tsx — modal form to spawn a background
-// agent directly from the dashboard. Calls POST /api/background,
-// tracks the resulting instanceId, and on success closes the modal
-// while the parent navigates to the new instance's detail view.
-//
-// Fields mirror the API body shape:
-//   agent       (string, required) — agent name
-//   prompt      (string, required) — initial prompt
-//   model       (string, optional) — "providerID/modelID"
-//   timeoutMs   (number, slider)   — 1min..4h, default 5min
-//   persistent  (boolean, toggle)  — auto-restart on failure
-//   tags        (string[], optional)
-import { useState, type FormEvent } from 'react';
-import { Plus, X } from 'lucide-react';
-import { Button } from '../components/Button';
-import { useToast } from '../components/Toast';
-import { api } from '../lib/api';
-
-type AgentOption = { name: string; description?: string };
-
-type Props = {
-  open: boolean;
-  onClose: () => void;
-  onCreated?: (instanceId: string) => void;
-  /** Available agents for the dropdown. Defaults to a small static set. */
-  agents?: AgentOption[];
-};
-
-const DEFAULT_AGENTS: AgentOption[] = [
-  { name: 'mimir', description: 'Deep research & codebase exploration' },
-  { name: 'frigg', description: 'Read-only codebase Q&A' },
-  { name: 'thor', description: 'Moderate-complexity implementation' },
-  { name: 'tyr', description: 'Complex feature implementation' },
-  { name: 'heimdall', description: 'Quick edits & simple tasks' },
-  { name: 'odin', description: 'Primary router agent' },
-];
-
-const TIMEOUT_PRESETS = [
-  { label: '1 min', value: 60_000 },
-  { label: '5 min', value: 300_000 },
-  { label: '15 min', value: 900_000 },
-  { label: '30 min', value: 1_800_000 },
-  { label: '1 hr', value: 3_600_000 },
-  { label: '4 hr', value: 14_400_000 },
-];
-
-export function SpawnAgentModal({ open, onClose, onCreated, agents = DEFAULT_AGENTS }: Props) {
-  const toast = useToast();
-  const [agent, setAgent] = useState<string>(agents[0]?.name || 'mimir');
-  const [prompt, setPrompt] = useState<string>('');
-  const [model, setModel] = useState<string>('');
-  const [timeoutMs, setTimeoutMs] = useState<number>(300_000);
-  const [persistent, setPersistent] = useState<boolean>(false);
-  const [tagsRaw, setTagsRaw] = useState<string>('');
-  const [submitting, setSubmitting] = useState<boolean>(false);
-  const [error, setError] = useState<string | null>(null);
-
-  if (!open) return null;
-
-  const onSubmit = async (ev: FormEvent<HTMLFormElement>) => {
-    ev.preventDefault();
-    setError(null);
-    if (!prompt.trim()) {
-      setError('Prompt is required.');
-      return;
-    }
-    setSubmitting(true);
-    try {
-      const tags = tagsRaw
-        .split(',')
-        .map((t) => t.trim())
-        .filter((t) => t.length > 0);
-      const body = {
-        agent,
-        prompt,
-        ...(model.trim() ? { model: model.trim() } : {}),
-        timeoutMs,
-        persistent,
-        maxRestarts: 3,
-        ...(tags.length > 0 ? { tags } : {}),
-      };
-      const res = await api.post<{
-        instanceId: string;
-        status: string;
-        sessionId?: string;
-        error?: string;
-        message?: string;
-      }>('/background', body);
-      if (res?.error) {
-        throw new Error(res.message || res.error);
-      }
-      toast.success(`Spawned ${agent} (${res.instanceId.slice(0, 14)}…)`);
-      onCreated?.(res.instanceId);
-      // Reset the form for next time.
-      setPrompt('');
-      setModel('');
-      setPersistent(false);
-      setTagsRaw('');
-      onClose();
-    } catch (err) {
-      setError((err as Error)?.message || 'Failed to spawn.');
-    } finally {
-      setSubmitting(false);
-    }
-  };
-
-  return (
-    <div className="modal-backdrop" role="dialog" aria-modal="true">
-      <div className="modal-card spawn-modal">
-        <div className="spawn-modal-header">
-          <h3>
-            <Plus size={18} /> Spawn background agent
-          </h3>
-          <Button variant="ghost" size="sm" onClick={onClose} title="Close">
-            <X size={14} />
-          </Button>
-        </div>
-        <form onSubmit={onSubmit} className="spawn-modal-body">
-          <label className="field">
-            <span className="field-label">Agent</span>
-            <select
-              className="field-input"
-              value={agent}
-              onChange={(e) => setAgent(e.target.value)}
-              required
-            >
-              {agents.map((a) => (
-                <option key={a.name} value={a.name}>
-                  {a.name}{a.description ? ` — ${a.description}` : ''}
-                </option>
-              ))}
-            </select>
-          </label>
-
-          <label className="field">
-            <span className="field-label">Initial prompt</span>
-            <textarea
-              className="field-input spawn-modal-textarea"
-              rows={5}
-              value={prompt}
-              onChange={(e) => setPrompt(e.target.value)}
-              placeholder="What do you want this agent to do?"
-              required
-            />
-          </label>
-
-          <label className="field">
-            <span className="field-label">Model (optional)</span>
-            <input
-              type="text"
-              className="field-input"
-              value={model}
-              onChange={(e) => setModel(e.target.value)}
-              placeholder="providerID/modelID (leave blank for agent default)"
-            />
-          </label>
-
-          <div className="field">
-            <span className="field-label">Timeout</span>
-            <div className="spawn-modal-timeouts">
-              {TIMEOUT_PRESETS.map((p) => (
-                <button
-                  key={p.value}
-                  type="button"
-                  className={
-                    'spawn-modal-timeout-pill' +
-                    (p.value === timeoutMs ? ' spawn-modal-timeout-pill-active' : '')
-                  }
-                  onClick={() => setTimeoutMs(p.value)}
-                >
-                  {p.label}
-                </button>
-              ))}
-            </div>
-            <input
-              type="range"
-              min={60_000}
-              max={14_400_000}
-              step={60_000}
-              value={timeoutMs}
-              onChange={(e) => setTimeoutMs(Number(e.target.value))}
-              className="spawn-modal-slider"
-            />
-            <span className="muted">{(timeoutMs / 60_000).toFixed(0)} min</span>
-          </div>
-
-          <label className="field-checkbox">
-            <input
-              type="checkbox"
-              checked={persistent}
-              onChange={(e) => setPersistent(e.target.checked)}
-            />
-            <span>Persistent — auto-restart on terminal failure (max 3 attempts)</span>
-          </label>
-
-          <label className="field">
-            <span className="field-label">Tags (optional, comma-separated)</span>
-            <input
-              type="text"
-              className="field-input"
-              value={tagsRaw}
-              onChange={(e) => setTagsRaw(e.target.value)}
-              placeholder="e.g. refactor, urgent"
-            />
-          </label>
-
-          {error && <div className="spawn-modal-error">{error}</div>}
-
-          <div className="spawn-modal-actions">
-            <Button variant="ghost" size="sm" type="button" onClick={onClose}>
-              Cancel
-            </Button>
-            <Button variant="primary" size="sm" type="submit" disabled={submitting}>
-              {submitting ? 'Spawning…' : 'Spawn agent'}
-            </Button>
-          </div>
-        </form>
-      </div>
-    </div>
-  );
-}