feat: add Quick Prompt global hotkey popup for one-off AI questions

Add a system-wide global hotkey (Win+Shift+A / Cmd+Shift+A) that summons
a floating, frameless popup window for quick AI interactions from any app.

Main process:
- GlobalHotkeyService for registering/unregistering system-wide shortcuts
- Frameless, transparent, always-on-top BrowserWindow factory
- IPC handlers for send, discard, close, continue-in-aryx, cancel
- Session event routing from sidecar to quick prompt window
- Settings persistence for default model, hotkey, and reasoning effort

Renderer (separate lightweight entry):
- QuickPromptApp with session state, streaming, keyboard shortcuts
- QuickPromptInput with model selector trigger and cancel support
- QuickPromptResponse with streamed markdown and thinking blocks
- QuickPromptActions (Discard / Close / Continue in Aryx)
- ModelSelector dropdown with tier badges and reasoning effort
- Glass Command Bar aesthetic with animated gradient border

Settings:
- Quick Prompt section in SettingsPanel with enable toggle, hotkey
  display, default model selector, and reasoning effort picker

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

src/renderer/App.tsx

@@ -34,6 +34,7 @@ import { isScratchpadProject, SCRATCHPAD_PROJECT_ID } from '@shared/domain/proje
 import type { ProjectGitFileReference } from '@shared/domain/project';
 import { applySessionModelConfig } from '@shared/domain/session';
 import type { AppearanceTheme, LspProfileDefinition, McpServerDefinition } from '@shared/domain/tooling';
+import { createDefaultQuickPromptSettings, type QuickPromptSettings } from '@shared/domain/tooling';
 import type { WorkspaceAgentDefinition } from '@shared/domain/workspaceAgent';
 import type { WorkspaceState } from '@shared/domain/workspace';
 import type { UpdateStatus } from '@shared/contracts/ipc';
@@ -59,7 +60,7 @@ const WelcomePane = lazy(() => import('@renderer/components/WelcomePane').then((
 const WorkflowPicker = lazy(() => import('@renderer/components/workflow/WorkflowPicker').then((m) => ({ default: m.WorkflowPicker })));
 
 // Re-export type-only imports from lazy modules so they're available without pulling in the bundle
-type SettingsSection = 'appearance' | 'connection' | 'workflows' | 'agents' | 'mcp-servers' | 'lsp-profiles' | 'troubleshooting';
+type SettingsSection = 'appearance' | 'connection' | 'workflows' | 'agents' | 'mcp-servers' | 'lsp-profiles' | 'quick-prompt' | 'troubleshooting';
 type BottomPanelTab = 'terminal' | 'git';
 
 // Constants duplicated from BottomPanel to avoid importing the full module at startup
@@ -180,6 +181,9 @@ export default function App() {
   // Commit composer state
   const [commitComposerCtx, setCommitComposerCtx] = useState<{ projectId: string; sessionId: string; runId?: string }>();
 
+  // Quick prompt settings
+  const [quickPromptSettings, setQuickPromptSettings] = useState<QuickPromptSettings>(createDefaultQuickPromptSettings);
+
   // Bottom panel state (terminal + git)
   const [bottomPanelOpen, setBottomPanelOpen] = useState(false);
   const [bottomPanelTab, setBottomPanelTab] = useState<BottomPanelTab>('terminal');
@@ -198,6 +202,11 @@ export default function App() {
       .then((ws) => !disposed && setWorkspace(ws))
       .catch((e) => !disposed && setError(e instanceof Error ? e.message : String(e)));
 
+    void api
+      .getQuickPromptSettings()
+      .then((s) => !disposed && setQuickPromptSettings(s))
+      .catch(() => { /* quick prompt settings unavailable, use defaults */ });
+
     const offWorkspace = api.onWorkspaceUpdated((ws) => {
       setWorkspace(ws);
       setError(undefined);
@@ -858,6 +867,12 @@ export default function App() {
           void api.resolveWorkspaceDiscoveredTooling({ serverIds, resolution });
         }}
         onGetQuota={() => api.getQuota()}
+        quickPromptSettings={quickPromptSettings}
+        onSetQuickPromptSettings={(patch) => {
+          const updated = { ...quickPromptSettings, ...patch };
+          setQuickPromptSettings(updated);
+          void api.setQuickPromptSettings(patch);
+        }}
       />
     </Suspense>
   ) : null;

src/renderer/components/SettingsPanel.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState, type ReactNode } from 'react';
-import { ChevronLeft, ChevronRight, CircleCheck, Code, Cpu, FolderOpen, GitBranch, Palette, Plus, RefreshCw, Server, TriangleAlert, UserCircle, Wrench } from 'lucide-react';
+import { ChevronLeft, ChevronRight, CircleCheck, Code, Cpu, FolderOpen, GitBranch, Palette, Plus, RefreshCw, Server, Sparkles, TriangleAlert, UserCircle, Wrench } from 'lucide-react';
 
 import { CopilotStatusCard } from '@renderer/components/CopilotStatusCard';
 import { WorkflowEditor } from '@renderer/components/WorkflowEditor';
@@ -21,6 +21,7 @@ import {
   type AppearanceTheme,
   type LspProfileDefinition,
   type McpServerDefinition,
+  type QuickPromptSettings,
   type WorkspaceToolingSettings,
 } from '@shared/domain/tooling';
 import { normalizeWorkspaceAgentDefinition, findWorkspaceAgentUsages, type WorkspaceAgentDefinition } from '@shared/domain/workspaceAgent';
@@ -62,9 +63,11 @@ interface SettingsPanelProps {
   onGetQuota?: () => Promise<Record<string, QuotaSnapshot>>;
   workflowTemplates?: WorkflowTemplateDefinition[];
   onCreateWorkflowFromTemplate?: (templateId: string, name?: string) => Promise<void>;
+  quickPromptSettings?: QuickPromptSettings;
+  onSetQuickPromptSettings?: (patch: Partial<QuickPromptSettings>) => void;
 }
 
-export type SettingsSection = 'appearance' | 'connection' | 'workflows' | 'agents' | 'mcp-servers' | 'lsp-profiles' | 'troubleshooting';
+export type SettingsSection = 'appearance' | 'connection' | 'workflows' | 'agents' | 'mcp-servers' | 'lsp-profiles' | 'quick-prompt' | 'troubleshooting';
 
 interface NavItem {
   id: SettingsSection;
@@ -82,6 +85,7 @@ const navGroups: NavGroup[] = [
     label: 'General',
     items: [
       { id: 'appearance', label: 'Appearance', icon: <Palette className="size-3.5" /> },
+      { id: 'quick-prompt', label: 'Quick Prompt', icon: <Sparkles className="size-3.5" /> },
     ],
   },
   {
@@ -149,6 +153,8 @@ export function SettingsPanel({
   onGetQuota,
   workflowTemplates,
   onCreateWorkflowFromTemplate,
+  quickPromptSettings,
+  onSetQuickPromptSettings,
 }: SettingsPanelProps) {
   const [activeSection, setActiveSection] = useState<SettingsSection>(initialSection ?? 'appearance');
   const [editingWorkflow, setEditingWorkflow] = useState<WorkflowDefinition | null>(null);
@@ -380,6 +386,13 @@ export function SettingsPanel({
                 profiles={toolingSettings.lspProfiles}
               />
             )}
+            {activeSection === 'quick-prompt' && (
+              <QuickPromptSettingsSection
+                settings={quickPromptSettings}
+                availableModels={availableModels}
+                onUpdate={onSetQuickPromptSettings}
+              />
+            )}
             {activeSection === 'troubleshooting' && (
               <TroubleshootingSection
                 onOpenAppDataFolder={onOpenAppDataFolder}
@@ -1304,3 +1317,176 @@ function TroubleshootingAction({
     </button>
   );
 }
+
+function QuickPromptSettingsSection({
+  settings,
+  availableModels,
+  onUpdate,
+}: {
+  settings?: QuickPromptSettings;
+  availableModels: ReadonlyArray<ModelDefinition>;
+  onUpdate?: (patch: Partial<QuickPromptSettings>) => void;
+}) {
+  const enabled = settings?.enabled ?? true;
+  const hotkey = settings?.hotkey ?? 'Super+Shift+A';
+  const defaultModel = settings?.defaultModel;
+  const defaultReasoning = settings?.defaultReasoningEffort;
+
+  const hotkeyDisplay = hotkey
+    .replace('Super', process.platform === 'darwin' ? '⌘' : 'Win')
+    .replace('Shift', '⇧')
+    .replace('+', ' + ');
+
+  return (
+    <div>
+      <div className="mb-1">
+        <h3 className="font-display text-[13px] font-semibold text-[var(--color-text-primary)]">Quick Prompt</h3>
+        <p className="mt-0.5 text-[12px] text-[var(--color-text-muted)]">
+          Press a global hotkey to ask the AI a quick question from anywhere
+        </p>
+      </div>
+
+      {/* Enable / Disable */}
+      <button
+        className="mt-5 flex w-full items-center justify-between rounded-lg border border-[var(--color-border)] px-4 py-3 text-left transition hover:bg-[var(--color-surface-3)]/40"
+        onClick={() => onUpdate?.({ enabled: !enabled })}
+        type="button"
+      >
+        <div>
+          <span className="text-[13px] font-medium text-[var(--color-text-primary)]">
+            Enable global hotkey
+          </span>
+          <p className="text-[12px] text-[var(--color-text-muted)]">
+            Register a system-wide keyboard shortcut to summon the Quick Prompt overlay
+          </p>
+        </div>
+        <ToggleSwitch enabled={enabled} />
+      </button>
+
+      {/* Hotkey display */}
+      <div className="mt-6 mb-1">
+        <h3 className="font-display text-[13px] font-semibold text-[var(--color-text-primary)]">Keyboard Shortcut</h3>
+        <p className="mt-0.5 text-[12px] text-[var(--color-text-muted)]">
+          The key combination that opens the Quick Prompt overlay
+        </p>
+      </div>
+
+      <div className="mt-4 flex items-center gap-3 rounded-lg border border-[var(--color-border)] px-4 py-3">
+        <div className="flex gap-1.5">
+          {hotkeyDisplay.split(' + ').map((key) => (
+            <kbd
+              key={key}
+              className="rounded-md border border-[var(--color-border)] bg-[var(--color-surface-2)] px-2 py-0.5 font-mono text-[12px] text-[var(--color-text-secondary)]"
+            >
+              {key.trim()}
+            </kbd>
+          ))}
+        </div>
+      </div>
+
+      {/* Default Model */}
+      <div className="mt-8 mb-1">
+        <h3 className="font-display text-[13px] font-semibold text-[var(--color-text-primary)]">Default Model</h3>
+        <p className="mt-0.5 text-[12px] text-[var(--color-text-muted)]">
+          The model used by Quick Prompt sessions. Can be overridden per-prompt.
+        </p>
+      </div>
+
+      <div className="mt-4 space-y-1.5">
+        {/* "Use workflow default" option */}
+        <button
+          className={`flex w-full items-center gap-3 rounded-lg border px-4 py-3 text-left transition-all duration-200 ${
+            !defaultModel
+              ? 'border-[var(--color-border-glow)] bg-[var(--color-accent-muted)]'
+              : 'border-[var(--color-border)] hover:bg-[var(--color-surface-3)]/40'
+          }`}
+          onClick={() => onUpdate?.({ defaultModel: undefined })}
+          type="button"
+        >
+          <div
+            className={`flex size-4 shrink-0 items-center justify-center rounded-full border-2 transition-all duration-200 ${
+              !defaultModel ? 'border-[var(--color-accent)]' : 'border-[var(--color-border)]'
+            }`}
+          >
+            {!defaultModel && <div className="size-2 rounded-full bg-[var(--color-accent)]" />}
+          </div>
+          <div>
+            <span className={`text-[13px] font-medium ${!defaultModel ? 'text-[var(--color-text-primary)]' : 'text-[var(--color-text-secondary)]'}`}>
+              Use workflow default
+            </span>
+            <p className="text-[12px] text-[var(--color-text-muted)]">
+              Use whichever model is configured in the scratchpad workflow
+            </p>
+          </div>
+        </button>
+
+        {availableModels.map((model) => {
+          const isSelected = defaultModel === model.id;
+          return (
+            <button
+              className={`flex w-full items-center gap-3 rounded-lg border px-4 py-3 text-left transition-all duration-200 ${
+                isSelected
+                  ? 'border-[var(--color-border-glow)] bg-[var(--color-accent-muted)]'
+                  : 'border-[var(--color-border)] hover:bg-[var(--color-surface-3)]/40'
+              }`}
+              key={model.id}
+              onClick={() => onUpdate?.({ defaultModel: model.id })}
+              type="button"
+            >
+              <div
+                className={`flex size-4 shrink-0 items-center justify-center rounded-full border-2 transition-all duration-200 ${
+                  isSelected ? 'border-[var(--color-accent)]' : 'border-[var(--color-border)]'
+                }`}
+              >
+                {isSelected && <div className="size-2 rounded-full bg-[var(--color-accent)]" />}
+              </div>
+              <div className="flex-1">
+                <span className={`text-[13px] font-medium ${isSelected ? 'text-[var(--color-text-primary)]' : 'text-[var(--color-text-secondary)]'}`}>
+                  {model.name}
+                </span>
+                {model.tier && (
+                  <span className="ml-2 rounded bg-[var(--color-surface-3)] px-1.5 py-px text-[10px] text-[var(--color-text-muted)]">
+                    {model.tier}
+                  </span>
+                )}
+              </div>
+            </button>
+          );
+        })}
+      </div>
+
+      {/* Reasoning Effort */}
+      {availableModels.some((m) => m.supportedReasoningEfforts?.length) && (
+        <>
+          <div className="mt-8 mb-1">
+            <h3 className="font-display text-[13px] font-semibold text-[var(--color-text-primary)]">Reasoning Effort</h3>
+            <p className="mt-0.5 text-[12px] text-[var(--color-text-muted)]">
+              Default reasoning effort for Quick Prompt. Higher effort produces more thorough answers.
+            </p>
+          </div>
+
+          <div className="mt-4 flex gap-2">
+            {([undefined, 'low', 'medium', 'high'] as const).map((effort) => {
+              const isActive = defaultReasoning === effort;
+              const label = effort ?? 'Default';
+              return (
+                <button
+                  key={label}
+                  onClick={() => onUpdate?.({ defaultReasoningEffort: effort })}
+                  className={`flex-1 rounded-lg border py-2.5 text-[13px] font-medium transition-all duration-200 ${
+                    isActive
+                      ? 'border-[var(--color-border-glow)] bg-[var(--color-accent-muted)] text-[var(--color-text-primary)]'
+                      : 'border-[var(--color-border)] text-[var(--color-text-secondary)] hover:bg-[var(--color-surface-3)]/40'
+                  }`}
+                  type="button"
+                >
+                  {label.charAt(0).toUpperCase() + label.slice(1)}
+                </button>
+              );
+            })}
+          </div>
+        </>
+      )}
+    </div>
+  );
+}

src/renderer/components/quick-prompt/ModelSelector.tsx

@@ -0,0 +1,136 @@
+import { useEffect, useRef } from 'react';
+import { Check, Crown, Zap } from 'lucide-react';
+
+import type { ModelDefinition } from '@shared/domain/models';
+import type { ReasoningEffort } from '@shared/domain/workflow';
+
+interface ModelSelectorProps {
+  models: ReadonlyArray<ModelDefinition>;
+  selectedModelId?: string;
+  selectedReasoning?: ReasoningEffort;
+  onSelect: (model: ModelDefinition) => void;
+  onReasoningChange: (effort: ReasoningEffort | undefined) => void;
+  onClose: () => void;
+}
+
+const tierConfig = {
+  premium: { label: 'Premium', icon: Crown, className: 'text-amber-400 bg-amber-400/10' },
+  standard: { label: 'Standard', icon: Zap, className: 'text-[var(--color-text-accent)] bg-[var(--color-accent-muted)]' },
+  fast: { label: 'Fast', icon: Zap, className: 'text-emerald-400 bg-emerald-400/10' },
+} as const;
+
+const reasoningOptions: { value: ReasoningEffort; label: string }[] = [
+  { value: 'low', label: 'Low' },
+  { value: 'medium', label: 'Medium' },
+  { value: 'high', label: 'High' },
+  { value: 'xhigh', label: 'Extra High' },
+];
+
+export function ModelSelector({
+  models,
+  selectedModelId,
+  selectedReasoning,
+  onSelect,
+  onReasoningChange,
+  onClose,
+}: ModelSelectorProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
+        onClose();
+      }
+    };
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        e.stopPropagation();
+        onClose();
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    document.addEventListener('keydown', handleEscape, true);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+      document.removeEventListener('keydown', handleEscape, true);
+    };
+  }, [onClose]);
+
+  const selectedModel = models.find((m) => m.id === selectedModelId);
+  const supportedReasoningEfforts = selectedModel?.supportedReasoningEfforts;
+
+  return (
+    <div
+      ref={containerRef}
+      className="qp-dropdown-enter absolute bottom-0 left-4 right-4 z-10 translate-y-full rounded-xl border border-[var(--color-border)] bg-[var(--color-surface-1)] shadow-xl shadow-black/40"
+      role="listbox"
+      aria-label="Select model"
+    >
+      {/* Model list */}
+      <div className="max-h-[240px] overflow-y-auto p-1.5">
+        {models.map((model) => {
+          const isSelected = model.id === selectedModelId;
+          const tier = model.tier ? tierConfig[model.tier] : undefined;
+          const TierIcon = tier?.icon;
+
+          return (
+            <button
+              key={model.id}
+              onClick={() => onSelect(model)}
+              className={`flex w-full items-center gap-3 rounded-lg px-3 py-2 text-left transition ${
+                isSelected
+                  ? 'bg-[var(--color-accent-muted)] text-[var(--color-text-primary)]'
+                  : 'text-[var(--color-text-secondary)] hover:bg-[var(--color-surface-2)] hover:text-[var(--color-text-primary)]'
+              }`}
+              type="button"
+              role="option"
+              aria-selected={isSelected}
+            >
+              <span className="flex-1 text-[12px] font-medium">{model.name}</span>
+
+              {tier && TierIcon && (
+                <span className={`flex items-center gap-1 rounded px-1.5 py-0.5 text-[10px] font-medium ${tier.className}`}>
+                  <TierIcon className="size-2.5" />
+                  {tier.label}
+                </span>
+              )}
+
+              {isSelected && <Check className="size-3.5 flex-none text-[var(--color-accent)]" />}
+            </button>
+          );
+        })}
+      </div>
+
+      {/* Reasoning effort selector */}
+      {supportedReasoningEfforts && supportedReasoningEfforts.length > 0 && (
+        <div className="border-t border-[var(--color-border-subtle)] p-3">
+          <p className="mb-2 text-[10px] font-medium tracking-wide text-[var(--color-text-muted)] uppercase">
+            Reasoning Effort
+          </p>
+          <div className="flex gap-1">
+            {reasoningOptions
+              .filter((opt) => supportedReasoningEfforts.includes(opt.value))
+              .map((opt) => {
+                const isActive = selectedReasoning === opt.value;
+                return (
+                  <button
+                    key={opt.value}
+                    onClick={() => onReasoningChange(isActive ? undefined : opt.value)}
+                    className={`flex-1 rounded-md py-1 text-[11px] font-medium transition ${
+                      isActive
+                        ? 'bg-[var(--color-accent)] text-white'
+                        : 'bg-[var(--color-surface-2)] text-[var(--color-text-muted)] hover:bg-[var(--color-surface-3)] hover:text-[var(--color-text-secondary)]'
+                    }`}
+                    type="button"
+                  >
+                    {opt.label}
+                  </button>
+                );
+              })}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

src/renderer/components/quick-prompt/QuickPromptActions.tsx

@@ -0,0 +1,47 @@
+import { ArrowRight, Trash2, X } from 'lucide-react';
+
+interface QuickPromptActionsProps {
+  onDiscard: () => void;
+  onClose: () => void;
+  onContinueInAryx: () => void;
+}
+
+export function QuickPromptActions({ onDiscard, onClose, onContinueInAryx }: QuickPromptActionsProps) {
+  return (
+    <div className="qp-actions-enter flex items-center gap-2 border-t border-[var(--color-border-subtle)] px-5 py-3">
+      {/* Discard — destructive, muted */}
+      <button
+        onClick={onDiscard}
+        className="flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-[12px] font-medium text-[var(--color-text-muted)] transition hover:bg-[var(--color-status-error)]/10 hover:text-[var(--color-status-error)]"
+        type="button"
+        title="Delete this session"
+      >
+        <Trash2 className="size-3.5" />
+        Discard
+      </button>
+
+      {/* Close — neutral, preserves session */}
+      <button
+        onClick={onClose}
+        className="flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-[12px] font-medium text-[var(--color-text-secondary)] transition hover:bg-[var(--color-surface-3)] hover:text-[var(--color-text-primary)]"
+        type="button"
+        title="Close and keep session"
+      >
+        <X className="size-3.5" />
+        Close
+      </button>
+
+      <div className="flex-1" />
+
+      {/* Continue in Aryx — primary action */}
+      <button
+        onClick={onContinueInAryx}
+        className="brand-gradient-bg flex items-center gap-1.5 rounded-lg px-4 py-1.5 text-[12px] font-semibold text-white shadow-md shadow-[var(--color-accent)]/15 transition hover:shadow-lg hover:shadow-[var(--color-accent)]/25"
+        type="button"
+      >
+        Continue in Aryx
+        <ArrowRight className="size-3.5" />
+      </button>
+    </div>
+  );
+}

src/renderer/components/quick-prompt/QuickPromptApp.tsx

@@ -0,0 +1,213 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+import type { QuickPromptElectronApi, QuickPromptCapabilities } from '@shared/contracts/ipc';
+import type { SessionEventRecord } from '@shared/domain/event';
+import type { ReasoningEffort } from '@shared/domain/workflow';
+import type { ModelDefinition } from '@shared/domain/models';
+
+import { QuickPromptInput } from '@renderer/components/quick-prompt/QuickPromptInput';
+import { QuickPromptResponse } from '@renderer/components/quick-prompt/QuickPromptResponse';
+import { QuickPromptActions } from '@renderer/components/quick-prompt/QuickPromptActions';
+
+declare global {
+  interface Window {
+    quickPromptApi: QuickPromptElectronApi;
+  }
+}
+
+type PromptPhase = 'idle' | 'streaming' | 'complete' | 'error';
+
+interface StreamedMessage {
+  content: string;
+  thinkingContent: string;
+  authorName: string;
+}
+
+export function QuickPromptApp() {
+  const [phase, setPhase] = useState<PromptPhase>('idle');
+  const [response, setResponse] = useState<StreamedMessage>({ content: '', thinkingContent: '', authorName: '' });
+  const [errorMessage, setErrorMessage] = useState<string>();
+  const [capabilities, setCapabilities] = useState<QuickPromptCapabilities>();
+  const [selectedModel, setSelectedModel] = useState<string>();
+  const [selectedReasoning, setSelectedReasoning] = useState<ReasoningEffort>();
+  const [visible, setVisible] = useState(false);
+
+  const sessionIdRef = useRef<string | null>(null);
+  const api = window.quickPromptApi;
+
+  // Load capabilities on mount
+  useEffect(() => {
+    api.getCapabilities().then((caps) => {
+      setCapabilities(caps);
+      setSelectedModel(caps.defaultModel);
+      setSelectedReasoning(caps.defaultReasoningEffort);
+    });
+  }, [api]);
+
+  // Subscribe to show/hide events from main process
+  useEffect(() => {
+    const offShow = api.onShow(() => {
+      setVisible(true);
+      resetState();
+    });
+    const offHide = api.onHide(() => setVisible(false));
+    return () => {
+      offShow();
+      offHide();
+    };
+  }, [api]);
+
+  // Subscribe to session events (streaming)
+  useEffect(() => {
+    const off = api.onSessionEvent((event: SessionEventRecord) => {
+      if (event.kind === 'message-delta' && event.contentDelta) {
+        if (event.messageKind === 'thinking') {
+          setResponse((prev) => ({ ...prev, thinkingContent: prev.thinkingContent + event.contentDelta! }));
+        } else {
+          setResponse((prev) => ({
+            ...prev,
+            content: prev.content + event.contentDelta!,
+            authorName: event.authorName ?? prev.authorName,
+          }));
+        }
+        setPhase('streaming');
+      } else if (event.kind === 'status' && event.status === 'idle') {
+        setPhase((prev) => (prev === 'streaming' ? 'complete' : prev));
+      } else if (event.kind === 'error') {
+        setErrorMessage(event.error ?? 'An unexpected error occurred.');
+        setPhase('error');
+      }
+    });
+    return off;
+  }, [api]);
+
+  const resetState = useCallback(() => {
+    setPhase('idle');
+    setResponse({ content: '', thinkingContent: '', authorName: '' });
+    setErrorMessage(undefined);
+    sessionIdRef.current = null;
+    // Refresh capabilities in case models changed
+    api.getCapabilities().then((caps) => {
+      setCapabilities(caps);
+      if (!selectedModel) setSelectedModel(caps.defaultModel);
+      if (!selectedReasoning) setSelectedReasoning(caps.defaultReasoningEffort);
+    });
+  }, [api, selectedModel, selectedReasoning]);
+
+  const handleSend = useCallback(async (content: string) => {
+    if (!content.trim() || phase === 'streaming') return;
+
+    setPhase('streaming');
+    setResponse({ content: '', thinkingContent: '', authorName: '' });
+    setErrorMessage(undefined);
+
+    try {
+      const result = await api.send({
+        content,
+        model: selectedModel,
+        reasoningEffort: selectedReasoning,
+      });
+      sessionIdRef.current = result.sessionId;
+    } catch (err) {
+      setErrorMessage(err instanceof Error ? err.message : 'Failed to send message.');
+      setPhase('error');
+    }
+  }, [api, phase, selectedModel, selectedReasoning]);
+
+  const handleCancel = useCallback(() => {
+    api.cancelTurn();
+    setPhase('complete');
+  }, [api]);
+
+  const handleDiscard = useCallback(() => {
+    api.discard();
+    resetState();
+  }, [api, resetState]);
+
+  const handleClose = useCallback(() => {
+    api.close();
+    resetState();
+  }, [api, resetState]);
+
+  const handleContinueInAryx = useCallback(() => {
+    api.continueInAryx();
+    resetState();
+  }, [api, resetState]);
+
+  const handleModelChange = useCallback((model: ModelDefinition) => {
+    setSelectedModel(model.id);
+  }, []);
+
+  const handleReasoningChange = useCallback((effort: ReasoningEffort | undefined) => {
+    setSelectedReasoning(effort);
+  }, []);
+
+  // Global keyboard handler
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        if (phase === 'streaming') {
+          handleCancel();
+        } else if (phase === 'complete' || phase === 'error') {
+          handleClose();
+        } else {
+          api.close();
+        }
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [phase, handleCancel, handleClose, api]);
+
+  if (!visible) return null;
+
+  const hasResponse = phase !== 'idle';
+  const resolvedModel = capabilities?.models.find((m) => m.id === selectedModel);
+
+  return (
+    <div className="qp-container flex h-screen w-screen items-start justify-center pt-0">
+      <div
+        className={`qp-panel qp-panel-enter flex w-full max-w-[680px] flex-col overflow-hidden rounded-2xl ${
+          phase === 'streaming' ? 'qp-border-streaming' : hasResponse ? 'qp-border-complete' : 'qp-border-idle'
+        }`}
+        role="dialog"
+        aria-modal="true"
+        aria-label="Quick Prompt"
+      >
+        {/* Input area */}
+        <QuickPromptInput
+          onSend={handleSend}
+          onCancel={handleCancel}
+          phase={phase}
+          models={capabilities?.models}
+          selectedModel={resolvedModel}
+          selectedReasoning={selectedReasoning}
+          onModelChange={handleModelChange}
+          onReasoningChange={handleReasoningChange}
+        />
+
+        {/* Response area — grows dynamically */}
+        {hasResponse && (
+          <QuickPromptResponse
+            content={response.content}
+            thinkingContent={response.thinkingContent}
+            authorName={response.authorName}
+            phase={phase}
+            error={errorMessage}
+          />
+        )}
+
+        {/* Action bar */}
+        {(phase === 'complete' || phase === 'error') && (
+          <QuickPromptActions
+            onDiscard={handleDiscard}
+            onClose={handleClose}
+            onContinueInAryx={handleContinueInAryx}
+          />
+        )}
+      </div>
+    </div>
+  );
+}

src/renderer/components/quick-prompt/QuickPromptInput.tsx

@@ -0,0 +1,133 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { ChevronDown, Loader2, Zap } from 'lucide-react';
+
+import type { ModelDefinition } from '@shared/domain/models';
+import type { ReasoningEffort } from '@shared/domain/workflow';
+
+import { ModelSelector } from '@renderer/components/quick-prompt/ModelSelector';
+
+type PromptPhase = 'idle' | 'streaming' | 'complete' | 'error';
+
+interface QuickPromptInputProps {
+  onSend: (content: string) => void;
+  onCancel: () => void;
+  phase: PromptPhase;
+  models?: ReadonlyArray<ModelDefinition>;
+  selectedModel?: ModelDefinition;
+  selectedReasoning?: ReasoningEffort;
+  onModelChange: (model: ModelDefinition) => void;
+  onReasoningChange: (effort: ReasoningEffort | undefined) => void;
+}
+
+export function QuickPromptInput({
+  onSend,
+  onCancel,
+  phase,
+  models,
+  selectedModel,
+  selectedReasoning,
+  onModelChange,
+  onReasoningChange,
+}: QuickPromptInputProps) {
+  const [value, setValue] = useState('');
+  const [modelSelectorOpen, setModelSelectorOpen] = useState(false);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  // Auto-focus on mount and when phase resets to idle
+  useEffect(() => {
+    if (phase === 'idle') {
+      textareaRef.current?.focus();
+    }
+  }, [phase]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault();
+        if (phase === 'idle' && value.trim()) {
+          onSend(value);
+        }
+      }
+    },
+    [onSend, value, phase],
+  );
+
+  const isDisabled = phase === 'streaming';
+
+  return (
+    <div className="relative flex flex-col">
+      {/* Text input row */}
+      <div className="flex items-start gap-3 px-5 pt-4 pb-3">
+        {/* Spark icon */}
+        <div className="mt-0.5 flex-none">
+          {phase === 'streaming' ? (
+            <Loader2 className="size-[18px] animate-spin text-[var(--color-accent)]" />
+          ) : (
+            <Zap className="size-[18px] text-[var(--color-text-muted)]" />
+          )}
+        </div>
+
+        {/* Textarea */}
+        <textarea
+          ref={textareaRef}
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+          onKeyDown={handleKeyDown}
+          placeholder="Ask anything..."
+          disabled={isDisabled}
+          rows={1}
+          className="auto-resize-textarea min-h-[28px] max-h-[120px] flex-1 resize-none bg-transparent font-[var(--font-body)] text-[14px] leading-[1.6] text-[var(--color-text-primary)] outline-none placeholder:text-[var(--color-text-muted)] disabled:opacity-40"
+        />
+
+        {/* Cancel button during streaming */}
+        {phase === 'streaming' && (
+          <button
+            onClick={onCancel}
+            className="mt-0.5 flex-none rounded-md px-2.5 py-1 text-[12px] font-medium text-[var(--color-text-secondary)] transition hover:bg-[var(--color-surface-3)] hover:text-[var(--color-text-primary)]"
+            type="button"
+          >
+            Stop
+          </button>
+        )}
+      </div>
+
+      {/* Model selector row */}
+      <div className="flex items-center gap-2 border-t border-[var(--color-border-subtle)] px-5 py-2">
+        <button
+          onClick={() => setModelSelectorOpen((prev) => !prev)}
+          className="flex items-center gap-1.5 rounded-md px-2 py-1 text-[11px] text-[var(--color-text-muted)] transition hover:bg-[var(--color-surface-3)] hover:text-[var(--color-text-secondary)]"
+          type="button"
+          aria-haspopup="listbox"
+          aria-expanded={modelSelectorOpen}
+        >
+          <span className="font-medium">{selectedModel?.name ?? 'Select model'}</span>
+          {selectedReasoning && (
+            <span className="rounded bg-[var(--color-accent-muted)] px-1.5 py-px text-[10px] text-[var(--color-text-accent)]">
+              {selectedReasoning}
+            </span>
+          )}
+          <ChevronDown className="size-3" />
+        </button>
+
+        <span className="ml-auto text-[10px] text-[var(--color-text-muted)] select-none opacity-60">
+          Enter ↵ to send · Esc to dismiss
+        </span>
+      </div>
+
+      {/* Model selector dropdown */}
+      {modelSelectorOpen && models && (
+        <ModelSelector
+          models={models}
+          selectedModelId={selectedModel?.id}
+          selectedReasoning={selectedReasoning}
+          onSelect={(model) => {
+            onModelChange(model);
+            setModelSelectorOpen(false);
+          }}
+          onReasoningChange={onReasoningChange}
+          onClose={() => setModelSelectorOpen(false)}
+        />
+      )}
+    </div>
+  );
+}

src/renderer/components/quick-prompt/QuickPromptResponse.tsx

@@ -0,0 +1,86 @@
+import { useEffect, useRef } from 'react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import { AlertCircle, Brain } from 'lucide-react';
+
+type PromptPhase = 'idle' | 'streaming' | 'complete' | 'error';
+
+interface QuickPromptResponseProps {
+  content: string;
+  thinkingContent: string;
+  authorName: string;
+  phase: PromptPhase;
+  error?: string;
+}
+
+export function QuickPromptResponse({
+  content,
+  thinkingContent,
+  phase,
+  error,
+}: QuickPromptResponseProps) {
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  // Auto-scroll to bottom during streaming
+  useEffect(() => {
+    if (phase === 'streaming' && scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    }
+  }, [content, thinkingContent, phase]);
+
+  return (
+    <div
+      ref={scrollRef}
+      className="qp-response-enter max-h-[min(55vh,520px)] overflow-y-auto border-t border-[var(--color-border-subtle)]"
+    >
+      {/* Error state */}
+      {phase === 'error' && error && (
+        <div className="flex items-start gap-3 px-5 py-4">
+          <AlertCircle className="mt-0.5 size-4 flex-none text-[var(--color-status-error)]" />
+          <p className="text-[13px] leading-relaxed text-[var(--color-status-error)]">{error}</p>
+        </div>
+      )}
+
+      {/* Thinking block — collapsed visualization */}
+      {thinkingContent && (
+        <div className="mx-5 mt-4 mb-2 rounded-lg border border-[var(--color-border-subtle)] bg-[var(--color-surface-0)]/50 px-4 py-3">
+          <div className="flex items-center gap-2 text-[11px] font-medium text-[var(--color-text-muted)]">
+            <Brain className="size-3.5" />
+            <span>Thinking</span>
+            {phase === 'streaming' && !content && (
+              <span className="flex gap-0.5 ml-1">
+                <span className="thinking-dot inline-block size-1 rounded-full bg-[var(--color-text-muted)]" />
+                <span className="thinking-dot inline-block size-1 rounded-full bg-[var(--color-text-muted)]" />
+                <span className="thinking-dot inline-block size-1 rounded-full bg-[var(--color-text-muted)]" />
+              </span>
+            )}
+          </div>
+          <p className="mt-1.5 text-[12px] leading-relaxed text-[var(--color-text-muted)] line-clamp-3">
+            {thinkingContent.slice(-300)}
+          </p>
+        </div>
+      )}
+
+      {/* Main response content */}
+      {content && (
+        <div className="px-5 py-4">
+          <div className="markdown-content text-[13.5px] text-[var(--color-text-primary)]">
+            <ReactMarkdown remarkPlugins={[remarkGfm]}>{content}</ReactMarkdown>
+          </div>
+        </div>
+      )}
+
+      {/* Streaming indicator when no content yet */}
+      {phase === 'streaming' && !content && !thinkingContent && (
+        <div className="flex items-center gap-3 px-5 py-5">
+          <span className="flex gap-1">
+            <span className="thinking-dot inline-block size-1.5 rounded-full bg-[var(--color-accent)]" />
+            <span className="thinking-dot inline-block size-1.5 rounded-full bg-[var(--color-accent)]" />
+            <span className="thinking-dot inline-block size-1.5 rounded-full bg-[var(--color-accent)]" />
+          </span>
+          <span className="text-[12px] text-[var(--color-text-muted)]">Generating response…</span>
+        </div>
+      )}
+    </div>
+  );
+}

src/renderer/quickprompt.html

@@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0"
+    />
+    <title>Aryx Quick Prompt</title>
+  </head>
+  <body style="margin: 0; background: transparent; overflow: hidden;">
+    <div id="root"></div>
+    <script
+      type="module"
+      src="./quickprompt.tsx"
+    ></script>
+  </body>
+</html>

src/renderer/quickprompt.tsx

@@ -0,0 +1,20 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+
+import '@fontsource-variable/outfit';
+import '@fontsource-variable/dm-sans';
+import '@fontsource-variable/jetbrains-mono';
+
+import { QuickPromptApp } from '@renderer/components/quick-prompt/QuickPromptApp';
+import '@renderer/styles.css';
+
+const container = document.getElementById('root');
+if (!container) {
+  throw new Error('Could not find the root element.');
+}
+
+createRoot(container).render(
+  <StrictMode>
+    <QuickPromptApp />
+  </StrictMode>,
+);

src/renderer/styles.css

@@ -689,9 +689,126 @@ body {
   .update-banner-enter,
   .turn-activity-enter,
   .turn-activity-row,
-  .turn-activity-row[role="separator"] {
+  .turn-activity-row[role="separator"],
+  .qp-panel-enter,
+  .qp-response-enter,
+  .qp-actions-enter,
+  .qp-dropdown-enter {
     animation: none;
   }
+
+  .qp-border-streaming {
+    animation: none;
+    border-color: var(--color-accent);
+  }
+}
+
+/* ── Quick Prompt — Glass Command Bar ────────────────────────── */
+
+.qp-container {
+  background: transparent;
+}
+
+.qp-panel {
+  background: var(--color-glass);
+  backdrop-filter: blur(24px) saturate(1.4);
+  -webkit-backdrop-filter: blur(24px) saturate(1.4);
+  box-shadow:
+    0 24px 80px rgba(0, 0, 0, 0.55),
+    0 0 1px rgba(255, 255, 255, 0.06) inset;
+  transition: border-color 0.3s ease;
+}
+
+/* Border states */
+.qp-border-idle {
+  border: 1px solid var(--color-glass-border);
+}
+
+.qp-border-complete {
+  border: 1px solid var(--color-border-glow);
+  box-shadow:
+    0 24px 80px rgba(0, 0, 0, 0.55),
+    0 0 20px rgba(36, 92, 249, 0.06),
+    0 0 1px rgba(255, 255, 255, 0.06) inset;
+}
+
+/* Animated breathing border during streaming */
+@keyframes qp-border-breathe {
+  0%, 100% {
+    border-color: rgba(36, 92, 249, 0.35);
+    box-shadow:
+      0 24px 80px rgba(0, 0, 0, 0.55),
+      0 0 20px rgba(36, 92, 249, 0.08),
+      0 0 1px rgba(255, 255, 255, 0.06) inset;
+  }
+  50% {
+    border-color: rgba(138, 41, 230, 0.4);
+    box-shadow:
+      0 24px 80px rgba(0, 0, 0, 0.55),
+      0 0 32px rgba(138, 41, 230, 0.1),
+      0 0 1px rgba(255, 255, 255, 0.06) inset;
+  }
+}
+
+.qp-border-streaming {
+  border: 1px solid rgba(36, 92, 249, 0.35);
+  animation: qp-border-breathe 2.5s ease-in-out infinite;
+}
+
+/* Panel entrance animation */
+@keyframes qp-panel-in {
+  from {
+    opacity: 0;
+    transform: scale(0.96) translateY(-6px);
+  }
+}
+
+.qp-panel-enter {
+  animation: qp-panel-in 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+/* Response area entrance */
+@keyframes qp-response-in {
+  from {
+    opacity: 0;
+    max-height: 0;
+  }
+  to {
+    opacity: 1;
+    max-height: min(55vh, 520px);
+  }
+}
+
+.qp-response-enter {
+  animation: qp-response-in 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+/* Action bar entrance */
+@keyframes qp-actions-in {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+}
+
+.qp-actions-enter {
+  animation: qp-actions-in 0.2s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both;
+}
+
+/* Dropdown entrance */
+@keyframes qp-dropdown-in {
+  from {
+    opacity: 0;
+    transform: translateY(calc(100% - 4px)) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(100%);
+  }
+}
+
+.qp-dropdown-enter {
+  animation: qp-dropdown-in 0.15s cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 /* ── Markdown prose styles ───────────────────────────────────── */