new things

2026-04-02 19:24:58 -03:00
parent 91870f4046
commit ba38092784
19 changed files with 695 additions and 130 deletions
@@ -62,6 +62,18 @@
  color: #e879f9;
 }

+.badge-verified {
+  background: rgba(34, 197, 94, 0.15);
+  color: #4ade80;
+}
+
+.card-badges {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-bottom: 10px;
+}
+
 .card-title {
  font-size: 16px;
  font-weight: 600;
@@ -81,7 +93,6 @@
  background: rgba(148, 163, 184, 0.12);
  color: var(--text-dim);
  display: inline-block;
-  margin-bottom: 10px;
  text-transform: none;
  letter-spacing: 0;
 }
@@ -244,4 +244,64 @@

 .toggle-switch.on .toggle-knob {
  transform: translateX(18px);
+}
+
+/* ── Disabled toggle ─────────────────────────────────────── */
+
+.toggle-disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.toggle-switch-disabled {
+  cursor: not-allowed;
+}
+
+/* ── Self Expansive options ──────────────────────────────── */
+
+.expansive-options {
+  padding: 12px 14px;
+  background: var(--bg-surface-2);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  margin-top: -8px;
+}
+
+.mode-buttons {
+  display: flex;
+  gap: 8px;
+}
+
+.mode-btn {
+  flex: 1;
+  padding: 8px 0;
+  background: var(--bg-surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  color: var(--text-muted);
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.15s, border-color 0.15s, color 0.15s;
+  font-family: inherit;
+}
+
+.mode-btn--active {
+  background: var(--accent-dim);
+  border-color: var(--accent);
+  color: var(--accent);
+}
+
+.mode-btn:hover:not(.mode-btn--active) {
+  background: var(--bg-surface-3);
+  border-color: var(--text-dim);
+  color: var(--text);
+}
+
+.mode-desc {
+  display: block;
+  margin-top: 4px;
 }
@@ -12,6 +12,11 @@ interface NewRecommendationModalProps {
    brainstorm_count?: number;
    media_type: MediaType;
    use_web_search?: boolean;
+    use_validator?: boolean;
+    hard_requirements?: boolean;
+    self_expansive?: boolean;
+    expansive_passes?: number;
+    expansive_mode?: 'soft' | 'extreme';
  }) => Promise<void>;
 }

@@ -24,6 +29,11 @@ export function NewRecommendationModal({ onClose, onSubmit }: NewRecommendationM
  const [themes, setThemes] = useState('');
  const [brainstormCount, setBrainstormCount] = useState(100);
  const [useWebSearch, setUseWebSearch] = useState(false);
+  const [useValidator, setUseValidator] = useState(false);
+  const [useHardRequirements, setUseHardRequirements] = useState(false);
+  const [selfExpansive, setSelfExpansive] = useState(false);
+  const [expansivePasses, setExpansivePasses] = useState(2);
+  const [expansiveMode, setExpansiveMode] = useState<'soft' | 'extreme'>('soft');
  const [loading, setLoading] = useState(false);

  const mediaLabel = mediaType === 'movie' ? 'Movie' : 'TV Show';
@@ -34,6 +44,12 @@ export function NewRecommendationModal({ onClose, onSubmit }: NewRecommendationM
    setStep('form');
  };

+  const handleWebSearchToggle = () => {
+    const next = !useWebSearch;
+    setUseWebSearch(next);
+    if (!next) setUseValidator(false);
+  };
+
  const handleSubmit = async (e: Event) => {
    e.preventDefault();
    if (!mainPrompt.trim()) return;
@@ -47,6 +63,11 @@ export function NewRecommendationModal({ onClose, onSubmit }: NewRecommendationM
        brainstorm_count: brainstormCount,
        media_type: mediaType,
        use_web_search: useWebSearch,
+        use_validator: useValidator,
+        hard_requirements: useHardRequirements,
+        self_expansive: selfExpansive,
+        expansive_passes: selfExpansive ? expansivePasses : 1,
+        expansive_mode: expansiveMode,
      });
      onClose();
    } finally {
@@ -165,12 +186,96 @@ export function NewRecommendationModal({ onClose, onSubmit }: NewRecommendationM
                    <span class="toggle-title">Web Search</span>
                    <span class="toggle-desc">Use real-time web search for more accurate and up-to-date {mediaPluralLabel}</span>
                  </div>
-                  <div class={`toggle-switch${useWebSearch ? ' on' : ''}`} onClick={() => setUseWebSearch((v) => !v)}>
+                  <div class={`toggle-switch${useWebSearch ? ' on' : ''}`} onClick={handleWebSearchToggle}>
                    <div class="toggle-knob" />
                  </div>
                </label>
              </div>

+              <div class="form-group-toggle">
+                <label class={`toggle-label${!useWebSearch ? ' toggle-disabled' : ''}`}>
+                  <div class="toggle-text">
+                    <span class="toggle-title">Validator Agent</span>
+                    <span class="toggle-desc">
+                      Verify candidates against real {mediaPluralLabel} metadata using web search
+                      {!useWebSearch && ' (requires Web Search)'}
+                    </span>
+                  </div>
+                  <div
+                    class={`toggle-switch${useValidator ? ' on' : ''}${!useWebSearch ? ' toggle-switch-disabled' : ''}`}
+                    onClick={() => useWebSearch && setUseValidator((v) => !v)}
+                  >
+                    <div class="toggle-knob" />
+                  </div>
+                </label>
+              </div>
+
+              <div class="form-group-toggle">
+                <label class="toggle-label">
+                  <div class="toggle-text">
+                    <span class="toggle-title">Hard Requirements</span>
+                    <span class="toggle-desc">Strictly enforce all specified requirements when generating and ranking</span>
+                  </div>
+                  <div class={`toggle-switch${useHardRequirements ? ' on' : ''}`} onClick={() => setUseHardRequirements((v) => !v)}>
+                    <div class="toggle-knob" />
+                  </div>
+                </label>
+              </div>
+
+              <div class="form-group-toggle">
+                <label class="toggle-label">
+                  <div class="toggle-text">
+                    <span class="toggle-title">Self Expansive Mode</span>
+                    <span class="toggle-desc">Re-run the pipeline using Full Match results to discover more great {mediaPluralLabel}</span>
+                  </div>
+                  <div class={`toggle-switch${selfExpansive ? ' on' : ''}`} onClick={() => setSelfExpansive((v) => !v)}>
+                    <div class="toggle-knob" />
+                  </div>
+                </label>
+              </div>
+
+              {selfExpansive && (
+                <div class="expansive-options">
+                  <div class="form-group">
+                    <label for="expansive-passes">Extra passes ({expansivePasses})</label>
+                    <input
+                      id="expansive-passes"
+                      type="range"
+                      class="form-input"
+                      min={1}
+                      max={5}
+                      step={1}
+                      value={expansivePasses}
+                      onInput={(e) => setExpansivePasses(Number((e.target as HTMLInputElement).value))}
+                    />
+                  </div>
+                  <div class="form-group">
+                    <label>Mode</label>
+                    <div class="mode-buttons">
+                      <button
+                        type="button"
+                        class={`mode-btn${expansiveMode === 'soft' ? ' mode-btn--active' : ''}`}
+                        onClick={() => setExpansiveMode('soft')}
+                      >
+                        Soft
+                      </button>
+                      <button
+                        type="button"
+                        class={`mode-btn${expansiveMode === 'extreme' ? ' mode-btn--active' : ''}`}
+                        onClick={() => setExpansiveMode('extreme')}
+                      >
+                        Extreme
+                      </button>
+                    </div>
+                    <span class="toggle-desc mode-desc">
+                      {expansiveMode === 'soft'
+                        ? 'Each extra pass brainstorms 60 new candidates in 2 buckets'
+                        : `Each extra pass brainstorms ${brainstormCount} new candidates (same as main pass)`}
+                    </span>
+                  </div>
+                </div>
+              )}
+
              <div class="modal-actions">
                <button type="button" class="btn-secondary" onClick={onClose} disabled={loading}>
                  Cancel
@@ -88,3 +88,26 @@
 .pipeline-retry {
  margin-top: 20px;
 }
+
+.pipeline-step--skipped {
+  border-color: var(--border);
+  background: var(--bg-surface);
+  opacity: 0.45;
+}
+
+.stage-skipped {
+  color: var(--text-dim);
+}
+
+.pipeline-pass-group--extra {
+  margin-top: 20px;
+}
+
+.pipeline-pass-label {
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--text-dim);
+  margin-bottom: 8px;
+}
@@ -1,14 +1,18 @@
 import './PipelineProgress.css';
 import type { StageMap, StageStatus } from '../types/index.js';

-const STAGES: { key: keyof StageMap; label: string }[] = [
-  { key: 'interpreter', label: 'Interpreting Preferences' },
-  { key: 'retrieval', label: 'Generating Candidates' },
-  { key: 'ranking', label: 'Ranking Candidates' },
-  { key: 'curator', label: 'Curating Results' },
-];
+export interface StageEntry {
+  key: string;
+  label: string;
+}
+
+export interface StageGroup {
+  label: string;
+  stages: StageEntry[];
+}

 interface PipelineProgressProps {
+  stageGroups: StageGroup[];
  stages: StageMap;
  onRetry?: () => void;
 }
@@ -21,25 +25,35 @@ function StageIcon({ status }: { status: StageStatus }) {
      return <span class="stage-icon stage-error">✗</span>;
    case 'running':
      return <span class="stage-icon stage-running spinner">⟳</span>;
+    case 'skipped':
+      return <span class="stage-icon stage-skipped">—</span>;
    default:
      return <span class="stage-icon stage-pending">○</span>;
  }
 }

-export function PipelineProgress({ stages, onRetry }: PipelineProgressProps) {
+export function PipelineProgress({ stageGroups, stages, onRetry }: PipelineProgressProps) {
  const hasError = Object.values(stages).some((s) => s === 'error');

  return (
    <div class="pipeline-progress">
      <h3 class="pipeline-title">{hasError ? 'Pipeline Failed' : 'Generating Recommendations…'}</h3>
-      <ul class="pipeline-steps">
-        {STAGES.map(({ key, label }) => (
-          <li key={key} class={`pipeline-step pipeline-step--${stages[key]}`}>
-            <StageIcon status={stages[key]} />
-            <span class="pipeline-step-label">{label}</span>
-          </li>
-        ))}
-      </ul>
+      {stageGroups.map((group, gi) => (
+        <div key={gi} class={`pipeline-pass-group${gi > 0 ? ' pipeline-pass-group--extra' : ''}`}>
+          {group.label && <div class="pipeline-pass-label">{group.label}</div>}
+          <ul class="pipeline-steps">
+            {group.stages.map(({ key, label }) => {
+              const status: StageStatus = stages[key] ?? 'pending';
+              return (
+                <li key={key} class={`pipeline-step pipeline-step--${status}`}>
+                  <StageIcon status={status} />
+                  <span class="pipeline-step-label">{label}</span>
+                </li>
+              );
+            })}
+          </ul>
+        </div>
+      ))}
      {hasError && onRetry && (
        <div class="pipeline-retry">
          <button class="btn-primary" onClick={onRetry}>Re-run Pipeline</button>
@@ -4,6 +4,7 @@ import type { CuratorOutput, CuratorCategory } from '../types/index.js';

 interface RecommendationCardProps {
  show: CuratorOutput;
+  verified?: boolean;
  existingFeedback?: { stars: number; feedback: string };
  onFeedback: (item_name: string, stars: number, feedback: string) => Promise<void>;
 }
@@ -16,7 +17,7 @@ const CATEGORY_COLORS: Record<CuratorCategory, string> = {
  'Will Not Like': 'badge-red',
 };

-export function RecommendationCard({ show, existingFeedback, onFeedback }: RecommendationCardProps) {
+export function RecommendationCard({ show, verified, existingFeedback, onFeedback }: RecommendationCardProps) {
  const [selectedStars, setSelectedStars] = useState(existingFeedback?.stars ?? 0);
  const [hoverStar, setHoverStar] = useState(0);
  const [comment, setComment] = useState(existingFeedback?.feedback ?? '');
@@ -49,7 +50,10 @@ export function RecommendationCard({ show, existingFeedback, onFeedback }: Recom
      </div>
      <p class="card-explanation">{show.explanation}</p>

-      {show.genre && <span class="badge genre-badge">{show.genre}</span>}
+      <div class="card-badges">
+        {show.genre && <span class="badge genre-badge">{show.genre}</span>}
+        {verified && <span class="badge badge-verified">Verified</span>}
+      </div>

      {(show.pros?.length > 0 || show.cons?.length > 0) && (
        <div class="pros-cons-table">