@plannotator/ui 0.49.0 → 0.51.0

package/components/AgentToolAnnouncementDialog.tsx

@@ -0,0 +1,347 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { agentToolHostName } from '../utils/agentToolSetting';
+
+/**
+ * One-time offer to turn on the `plannotator` agent tool on Pi and OpenCode 2,
+ * where it is off by default. Question first ("Do you use Plannotator as a
+ * skill?"), two example requests, one line of why, the cost, and two buttons,
+ * under a small diagram of the round trip (the agent opens a review right
+ * away, keeps working, your feedback comes back). Same shell as the other
+ * first-run announcements (portal, z-[100], hand-rolled Escape + Tab wrap +
+ * focus restore, backdrop dismiss, capture-phase keydown that swallows
+ * Mod+Enter so a keystroke aimed here cannot approve a plan or post a review
+ * behind it).
+ *
+ * Unlike those, it collects a decision, so it never dismisses itself while a
+ * save is in flight, and it reports the outcome in place: a failed save shows
+ * the server's reason and keeps both buttons; a successful one says when the
+ * tool arrives and offers Done.
+ *
+ * LAST in each app's first-run dialog chain; the Apps gate rendering through
+ * agentToolAnnouncementEligible and useFirstRunAnnouncementWindow.
+ */
+
+export type AgentToolOfferHost = 'pi' | 'opencode';
+
+interface AgentToolAnnouncementDialogProps {
+  readonly isOpen: boolean;
+  /** The session's host; names the agent and when the change applies. */
+  readonly host: AgentToolOfferHost;
+  /**
+   * "Yes, turn it on": writes the setting (POST /api/config `{ agentTool: true }`).
+   * Rejects with an Error whose message is shown. The App marks the offer
+   * seen when it resolves.
+   */
+  readonly onTurnOn: () => Promise<void>;
+  /** The decline button ("No, I’ll just use slash commands"), Escape, the backdrop and Done: marks the offer seen and closes it. */
+  readonly onDismiss: () => void;
+}
+
+type SaveState =
+  | { readonly kind: 'idle' }
+  | { readonly kind: 'saving' }
+  | { readonly kind: 'saved' }
+  | { readonly kind: 'failed'; readonly message: string };
+
+const SECONDARY_BUTTON_CLASS =
+  'inline-flex min-h-9 items-center gap-2 rounded-lg border border-border bg-surface-0/40 px-3 text-sm font-medium text-foreground outline-none transition-colors motion-reduce:transition-none hover:bg-surface-1/70 focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-card disabled:cursor-not-allowed disabled:opacity-50';
+
+const PRIMARY_BUTTON_CLASS =
+  'min-h-9 rounded-lg bg-primary px-5 text-sm font-medium text-primary-foreground outline-none transition-opacity motion-reduce:transition-none hover:opacity-90 focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-card disabled:cursor-not-allowed disabled:opacity-50';
+
+export function AgentToolAnnouncementDialog({
+  isOpen,
+  host,
+  onTurnOn,
+  onDismiss,
+}: AgentToolAnnouncementDialogProps) {
+  const notNowRef = useRef<HTMLButtonElement>(null);
+  const doneRef = useRef<HTMLButtonElement>(null);
+  const previousFocusRef = useRef<HTMLElement | null>(null);
+  const onDismissRef = useRef(onDismiss);
+  const [save, setSave] = useState<SaveState>({ kind: 'idle' });
+  const saveRef = useRef(save);
+  saveRef.current = save;
+  const mountedRef = useRef(true);
+  const agent = agentToolHostName(host);
+
+  useEffect(() => {
+    onDismissRef.current = onDismiss;
+  }, [onDismiss]);
+
+  useEffect(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
+
+  // Never closed mid-save: the outcome has to be shown.
+  const dismiss = useCallback(() => {
+    if (saveRef.current.kind === 'saving') return;
+    onDismissRef.current();
+  }, []);
+
+  const turnOn = useCallback(async () => {
+    if (saveRef.current.kind === 'saving' || saveRef.current.kind === 'saved') return;
+    setSave({ kind: 'saving' });
+    try {
+      await onTurnOn();
+      if (mountedRef.current) setSave({ kind: 'saved' });
+    } catch (error) {
+      if (!mountedRef.current) return;
+      setSave({
+        kind: 'failed',
+        message: error instanceof Error && error.message ? error.message : 'Could not save the setting.',
+      });
+    }
+  }, [onTurnOn]);
+
+  // Focus follows the outcome: Done once saved.
+  useEffect(() => {
+    if (save.kind === 'saved') doneRef.current?.focus();
+  }, [save.kind]);
+
+  useEffect(() => {
+    if (!isOpen) return;
+
+    previousFocusRef.current = document.activeElement instanceof HTMLElement
+      ? document.activeElement
+      : null;
+    // The decline button takes focus, so a stray Enter or Space never changes a setting.
+    notNowRef.current?.focus();
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        event.preventDefault();
+        event.stopPropagation();
+        dismiss();
+        return;
+      }
+      // Both apps submit their decision on Mod+Enter from a window-level
+      // handler; swallowing it here on the capture phase keeps a keystroke
+      // aimed at this dialog from approving a plan or posting a review.
+      if (event.key === 'Enter' && (event.metaKey || event.ctrlKey)) {
+        event.preventDefault();
+        event.stopPropagation();
+        return;
+      }
+      if (event.key !== 'Tab') return;
+
+      const dialog = document.querySelector<HTMLElement>('[data-agent-tool-announcement-dialog]');
+      const focusable = Array.from(
+        dialog?.querySelectorAll<HTMLElement>('button:not([disabled]), [href], [tabindex]:not([tabindex="-1"])')
+          ?? [],
+      ).filter((element) => element.getAttribute('tabindex') !== '-1');
+      if (focusable.length === 0) return;
+
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+      if (event.shiftKey && document.activeElement === first) {
+        event.preventDefault();
+        last.focus();
+      } else if (!event.shiftKey && document.activeElement === last) {
+        event.preventDefault();
+        first.focus();
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown, true);
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown, true);
+      previousFocusRef.current?.focus();
+      previousFocusRef.current = null;
+    };
+  }, [isOpen, dismiss]);
+
+  if (!isOpen) return null;
+
+  const saving = save.kind === 'saving';
+  return createPortal(
+    <div
+      className="fixed inset-0 z-[100] flex items-center justify-center bg-background/90 p-4 backdrop-blur-sm"
+      onMouseDown={(event) => {
+        if (event.target === event.currentTarget) dismiss();
+      }}
+    >
+      <div
+        data-agent-tool-announcement-dialog
+        data-agent-tool-host={host}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="agent-tool-announcement-title"
+        aria-describedby="agent-tool-announcement-description"
+        className="flex max-h-[calc(100dvh-2rem)] w-full max-w-lg min-w-0 flex-col overflow-hidden rounded-xl border border-border bg-card shadow-2xl"
+      >
+        <style>{DIALOG_LAYOUT_CSS}</style>
+        <div className="pn-ato-graphic shrink-0 border-b border-border px-4 py-3" aria-hidden="true">
+          <RoundTripGraphic agent={agent} />
+        </div>
+        <div className="min-h-0 overflow-y-auto px-5 py-5 sm:px-7 sm:py-6">
+          <h2 id="agent-tool-announcement-title" className="text-balance text-xl font-semibold tracking-tight sm:text-2xl">
+            Do you use Plannotator as a skill?
+          </h2>
+          <div id="agent-tool-announcement-description">
+            <p className="mt-2 text-pretty text-sm leading-relaxed text-muted-foreground">
+              Like asking {agent} to &ldquo;use Plannotator to show me the HTML plan&rdquo; or &ldquo;open a
+              Plannotator code review&rdquo;.
+            </p>
+            <p className="mt-3 text-pretty text-sm leading-relaxed text-foreground">
+              If so, turn on the Plannotator tool. Those requests then open right away while {agent} keeps
+              working, and your feedback comes back as a message.
+            </p>
+          </div>
+          <p className="mt-3 text-pretty text-xs leading-relaxed text-muted-foreground" data-agent-tool-cost>
+            Adds about 780 tokens to each request.{save.kind === 'saved' ? '' : ` ${startsLine(host)}`}
+          </p>
+
+          <div className="mt-5 flex flex-col gap-3">
+            {save.kind === 'saved' ? (
+              <p
+                role="status"
+                data-agent-tool-status="saved"
+                className="inline-flex min-w-0 items-center gap-2 text-sm text-foreground"
+              >
+                <span className="size-2 shrink-0 rounded-full bg-success" aria-hidden="true" />
+                Turned on. {startsLine(host)}
+              </p>
+            ) : save.kind === 'failed' ? (
+              <p
+                role="alert"
+                data-agent-tool-status="failed"
+                className="inline-flex min-w-0 items-center gap-2 text-sm text-destructive"
+              >
+                <span className="size-2 shrink-0 rounded-full bg-destructive" aria-hidden="true" />
+                {save.message}
+              </p>
+            ) : null}
+
+            {/* Stacks full-width below sm (secondary first, so focus order matches reading order); one row from sm. */}
+            <div className="pn-ato-actions">
+              {save.kind === 'saved' ? (
+                <button
+                  ref={doneRef}
+                  type="button"
+                  onClick={() => onDismissRef.current()}
+                  className={`${PRIMARY_BUTTON_CLASS} w-full sm:w-auto`}
+                >
+                  Done
+                </button>
+              ) : (
+                <>
+                  <button
+                    ref={notNowRef}
+                    type="button"
+                    onClick={dismiss}
+                    disabled={saving}
+                    data-agent-tool-not-now
+                    className={`${SECONDARY_BUTTON_CLASS} w-full justify-center text-balance py-1.5 text-center sm:w-auto`}
+                  >
+                    No, I&rsquo;ll just use slash commands
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => void turnOn()}
+                    disabled={saving}
+                    aria-busy={saving}
+                    data-agent-tool-turn-on
+                    className={`${PRIMARY_BUTTON_CLASS} w-full sm:w-auto`}
+                  >
+                    {saving ? 'Turning on…' : save.kind === 'failed' ? 'Try again' : 'Yes, turn it on'}
+                  </button>
+                </>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>,
+    document.body,
+  );
+}
+
+/*
+ * Layout rules, the graphic band tint and the graphic colors are plain CSS (theme
+ * tokens through var()) rather than Tailwind utilities on purpose: this file
+ * is scanned by the review stylesheet, which the portable guides.show viewer
+ * shares, and utilities used nowhere else would change the pinned viewer CSS
+ * for a dialog the viewer never renders. Same result as the approved markup:
+ * the graphic hides below 420px; the buttons stack full-width below `sm`
+ * (40rem) and sit in one right-aligned row from it.
+ */
+const DIALOG_LAYOUT_CSS = `
+.pn-ato-graphic { display: none; background-color: color-mix(in oklab, var(--muted) 45%, transparent); }
+@media (min-width: 420px) { .pn-ato-graphic { display: block; } }
+.pn-ato-actions { display: flex; flex-direction: column; gap: 0.5rem; }
+@media (min-width: 40rem) {
+  .pn-ato-actions { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-end; }
+}
+`;
+
+/** When the change applies on each host; part of the small print and the saved status. */
+function startsLine(host: AgentToolOfferHost): string {
+  return host === 'opencode' ? 'Starts the next time OpenCode starts.' : 'Starts with your next Pi session.';
+}
+
+/*
+ * The round trip, as inline SVG painted only from theme tokens (var(--token)
+ * values from theme.css), so it follows every palette in light and dark.
+ * aria-hidden: the copy beside it carries the whole meaning.
+ *
+ * Motion, in one sentence: your feedback travelling back to the agent is what
+ * the tool adds, and drawing that one arrow once shows the direction the
+ * static picture only implies. Runs once on mount (900ms draw, then a 200ms
+ * fade of its head and label), never loops, and is off under
+ * prefers-reduced-motion, where the resting frame is the final one.
+ */
+const ROUND_TRIP_MOTION_CSS = `
+.pn-ato-return { stroke-dasharray: 1; stroke-dashoffset: 0; animation: pn-ato-draw 900ms cubic-bezier(0.23, 1, 0.32, 1) 300ms both; }
+.pn-ato-return-head, .pn-ato-return-label { animation: pn-ato-fade 200ms ease-out 1050ms both; }
+@keyframes pn-ato-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
+@keyframes pn-ato-fade { from { opacity: 0; } to { opacity: 1; } }
+@media (prefers-reduced-motion: reduce) {
+  .pn-ato-return, .pn-ato-return-head, .pn-ato-return-label { animation: none; }
+}
+`;
+
+function RoundTripGraphic({ agent }: { agent: string }) {
+  return (
+    <svg viewBox="0 0 480 176" className="mx-auto block h-auto w-full font-sans" style={{ maxWidth: 460 }} focusable="false">
+      <style>{ROUND_TRIP_MOTION_CSS}</style>
+
+      {/* The agent: a terminal tile */}
+      <g transform="translate(92 52)">
+        <rect x="0.75" y="0.75" width="54.5" height="54.5" rx="12" style={{ fill: 'var(--card)', stroke: 'var(--border)' }} strokeWidth="1.5" />
+        <path d="M17 21 L25 28 L17 35" style={{ fill: 'none', stroke: 'var(--primary)' }} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" />
+        <rect x="29" y="33" width="11" height="3" rx="1.5" style={{ fill: 'var(--primary)' }} />
+      </g>
+      <text x={120} y={140} textAnchor="middle" fontSize="13" fontWeight="600" style={{ fill: 'var(--foreground)' }}>
+        {agent} <tspan fontWeight="400" style={{ fill: 'var(--muted-foreground)' }}>keeps working</tspan>
+      </text>
+
+      {/* Plannotator: a document with one highlighted, commented line */}
+      <g transform="translate(318 38)">
+        <rect x="0.75" y="0.75" width="66.5" height="82.5" rx="10" style={{ fill: 'var(--card)', stroke: 'var(--border)' }} strokeWidth="1.5" />
+        <rect x="12" y="15" width="30.8" height="4" rx="2" style={{ fill: 'var(--foreground)' }} fillOpacity="0.55" />
+        <rect x="12" y="29" width="44" height="3" rx="1.5" style={{ fill: 'var(--muted-foreground)' }} fillOpacity="0.45" />
+        <rect x="9" y="38" width="50" height="11" rx="3" style={{ fill: 'var(--accent)' }} fillOpacity="0.28" />
+        <rect x="12" y="42" width="36.1" height="3" rx="1.5" style={{ fill: 'var(--foreground)' }} fillOpacity="0.6" />
+        <rect x="12" y="56" width="39.6" height="3" rx="1.5" style={{ fill: 'var(--muted-foreground)' }} fillOpacity="0.45" />
+        <rect x="12" y="66" width="24.2" height="3" rx="1.5" style={{ fill: 'var(--muted-foreground)' }} fillOpacity="0.45" />
+        <circle cx="64" cy="43" r="7" style={{ fill: 'var(--accent)', stroke: 'var(--card)' }} strokeWidth="2" />
+      </g>
+      <text x={352} y={140} textAnchor="middle" fontSize="13" fontWeight="600" style={{ fill: 'var(--foreground)' }}>Plannotator</text>
+
+      {/* opens right away */}
+      <path d="M152 64 Q 236 16 310 56" style={{ fill: 'none', stroke: 'var(--muted-foreground)' }} strokeWidth="1.75" strokeLinecap="round" />
+      <path d="M302.5 47.5 L311 56.5 L299 59" style={{ fill: 'none', stroke: 'var(--muted-foreground)' }} strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" />
+      <text x={232} y={28} textAnchor="middle" fontSize="12" style={{ fill: 'var(--muted-foreground)' }}>opens right away</text>
+
+      {/* your feedback comes back */}
+      <path d="M310 106 Q 236 150 152 98" pathLength={1} className="pn-ato-return" style={{ fill: 'none', stroke: 'var(--primary)' }} strokeWidth="2.25" strokeLinecap="round" />
+      <path d="M153 112 L151.5 98.5 L164.5 100" className="pn-ato-return-head" style={{ fill: 'none', stroke: 'var(--primary)' }} strokeWidth="2.25" strokeLinecap="round" strokeLinejoin="round" />
+      <text x={236} y={166} textAnchor="middle" fontSize="12" fontWeight="600" className="pn-ato-return-label" style={{ fill: 'var(--primary)' }}>your feedback, as a message</text>
+    </svg>
+  );
+}

package/components/AgentsTab.tsx

@@ -31,6 +31,7 @@ import {
   effortSelectOptions,
   modelLabel,
   modelSelectOptions,
+  PI_THINKING_LEVELS,
   type CatalogModel,
 } from '@plannotator/core/model-catalog';
 import { useModelCatalogs, type ModelCatalogs } from '../hooks/useModelCatalogs';
@@ -75,15 +76,14 @@ const COPILOT_MODELS: Array<{ value: string; label: string }> = [
 ];
 
 // Pi's unified reasoning knob (`--thinking`), applied to whichever model is
-// selected. xhigh is accepted only by codex-max models.
-export const PI_THINKING: Array<{ value: string; label: string }> = [
-  { value: 'off', label: 'Off' },
-  { value: 'minimal', label: 'Min' },
-  { value: 'low', label: 'Low' },
-  { value: 'medium', label: 'Med' },
-  { value: 'high', label: 'High' },
-  { value: 'xhigh', label: 'XHigh' },
-];
+// selected; pi clamps a level the model does not support. Pi's own level
+// vocabulary minus `max`, which pi only accepts on `--thinking` since 0.80.6
+// (an older pi would reject the whole job). Short labels fit the segmented
+// picker.
+const PI_THINKING_SHORT_LABELS: Record<string, string> = { minimal: 'Min', medium: 'Med' };
+export const PI_THINKING: Array<{ value: string; label: string }> = PI_THINKING_LEVELS
+  .filter((level) => level !== 'max')
+  .map((level) => ({ value: level, label: PI_THINKING_SHORT_LABELS[level] ?? EFFORT_LABELS[level] ?? level }));
 
 const MODE_LABEL: Record<AgentMode, string> = {
   review: 'Code Review',