@geminilight/mindos 0.5.60 → 0.5.62

package/app/components/agents/AgentsContentPage.tsx

@@ -0,0 +1,87 @@
+'use client';
+
+import { useMemo, useState } from 'react';
+import Link from 'next/link';
+import { useLocale } from '@/lib/LocaleContext';
+import { useMcpData } from '@/hooks/useMcpData';
+import { copyToClipboard } from '@/lib/clipboard';
+import { generateSnippet } from '@/lib/mcp-snippets';
+import {
+  bucketAgents,
+  buildRiskQueue,
+  type AgentsDashboardTab,
+} from './agents-content-model';
+import AgentsOverviewSection from './AgentsOverviewSection';
+import AgentsMcpSection from './AgentsMcpSection';
+import AgentsSkillsSection from './AgentsSkillsSection';
+
+export default function AgentsContentPage({ tab }: { tab: AgentsDashboardTab }) {
+  const { t } = useLocale();
+  const a = t.agentsContent;
+  const mcp = useMcpData();
+  const [copyState, setCopyState] = useState<string | null>(null);
+
+  const buckets = useMemo(() => bucketAgents(mcp.agents), [mcp.agents]);
+  const riskQueue = useMemo(
+    () =>
+      buildRiskQueue({
+        mcpRunning: !!mcp.status?.running,
+        detectedCount: buckets.detected.length,
+        notFoundCount: buckets.notFound.length,
+        allSkillsDisabled: mcp.skills.length > 0 && mcp.skills.every((s) => !s.enabled),
+      }),
+    [mcp.skills, mcp.status?.running, buckets.detected.length, buckets.notFound.length],
+  );
+
+  const navClass = (target: AgentsDashboardTab) =>
+    `px-3 py-1.5 text-xs rounded-md border transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ${
+      tab === target
+        ? 'border-border bg-[var(--amber-dim)] text-[var(--amber)]'
+        : 'border-border text-muted-foreground hover:text-foreground hover:bg-muted'
+    }`;
+
+  const copySnippet = async (agentKey: string) => {
+    const agent = mcp.agents.find((item) => item.key === agentKey);
+    if (!agent) return;
+    const snippet = generateSnippet(agent, mcp.status, agent.preferredTransport);
+    const ok = await copyToClipboard(snippet.snippet);
+    if (!ok) return;
+    setCopyState(agentKey);
+    setTimeout(() => setCopyState(null), 1500);
+  };
+
+  return (
+    <div className="content-width px-4 md:px-6 py-8 md:py-10">
+      <header className="mb-6">
+        <h1 className="text-2xl font-semibold tracking-tight font-display text-foreground">{a.title}</h1>
+        <p className="mt-1 text-sm text-muted-foreground">{a.subtitle}</p>
+      </header>
+
+      <div className="mb-6 flex items-center gap-2 border-b border-border pb-3" role="tablist" aria-label={a.title}>
+        <Link href="/agents" role="tab" id="agents-tab-overview" aria-controls="agents-panel-overview" aria-selected={tab === 'overview'} className={navClass('overview')}>{a.navOverview}</Link>
+        <Link href="/agents?tab=mcp" role="tab" id="agents-tab-mcp" aria-controls="agents-panel-mcp" aria-selected={tab === 'mcp'} className={navClass('mcp')}>{a.navMcp}</Link>
+        <Link href="/agents?tab=skills" role="tab" id="agents-tab-skills" aria-controls="agents-panel-skills" aria-selected={tab === 'skills'} className={navClass('skills')}>{a.navSkills}</Link>
+      </div>
+
+      {tab === 'overview' && (
+        <AgentsOverviewSection
+          copy={a.overview}
+          buckets={buckets}
+          riskQueue={riskQueue}
+          topSkillsLabel={a.overview.topSkills}
+          failedAgentsLabel={a.overview.failedAgents}
+          topSkillsValue={mcp.skills.filter((s) => s.enabled).slice(0, 3).map((s) => s.name).join(', ') || a.overview.na}
+          failedAgentsValue={buckets.notFound.map((x) => x.name).slice(0, 3).join(', ') || a.overview.na}
+        />
+      )}
+
+      {tab === 'mcp' && (
+        <AgentsMcpSection copy={{ ...a.mcp, status: a.status }} mcp={mcp} buckets={buckets} copyState={copyState} onCopySnippet={copySnippet} />
+      )}
+
+      {tab === 'skills' && (
+        <AgentsSkillsSection copy={a.skills} mcp={mcp} buckets={buckets} />
+      )}
+    </div>
+  );
+}

package/app/components/agents/AgentsMcpSection.tsx

@@ -0,0 +1,123 @@
+'use client';
+
+import Link from 'next/link';
+import { RefreshCw, Server } from 'lucide-react';
+import type { McpContextValue } from '@/hooks/useMcpData';
+import type { AgentBuckets } from './agents-content-model';
+
+export default function AgentsMcpSection({
+  copy,
+  mcp,
+  buckets,
+  copyState,
+  onCopySnippet,
+}: {
+  copy: {
+    title: string;
+    refresh: string;
+    connectionGraph: string;
+    table: { agent: string; status: string; transport: string; actions: string };
+    actions: { copySnippet: string; copied: string; testConnection: string; reconnect: string };
+    status: { connected: string; detected: string; notFound: string };
+  };
+  mcp: McpContextValue;
+  buckets: AgentBuckets;
+  copyState: string | null;
+  onCopySnippet: (agentKey: string) => Promise<void>;
+}) {
+  return (
+    <section role="tabpanel" id="agents-panel-mcp" aria-labelledby="agents-tab-mcp" className="rounded-lg border border-border bg-card p-4 space-y-4">
+      <div className="flex items-center justify-between">
+        <h2 className="text-sm font-medium text-foreground flex items-center gap-2">
+          <Server size={15} className="text-muted-foreground" />
+          {copy.title}
+        </h2>
+        <button
+          type="button"
+          onClick={() => void mcp.refresh()}
+          className="inline-flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-sm"
+        >
+          <RefreshCw size={13} />
+          {copy.refresh}
+        </button>
+      </div>
+
+      <div className="rounded-md border border-border bg-background p-3">
+        <p className="text-xs font-medium text-muted-foreground mb-2">{copy.connectionGraph}</p>
+        <div className="flex flex-wrap items-center gap-2 text-xs">
+          <NodePill label={copy.status.connected} count={buckets.connected.length} tone="ok" />
+          <span className="text-muted-foreground">→</span>
+          <NodePill label={copy.status.detected} count={buckets.detected.length} tone="warn" />
+          <span className="text-muted-foreground">→</span>
+          <NodePill label={copy.status.notFound} count={buckets.notFound.length} tone="neutral" />
+          <span className="mx-2 text-muted-foreground">|</span>
+          <NodePill label={copy.title} count={mcp.status?.running ? 1 : 0} tone={mcp.status?.running ? 'ok' : 'neutral'} />
+        </div>
+      </div>
+
+      <div className="overflow-x-auto">
+        <table className="w-full text-sm">
+          <thead>
+            <tr className="text-left border-b border-border">
+              <th className="py-2 font-medium text-muted-foreground">{copy.table.agent}</th>
+              <th className="py-2 font-medium text-muted-foreground">{copy.table.status}</th>
+              <th className="py-2 font-medium text-muted-foreground">{copy.table.transport}</th>
+              <th className="py-2 font-medium text-muted-foreground">{copy.table.actions}</th>
+            </tr>
+          </thead>
+          <tbody>
+            {mcp.agents.map((agent) => (
+              <tr key={agent.key} className="border-b border-border/60">
+                <td className="py-2 text-foreground">
+                  <Link href={`/agents/${encodeURIComponent(agent.key)}`} className="hover:underline">{agent.name}</Link>
+                </td>
+                <td className="py-2 text-muted-foreground">{agent.present ? (agent.installed ? copy.status.connected : copy.status.detected) : copy.status.notFound}</td>
+                <td className="py-2 text-muted-foreground">{agent.transport ?? agent.preferredTransport}</td>
+                <td className="py-2">
+                  <div className="flex flex-wrap items-center gap-2">
+                    <button
+                      type="button"
+                      onClick={() => void onCopySnippet(agent.key)}
+                      className="text-xs px-2 py-1 rounded border border-border hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                    >
+                      {copyState === agent.key ? copy.actions.copied : copy.actions.copySnippet}
+                    </button>
+                    <button type="button" className="text-xs px-2 py-1 rounded border border-border hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
+                      {copy.actions.testConnection}
+                    </button>
+                    <button type="button" className="text-xs px-2 py-1 rounded border border-border hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
+                      {copy.actions.reconnect}
+                    </button>
+                  </div>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </section>
+  );
+}
+
+function NodePill({
+  label,
+  count,
+  tone,
+}: {
+  label: string;
+  count: number;
+  tone: 'ok' | 'warn' | 'neutral';
+}) {
+  const cls =
+    tone === 'ok'
+      ? 'bg-success/10 text-success'
+      : tone === 'warn'
+        ? 'bg-[var(--amber-dim)] text-[var(--amber)]'
+        : 'bg-muted text-muted-foreground';
+  return (
+    <span className={`inline-flex items-center gap-1 px-2 py-1 rounded-md ${cls}`}>
+      <span>{label}</span>
+      <span className="tabular-nums">{count}</span>
+    </span>
+  );
+}

package/app/components/agents/AgentsOverviewSection.tsx

@@ -0,0 +1,89 @@
+'use client';
+
+import { AlertTriangle, CheckCircle2, Wrench } from 'lucide-react';
+import type { AgentBuckets, RiskItem } from './agents-content-model';
+
+export default function AgentsOverviewSection({
+  copy,
+  buckets,
+  riskQueue,
+  topSkillsLabel,
+  failedAgentsLabel,
+  topSkillsValue,
+  failedAgentsValue,
+}: {
+  copy: {
+    connected: string;
+    detected: string;
+    notFound: string;
+    riskQueue: string;
+    noRisk: string;
+    usagePulse: string;
+    successRate7d: string;
+    topSkills: string;
+    failedAgents: string;
+    na: string;
+  };
+  buckets: AgentBuckets;
+  riskQueue: RiskItem[];
+  topSkillsLabel: string;
+  failedAgentsLabel: string;
+  topSkillsValue: string;
+  failedAgentsValue: string;
+}) {
+  return (
+    <div className="space-y-4" role="tabpanel" id="agents-panel-overview" aria-labelledby="agents-tab-overview">
+      <section className="grid grid-cols-1 md:grid-cols-3 gap-3">
+        <StatCard title={copy.connected} value={String(buckets.connected.length)} tone="ok" />
+        <StatCard title={copy.detected} value={String(buckets.detected.length)} tone="warn" />
+        <StatCard title={copy.notFound} value={String(buckets.notFound.length)} tone="warn" />
+      </section>
+
+      <section className="rounded-lg border border-border bg-card p-4">
+        <h2 className="text-sm font-medium text-foreground mb-3">{copy.riskQueue}</h2>
+        {riskQueue.length === 0 ? (
+          <p className="text-sm text-muted-foreground">{copy.noRisk}</p>
+        ) : (
+          <ul className="space-y-2">
+            {riskQueue.map((risk) => (
+              <li key={risk.id} className="flex items-start gap-2 text-sm">
+                <AlertTriangle size={14} className={risk.severity === 'error' ? 'text-destructive mt-0.5' : 'text-[var(--amber)] mt-0.5'} />
+                <span className="text-foreground">{risk.title}</span>
+              </li>
+            ))}
+          </ul>
+        )}
+      </section>
+
+      <section className="rounded-lg border border-border bg-card p-4">
+        <h2 className="text-sm font-medium text-foreground mb-3">{copy.usagePulse}</h2>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-3 text-sm">
+          <InfoLine label={copy.successRate7d} value={copy.na} />
+          <InfoLine label={topSkillsLabel || copy.topSkills} value={topSkillsValue} />
+          <InfoLine label={failedAgentsLabel || copy.failedAgents} value={failedAgentsValue} />
+        </div>
+      </section>
+    </div>
+  );
+}
+
+function StatCard({ title, value, tone }: { title: string; value: string; tone: 'ok' | 'warn' }) {
+  return (
+    <div className="rounded-lg border border-border bg-card p-4">
+      <div className="flex items-center justify-between mb-2">
+        <p className="text-xs text-muted-foreground">{title}</p>
+        {tone === 'ok' ? <CheckCircle2 size={14} className="text-success" /> : <Wrench size={14} className="text-[var(--amber)]" />}
+      </div>
+      <p className="text-xl font-semibold text-foreground">{value}</p>
+    </div>
+  );
+}
+
+function InfoLine({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="rounded-md border border-border px-3 py-2">
+      <p className="text-2xs text-muted-foreground mb-1">{label}</p>
+      <p className="text-sm text-foreground truncate">{value}</p>
+    </div>
+  );
+}

package/app/components/agents/AgentsSkillsSection.tsx

@@ -0,0 +1,146 @@
+'use client';
+
+import { useMemo, useState } from 'react';
+import { ChevronDown, ChevronRight, Search } from 'lucide-react';
+import { Toggle } from '@/components/settings/Primitives';
+import type { McpContextValue } from '@/hooks/useMcpData';
+import type { AgentBuckets, SkillSourceFilter } from './agents-content-model';
+import { filterSkills, groupSkillsByCapability } from './agents-content-model';
+
+export default function AgentsSkillsSection({
+  copy,
+  mcp,
+  buckets,
+}: {
+  copy: {
+    title: string;
+    capabilityGroups: string;
+    searchPlaceholder: string;
+    sourceAll: string;
+    sourceBuiltin: string;
+    sourceUser: string;
+    emptyGroup: string;
+    matrixToggle: string;
+    groupLabels: Record<'research' | 'coding' | 'docs' | 'ops' | 'memory', string>;
+  };
+  mcp: McpContextValue;
+  buckets: AgentBuckets;
+}) {
+  const [query, setQuery] = useState('');
+  const [source, setSource] = useState<SkillSourceFilter>('all');
+  const [matrixOpen, setMatrixOpen] = useState(false);
+
+  const filtered = useMemo(() => filterSkills(mcp.skills, query, source), [mcp.skills, query, source]);
+  const grouped = useMemo(() => groupSkillsByCapability(filtered), [filtered]);
+  const knownAgents = useMemo(() => [...buckets.connected, ...buckets.detected, ...buckets.notFound], [buckets]);
+
+  return (
+    <section role="tabpanel" id="agents-panel-skills" aria-labelledby="agents-tab-skills" className="rounded-lg border border-border bg-card p-4 space-y-4">
+      <div>
+        <h2 className="text-sm font-medium text-foreground mb-1">{copy.title}</h2>
+        <p className="text-xs text-muted-foreground">{copy.capabilityGroups}</p>
+      </div>
+
+      <div className="flex flex-col md:flex-row gap-2">
+        <label className="relative flex-1">
+          <Search size={14} className="absolute left-2.5 top-1/2 -translate-y-1/2 text-muted-foreground" />
+          <input
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder={copy.searchPlaceholder}
+            className="w-full h-9 rounded-md border border-border bg-background pl-8 pr-3 text-sm text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          />
+        </label>
+        <div className="flex items-center gap-1 rounded-md border border-border p-1 bg-background">
+          <SourceFilterButton active={source === 'all'} label={copy.sourceAll} onClick={() => setSource('all')} />
+          <SourceFilterButton active={source === 'builtin'} label={copy.sourceBuiltin} onClick={() => setSource('builtin')} />
+          <SourceFilterButton active={source === 'user'} label={copy.sourceUser} onClick={() => setSource('user')} />
+        </div>
+      </div>
+
+      <div className="space-y-4">
+        {Object.entries(grouped).map(([groupKey, skills]) => (
+          <div key={groupKey} className="rounded-md border border-border p-3">
+            <div className="text-xs font-medium text-muted-foreground uppercase tracking-wider mb-2">
+              {copy.groupLabels[groupKey as keyof typeof copy.groupLabels]} ({skills.length})
+            </div>
+            {skills.length === 0 ? (
+              <p className="text-xs text-muted-foreground">{copy.emptyGroup}</p>
+            ) : (
+              <div className="space-y-1.5">
+                {skills.map((skill) => (
+                  <div key={skill.name} className="flex items-center justify-between gap-2">
+                    <div className="min-w-0">
+                      <p className="text-sm text-foreground truncate">{skill.name}</p>
+                      <p className="text-2xs text-muted-foreground">{skill.source === 'builtin' ? copy.sourceBuiltin : copy.sourceUser}</p>
+                    </div>
+                    <Toggle size="sm" checked={skill.enabled} onChange={(v) => void mcp.toggleSkill(skill.name, v)} />
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+
+      <div className="rounded-md border border-border bg-background p-3">
+        <button
+          type="button"
+          onClick={() => setMatrixOpen((v) => !v)}
+          className="w-full flex items-center justify-between text-sm text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-sm"
+        >
+          <span>{copy.matrixToggle}</span>
+          {matrixOpen ? <ChevronDown size={14} className="text-muted-foreground" /> : <ChevronRight size={14} className="text-muted-foreground" />}
+        </button>
+        {matrixOpen && (
+          <div className="mt-3 overflow-x-auto">
+            <table className="w-full text-xs">
+              <thead>
+                <tr className="border-b border-border">
+                  <th className="text-left py-2 text-muted-foreground font-medium">Skill</th>
+                  {knownAgents.map((agent) => (
+                    <th key={agent.key} className="text-left py-2 text-muted-foreground font-medium pr-3">{agent.name}</th>
+                  ))}
+                </tr>
+              </thead>
+              <tbody>
+                {filtered.map((skill) => (
+                  <tr key={skill.name} className="border-b border-border/40">
+                    <td className="py-2 text-foreground pr-3">{skill.name}</td>
+                    {knownAgents.map((agent) => (
+                      <td key={`${skill.name}:${agent.key}`} className="py-2 pr-3 text-muted-foreground">
+                        {agent.present ? (skill.enabled ? 'Enabled' : 'Disabled') : 'Unsupported'}
+                      </td>
+                    ))}
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </div>
+    </section>
+  );
+}
+
+function SourceFilterButton({
+  active,
+  label,
+  onClick,
+}: {
+  active: boolean;
+  label: string;
+  onClick: () => void;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={`px-2.5 h-7 rounded text-xs transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ${
+        active ? 'bg-[var(--amber-dim)] text-[var(--amber)]' : 'text-muted-foreground hover:text-foreground hover:bg-muted'
+      }`}
+    >
+      {label}
+    </button>
+  );
+}

package/app/components/agents/agents-content-model.ts

@@ -0,0 +1,80 @@
+import type { AgentInfo, SkillInfo } from '@/components/settings/types';
+
+export type AgentsDashboardTab = 'overview' | 'mcp' | 'skills';
+export type AgentResolvedStatus = 'connected' | 'detected' | 'notFound';
+export type SkillCapability = 'research' | 'coding' | 'docs' | 'ops' | 'memory';
+export type SkillSourceFilter = 'all' | 'builtin' | 'user';
+
+export interface RiskItem {
+  id: string;
+  severity: 'warn' | 'error';
+  title: string;
+}
+
+export interface AgentBuckets {
+  connected: AgentInfo[];
+  detected: AgentInfo[];
+  notFound: AgentInfo[];
+}
+
+export function parseAgentsTab(tab: string | undefined): AgentsDashboardTab {
+  if (tab === 'mcp' || tab === 'skills') return tab;
+  return 'overview';
+}
+
+export function bucketAgents(agents: AgentInfo[]): AgentBuckets {
+  return {
+    connected: agents.filter((a) => a.present && a.installed),
+    detected: agents.filter((a) => a.present && !a.installed),
+    notFound: agents.filter((a) => !a.present),
+  };
+}
+
+export function resolveAgentStatus(agent: AgentInfo): AgentResolvedStatus {
+  if (agent.present && agent.installed) return 'connected';
+  if (agent.present) return 'detected';
+  return 'notFound';
+}
+
+export function capabilityForSkill(skill: SkillInfo): SkillCapability {
+  const text = `${skill.name} ${skill.description}`.toLowerCase();
+  if (text.includes('search') || text.includes('research')) return 'research';
+  if (text.includes('doc') || text.includes('write')) return 'docs';
+  if (text.includes('deploy') || text.includes('ops') || text.includes('ci')) return 'ops';
+  if (text.includes('memory') || text.includes('mind')) return 'memory';
+  return 'coding';
+}
+
+export function groupSkillsByCapability(skills: SkillInfo[]): Record<SkillCapability, SkillInfo[]> {
+  return {
+    research: skills.filter((s) => capabilityForSkill(s) === 'research'),
+    coding: skills.filter((s) => capabilityForSkill(s) === 'coding'),
+    docs: skills.filter((s) => capabilityForSkill(s) === 'docs'),
+    ops: skills.filter((s) => capabilityForSkill(s) === 'ops'),
+    memory: skills.filter((s) => capabilityForSkill(s) === 'memory'),
+  };
+}
+
+export function buildRiskQueue(args: {
+  mcpRunning: boolean;
+  detectedCount: number;
+  notFoundCount: number;
+  allSkillsDisabled: boolean;
+}): RiskItem[] {
+  const items: RiskItem[] = [];
+  if (!args.mcpRunning) items.push({ id: 'mcp-stopped', severity: 'error', title: 'MCP server is not running' });
+  if (args.detectedCount > 0) items.push({ id: 'detected-unconfigured', severity: 'warn', title: `${args.detectedCount} detected agent(s) need configuration` });
+  if (args.notFoundCount > 0) items.push({ id: 'not-found', severity: 'warn', title: `${args.notFoundCount} agent(s) not detected on this machine` });
+  if (args.allSkillsDisabled) items.push({ id: 'skills-disabled', severity: 'warn', title: 'All skills are disabled' });
+  return items;
+}
+
+export function filterSkills(skills: SkillInfo[], query: string, source: SkillSourceFilter): SkillInfo[] {
+  const q = query.trim().toLowerCase();
+  return skills.filter((skill) => {
+    if (source !== 'all' && skill.source !== source) return false;
+    if (!q) return true;
+    const haystack = `${skill.name} ${skill.description}`.toLowerCase();
+    return haystack.includes(q);
+  });
+}

package/app/components/ask/AskContent.tsx

@@ -326,8 +326,14 @@ export default function AskContent({ visible, currentFile, initialMessage, onFir
       if (!res.ok) {
         let errorMsg = `Request failed (${res.status})`;
         try {
-          const errBody = await res.json();
-          if (errBody.error) errorMsg = errBody.error;
+          const errBody = await res.json() as { error?: { message?: string } | string; message?: string };
+          if (typeof errBody?.error === 'string' && errBody.error.trim()) {
+            errorMsg = errBody.error;
+          } else if (typeof errBody?.error === 'object' && typeof errBody.error?.message === 'string' && errBody.error.message.trim()) {
+            errorMsg = errBody.error.message;
+          } else if (typeof errBody?.message === 'string' && errBody.message.trim()) {
+            errorMsg = errBody.message;
+          }
         } catch {}
         throw new Error(errorMsg);
       }
@@ -600,9 +606,8 @@ export default function AskContent({ visible, currentFile, initialMessage, onFir
               onChange={e => handleInputChange(e.target.value)}
               onKeyDown={handleInputKeyDown}
               placeholder={t.ask.placeholder}
-              disabled={isLoading}
               rows={1}
-              className="min-w-0 flex-1 resize-none overflow-y-auto bg-transparent py-2 text-sm leading-snug text-foreground placeholder:text-muted-foreground outline-none disabled:opacity-50"
+              className="min-w-0 flex-1 resize-none overflow-y-auto bg-transparent py-2 text-sm leading-snug text-foreground placeholder:text-muted-foreground outline-none"
             />
           ) : (
             <input
@@ -613,8 +618,7 @@ export default function AskContent({ visible, currentFile, initialMessage, onFir
               onChange={e => handleInputChange(e.target.value)}
               onKeyDown={handleInputKeyDown}
               placeholder={t.ask.placeholder}
-              disabled={isLoading}
-              className="flex-1 bg-transparent text-sm text-foreground placeholder:text-muted-foreground outline-none disabled:opacity-50 min-w-0"
+              className="flex-1 bg-transparent text-sm text-foreground placeholder:text-muted-foreground outline-none min-w-0"
             />
           )}
 
@@ -657,6 +661,11 @@ export default function AskContent({ visible, currentFile, initialMessage, onFir
             <kbd className="font-mono">ESC</kbd> {t.search.close}
           </span>
         )}
+        {isLoading && input.trim() && (
+          <span className={isPanel ? 'text-[10px] text-[var(--amber)]/80' : 'text-xs text-[var(--amber)]/80'}>
+            {t.ask.draftingHint}
+          </span>
+        )}
       </div>
     </>
   );

package/app/components/changes/ChangesBanner.tsx

@@ -0,0 +1,51 @@
+'use client';
+
+import Link from 'next/link';
+import { useEffect, useState } from 'react';
+import { apiFetch } from '@/lib/api';
+
+interface ChangeSummaryPayload {
+  unreadCount: number;
+}
+
+export default function ChangesBanner() {
+  const [unreadCount, setUnreadCount] = useState(0);
+
+  useEffect(() => {
+    let active = true;
+    const fetchSummary = async () => {
+      try {
+        const summary = await apiFetch<ChangeSummaryPayload>('/api/changes?op=summary');
+        if (active) setUnreadCount(summary.unreadCount);
+      } catch {
+        if (active) setUnreadCount(0);
+      }
+    };
+    void fetchSummary();
+    const timer = setInterval(() => void fetchSummary(), 15_000);
+    return () => {
+      active = false;
+      clearInterval(timer);
+    };
+  }, []);
+
+  if (unreadCount <= 0) return null;
+
+  return (
+    <div className="sticky top-[52px] md:top-0 z-20 border-b bg-[var(--amber-dim)]" style={{ borderColor: 'color-mix(in srgb, var(--amber) 35%, var(--border))' }}>
+      <div className="px-4 md:px-6 py-2">
+        <div className="content-width xl:mr-[220px] flex items-center justify-between gap-3">
+          <p className="text-xs md:text-sm text-foreground font-display">
+            {unreadCount} content change{unreadCount === 1 ? '' : 's'} detected.
+          </p>
+          <Link
+            href="/changes"
+            className="text-xs md:text-sm text-[var(--amber)] hover:underline focus-visible:ring-2 focus-visible:ring-ring rounded-sm"
+          >
+            Review changes
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}