@plannotator/ui 0.53.1 → 0.54.0

package/components/MenuVersionSection.tsx

@@ -13,6 +13,14 @@ function fallbackCommand(origin?: Origin | null, isWSL = false): string {
     : 'curl -fsSL https://plannotator.ai/install.sh | bash';
 }
 
+/** "Oct 26, 9:14 AM", from the server's ISO time. */
+function failingSince(iso: string): string {
+  const date = new Date(iso);
+  return Number.isNaN(date.getTime())
+    ? iso
+    : date.toLocaleString('en-US', { month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit' });
+}
+
 interface MenuVersionSectionProps {
   appVersion: string;
   updateInfo?: UpdateInfo | null;
@@ -37,6 +45,8 @@ export const MenuVersionSection: React.FC<MenuVersionSectionProps> = ({
   const [copied, setCopied] = useState(false);
   const [updating, setUpdating] = useState<'idle' | 'starting' | 'started' | string>('idle');
   const hasUpdate = !!updateInfo?.updateAvailable;
+  // Checking for updates has failed for hours: a quiet line and the command (no dot, no toast).
+  const checkFailing = updateInfo?.checkFailing ?? null;
   const command = updateInfo?.command ?? fallbackCommand(origin, isWSL);
 
   const handleCopy = async () => {
@@ -86,17 +96,29 @@ export const MenuVersionSection: React.FC<MenuVersionSectionProps> = ({
             {hasUpdate ? "What's new" : 'Release notes'}
           </a>
         </span>
+        {!hasUpdate && checkFailing && (
+          <span className="text-muted-foreground" data-menu-update-check-failing="">
+            Can&apos;t check for updates since {failingSince(checkFailing.since)} ({checkFailing.error}). To update now:
+          </span>
+        )}
+        {(hasUpdate || checkFailing) && (
+          <div className="w-full mt-1 flex items-center gap-1.5 rounded-md border border-border bg-background px-2 py-1" data-menu-update-command="">
+            {/* Shown whole when checking fails (it is the only way forward there); one scrolling line beside an update, as before. */}
+            <code
+              className={`flex-1 min-w-0 font-mono text-[10px] text-foreground ${hasUpdate ? 'overflow-x-auto whitespace-nowrap' : 'whitespace-pre-wrap break-all'}`}
+            >
+              {command}
+            </code>
+            <button
+              onClick={handleCopy}
+              className="shrink-0 rounded px-1.5 py-0.5 text-[10px] font-medium border border-border hover:bg-muted transition-colors"
+            >
+              {copied ? 'Copied' : 'Copy'}
+            </button>
+          </div>
+        )}
         {hasUpdate && (
           <>
-            <div className="w-full mt-1 flex items-center gap-1.5 rounded-md border border-border bg-background px-2 py-1">
-              <code className="flex-1 min-w-0 overflow-x-auto whitespace-nowrap font-mono text-[10px] text-foreground">{command}</code>
-              <button
-                onClick={handleCopy}
-                className="shrink-0 rounded px-1.5 py-0.5 text-[10px] font-medium border border-border hover:bg-muted transition-colors"
-              >
-                {copied ? 'Copied' : 'Copy'}
-              </button>
-            </div>
             {updateInfo!.action === 'script' && (
               <button
                 onClick={handleUpdate}

package/components/PlanDecisionMenuExtras.tsx

@@ -0,0 +1,129 @@
+import React from 'react';
+import { Check } from 'lucide-react';
+import type { Agent } from '../hooks/useAgents';
+import { useConfigValue } from '../config/useConfig';
+import {
+  getAgentSwitchDefaults,
+  saveAgentSwitchSettings,
+  type AgentSwitchSettings,
+} from '../utils/agentSwitch';
+import { ActionMenuDivider } from './ActionMenu';
+import { cn } from '../lib/utils';
+
+/**
+ * Rows plan review puts under the decisions in DecisionControl's menu
+ * (`menuFooter`, #1057). Neither is a decision: picking an agent keeps the
+ * menu open, and the permission line only reports what Approve already sends.
+ *
+ * NOT host-supported surface (like DecisionControl): Plannotator's own plan
+ * review chrome.
+ */
+
+function isSelected(agentId: string, setting: AgentSwitchSettings): boolean {
+  if (setting.switchTo === 'custom' || setting.switchTo === 'disabled') return false;
+  return agentId.toLowerCase() === setting.switchTo.toLowerCase();
+}
+
+const RadioRow: React.FC<{
+  checked: boolean;
+  onSelect: () => void;
+  children: React.ReactNode;
+  note?: string;
+}> = ({ checked, onSelect, children, note }) => (
+  <button
+    type="button"
+    role="menuitemradio"
+    aria-checked={checked}
+    onClick={onSelect}
+    data-agent-switch-option="true"
+    className={cn(
+      'flex w-full items-center gap-2 px-3 py-1.5 text-left text-xs transition-colors outline-none focus-visible:bg-muted',
+      checked ? 'bg-primary/10 font-medium text-primary' : 'text-popover-foreground hover:bg-muted',
+    )}
+  >
+    <span className="w-3.5 flex-shrink-0">{checked && <Check className="size-3.5" aria-hidden="true" />}</span>
+    <span className="truncate">{children}</span>
+    {note && <span className="ml-auto text-[10px] text-muted-foreground">{note}</span>}
+  </button>
+);
+
+/**
+ * OpenCode: the agent an approval hands off to, as a radio section of the
+ * decision menu (it replaces ApproveDropdown's separate caret). Reads and
+ * writes the same `agentSwitch` setting Settings does.
+ */
+export const AgentSwitchMenuSection: React.FC<{ agents: Agent[] }> = ({ agents }) => {
+  // Reactive: config.json's value lands through configStore.init() once
+  // /api/plan answers, which may be after this mounts (#1390).
+  const stored = useConfigValue('agentSwitch');
+  const setting: AgentSwitchSettings = stored ?? getAgentSwitchDefaults('plan');
+  const isCustom = setting.switchTo === 'custom' && !!setting.customName;
+  const title = 'After approval, switch to';
+
+  return (
+    <>
+      <ActionMenuDivider />
+      <div
+        aria-hidden="true"
+        className="px-3 pt-1.5 pb-1 text-[10px] font-medium uppercase tracking-wider text-muted-foreground/70"
+      >
+        {title}
+      </div>
+      <div role="group" aria-label={title} data-agent-switch-section="true">
+        {agents.map((agent) => (
+          <RadioRow
+            key={agent.id}
+            checked={isSelected(agent.id, setting)}
+            onSelect={() => saveAgentSwitchSettings({ switchTo: agent.id })}
+          >
+            {agent.name}
+          </RadioRow>
+        ))}
+        {isCustom && (
+          <RadioRow checked onSelect={() => {}} note="(custom)">
+            {setting.customName}
+          </RadioRow>
+        )}
+        <RadioRow
+          checked={setting.switchTo === 'disabled'}
+          onSelect={() => saveAgentSwitchSettings({ switchTo: 'disabled' })}
+        >
+          No switch
+        </RadioRow>
+      </div>
+    </>
+  );
+};
+
+/**
+ * Claude Code: the permission mode Approve already sends, made visible. Read
+ * only; "Change" opens Settings, where the mode is set.
+ */
+export const PermissionModeMenuLine: React.FC<{
+  agentName: string;
+  modeLabel: string;
+  onChange: () => void;
+}> = ({ agentName, modeLabel, onChange }) => (
+  <>
+    <ActionMenuDivider />
+    <div
+      data-permission-mode-line="true"
+      className="flex items-center justify-between gap-2 px-3 py-1.5 text-[10px] text-muted-foreground"
+    >
+      <span>
+        After approval, {agentName} runs in{' '}
+        <span className="font-medium text-foreground">{modeLabel}</span>
+      </span>
+      <button
+        type="button"
+        role="menuitem"
+        onClick={onChange}
+        data-permission-mode-change="true"
+        aria-label={`Change the permission mode (${modeLabel}) in Settings`}
+        className="rounded px-1 py-0.5 text-[10px] text-primary outline-none hover:underline focus-visible:ring-1 focus-visible:ring-ring/60"
+      >
+        Change
+      </button>
+    </div>
+  </>
+);

package/components/PlanHeaderMenu.tsx

@@ -27,12 +27,14 @@ interface PlanHeaderMenuProps {
   onSaveToObsidian: () => void;
   onSaveToBear: () => void;
   onSaveToOctarine: () => void;
+  onSaveToNotion?: () => void;
   sharingEnabled: boolean;
   isApiMode: boolean;
   agentInstructionsEnabled: boolean;
   obsidianConfigured: boolean;
   bearConfigured: boolean;
   octarineConfigured: boolean;
+  notionConfigured?: boolean;
   compactTouchLayout?: boolean;
   compactSessionActions?: CompactPlanAction[];
   compactDocumentActions?: CompactPlanAction[];
@@ -61,12 +63,14 @@ export const PlanHeaderMenu: React.FC<PlanHeaderMenuProps> = ({
   onSaveToObsidian,
   onSaveToBear,
   onSaveToOctarine,
+  onSaveToNotion,
   sharingEnabled,
   isApiMode,
   agentInstructionsEnabled,
   obsidianConfigured,
   bearConfigured,
   octarineConfigured,
+  notionConfigured = false,
   compactTouchLayout = false,
   compactSessionActions = [],
   compactDocumentActions = [],
@@ -76,7 +80,7 @@ export const PlanHeaderMenu: React.FC<PlanHeaderMenuProps> = ({
   const showUpdateDot = !!updateInfo?.updateAvailable && !updateInfo.dismissed;
 
   const anyNotesAppConfigured =
-    isApiMode && (obsidianConfigured || bearConfigured || octarineConfigured);
+    isApiMode && (obsidianConfigured || bearConfigured || octarineConfigured || notionConfigured);
 
   return (
     <ActionMenu
@@ -263,6 +267,16 @@ export const PlanHeaderMenu: React.FC<PlanHeaderMenuProps> = ({
                   label="Save to Octarine"
                 />
               )}
+              {notionConfigured && onSaveToNotion && (
+                <ActionMenuItem
+                  onClick={() => {
+                    closeMenu();
+                    onSaveToNotion();
+                  }}
+                  icon={<NoteIcon />}
+                  label="Save to Notion"
+                />
+              )}
             </>
           )}
 

package/components/ProviderIcons.tsx

@@ -36,6 +36,13 @@ export const OpenCodeIcon: React.FC<{ className?: string }> = ({ className = 'w-
   </svg>
 );
 
+/** Qwen Code icon: the Qwen Code logo (QwenLM/qwen-code), in its brand purple. */
+export const QwenIcon: React.FC<{ className?: string }> = ({ className = 'w-4 h-4' }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 141.38 140" className={className}>
+    <path d="m140.93 85-16.35-28.33-1.93-3.34 8.66-15a3.323 3.323 0 0 0 0-3.34l-9.62-16.67c-.3-.51-.72-.93-1.22-1.22s-1.07-.45-1.67-.45H82.23l-8.66-15a3.33 3.33 0 0 0-2.89-1.67H51.43c-.59 0-1.17.16-1.66.45-.5.29-.92.71-1.22 1.22L32.19 29.98l-1.92 3.33H12.96c-.59 0-1.17.16-1.66.45-.5.29-.93.71-1.22 1.22L.45 51.66a3.323 3.323 0 0 0 0 3.34l18.28 31.67-8.66 15a3.32 3.32 0 0 0 0 3.34l9.62 16.67c.3.51.72.93 1.22 1.22s1.07.45 1.67.45h36.56l8.66 15a3.35 3.35 0 0 0 2.89 1.67h19.25a3.34 3.34 0 0 0 2.89-1.67l18.28-31.67h17.32c.6 0 1.17-.16 1.67-.45s.92-.71 1.22-1.22l9.62-16.67a3.323 3.323 0 0 0 0-3.34ZM51.44 3.33 61.07 20l-9.63 16.66h76.98l-9.62 16.66H45.67l-11.54-20zM57.21 120H22.58l9.63-16.67h19.25l-38.5-66.67h19.25l9.62 16.67L68.78 100l-11.55 20Zm61.59-33.34-9.62-16.67-38.49 66.67-9.63-16.67 9.63-16.66 26.94-46.67h23.1l17.32 30z" fill="#6D44E8" />
+  </svg>
+);
+
 /** Generic fallback icon for unknown providers */
 const GenericProviderIcon: React.FC<{ className?: string }> = ({ className = 'w-4 h-4' }) => (
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} className={className}>
@@ -56,6 +63,7 @@ export const PROVIDER_META: Record<string, { label: string; icon: React.FC<{ cla
   'codex-sdk': { label: 'Codex', icon: CodexIcon },
   'pi-sdk': { label: 'Pi', icon: PiIcon },
   'opencode-sdk': { label: 'OpenCode', icon: OpenCodeIcon },
+  'qwen-sdk': { label: 'Qwen Code', icon: QwenIcon },
   'session-bridge': { label: 'Ask this session', icon: SessionIcon },
 };