mop-agent 0.1.14 → 0.1.16

package/apps/web/app/settings/page.tsx

@@ -6,6 +6,16 @@ import { useMemoryCore } from "@/components/AppShell";
 
 type Masked = { configured: boolean; provider?: string; model?: string | null; keyHint?: string };
 type Member = { id: string; email: string; name: string; role: string };
+type AppId = "telegram" | "discord" | "whatsapp" | "slack" | "webhook";
+type AppConfig = { appId: AppId; configured: boolean; enabled: boolean; keyHint: string; updatedAt: number };
+
+const APP_CATALOG: Array<{ id: AppId; name: string; icon: string; description: string; secretLabel: string; fieldLabel: string; fieldKey: string; runtime: boolean }> = [
+  { id: "telegram", name: "Telegram", icon: "✈", description: "Private bot conversations and project-bound chats.", secretLabel: "Bot token", fieldLabel: "Bot username (optional)", fieldKey: "username", runtime: true },
+  { id: "discord", name: "Discord", icon: "◈", description: "Guild channels, direct messages and project replies.", secretLabel: "Bot token", fieldLabel: "Application ID (optional)", fieldKey: "applicationId", runtime: true },
+  { id: "whatsapp", name: "WhatsApp", icon: "◉", description: "Meta Cloud API account and phone-number configuration.", secretLabel: "Access token", fieldLabel: "Phone number ID", fieldKey: "phoneNumberId", runtime: false },
+  { id: "slack", name: "Slack", icon: "⌗", description: "Workspace bot configuration for future channel routing.", secretLabel: "Bot token", fieldLabel: "App ID", fieldKey: "appId", runtime: false },
+  { id: "webhook", name: "Webhook", icon: "↗", description: "Signed custom automation endpoint configuration.", secretLabel: "Signing secret", fieldLabel: "Endpoint URL", fieldKey: "endpoint", runtime: false },
+];
 
 export default function SettingsPage() {
   const { settingsSection: section } = useMemoryCore();
@@ -124,7 +134,7 @@ export default function SettingsPage() {
               </form>
               {providerMsg && <p style={messageStyle}>{providerMsg}</p>}
             </>
-          ) : (
+          ) : section === "users" ? (
             <>
               <div style={sectionHeading}>
                 <div>
@@ -165,6 +175,8 @@ export default function SettingsPage() {
                 {userMsg && <p style={messageStyle}>{userMsg}</p>}
               </div>
             </>
+          ) : (
+            <AppsSettings />
           )}
         </section>
       </div>
@@ -172,6 +184,95 @@ export default function SettingsPage() {
   );
 }
 
+function AppsSettings() {
+  const [configs, setConfigs] = useState<AppConfig[]>([]);
+  const [selected, setSelected] = useState<AppId>("telegram");
+  const [secret, setSecret] = useState("");
+  const [fieldValue, setFieldValue] = useState("");
+  const [enabled, setEnabled] = useState(true);
+  const [message, setMessage] = useState("");
+  const app = APP_CATALOG.find((item) => item.id === selected)!;
+  const current = configs.find((config) => config.appId === selected);
+
+  function loadApps() {
+    fetch("/api/apps").then((response) => response.json()).then((result) => setConfigs(result.apps ?? [])).catch(() => {});
+  }
+
+  useEffect(loadApps, []);
+
+  useEffect(() => {
+    setEnabled(current?.enabled ?? true);
+    setSecret("");
+    setFieldValue("");
+    setMessage("");
+  }, [selected, current?.enabled]);
+
+  async function save(event: React.FormEvent) {
+    event.preventDefault();
+    setMessage("Saving encrypted configuration…");
+    const response = await fetch("/api/apps", {
+      method: "POST",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify({
+        appId: selected,
+        secret: secret || undefined,
+        enabled,
+        fields: fieldValue ? { [app.fieldKey]: fieldValue } : undefined,
+      }),
+    });
+    const result = await response.json();
+    if (response.ok) {
+      setConfigs(result.apps ?? []);
+      setSecret("");
+      setFieldValue("");
+      setMessage(app.runtime ? "Saved. Restart MOP-AGENT to activate this bot runtime." : "Configuration saved securely. Runtime adapter will use it when enabled.");
+    } else {
+      setMessage(`Unable to save: ${result.error ?? response.status}`);
+    }
+  }
+
+  return (
+    <>
+      <div style={sectionHeading}>
+        <div><p className="mop-page-kicker">CHANNELS & INTEGRATIONS</p><h2 style={titleStyle}>Apps</h2></div>
+        <span style={statusBadge}>{configs.filter((config) => config.enabled).length} ENABLED</span>
+      </div>
+
+      <div className="mop-apps-layout">
+        <div className="mop-app-catalog">
+          {APP_CATALOG.map((item) => {
+            const config = configs.find((entry) => entry.appId === item.id);
+            return (
+              <button type="button" key={item.id} className={selected === item.id ? "is-active" : ""} onClick={() => setSelected(item.id)}>
+                <span>{item.icon}</span>
+                <div><strong>{item.name}</strong><small>{config?.configured ? (config.enabled ? "CONFIGURED · ENABLED" : "CONFIGURED · PAUSED") : "NOT CONFIGURED"}</small></div>
+                <i className={config?.enabled ? "is-online" : ""} />
+              </button>
+            );
+          })}
+        </div>
+
+        <form className="mop-app-config-panel" onSubmit={save}>
+          <header><span>{app.icon}</span><div><h3>{app.name}</h3><p>{app.description}</p></div></header>
+          <div className="mop-app-runtime-status">
+            <span className={app.runtime ? "is-ready" : ""} />
+            {app.runtime ? "Runtime adapter available" : "Configuration registry ready · adapter expansion planned"}
+          </div>
+          <label style={labelStyle}>{app.secretLabel}
+            <input type="password" required={!current?.configured} value={secret} onChange={(event) => setSecret(event.target.value)} placeholder={current?.configured ? `Saved key ${current.keyHint} · leave blank to keep` : `Enter ${app.secretLabel.toLowerCase()}`} style={inputStyle} />
+          </label>
+          <label style={labelStyle}>{app.fieldLabel}
+            <input value={fieldValue} onChange={(event) => setFieldValue(event.target.value)} placeholder={current?.configured ? "Leave blank to keep saved value" : app.fieldLabel} style={inputStyle} />
+          </label>
+          <label className="mop-app-enabled-toggle"><input type="checkbox" checked={enabled} onChange={(event) => setEnabled(event.target.checked)} /><span>Enable this integration</span></label>
+          <button type="submit" style={primaryButton}>SAVE {app.name.toUpperCase()}</button>
+          {message && <p style={messageStyle}>{message}</p>}
+        </form>
+      </div>
+    </>
+  );
+}
+
 const adminBadge: CSSProperties = { padding: "7px 10px", color: "#fef9e1", background: "#742220", fontFamily: '"SFMono-Regular", Consolas, monospace', fontSize: 10, fontWeight: 900, letterSpacing: ".12em" };
 const sectionHeading: CSSProperties = { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12, marginBottom: 20, paddingBottom: 15, borderBottom: "1px solid rgba(45,74,62,.24)" };
 const titleStyle: CSSProperties = { margin: 0, fontFamily: '"SFMono-Regular", Consolas, monospace', fontSize: 22 };

package/apps/web/components/AppShell.tsx

@@ -15,8 +15,8 @@ export type Project = { id: string; name: string; status: string };
 
 interface MemoryCoreContextType {
   projects: Project[];
-  settingsSection: "providers" | "users";
-  setSettingsSection: (section: "providers" | "users") => void;
+  settingsSection: "providers" | "users" | "apps";
+  setSettingsSection: (section: "providers" | "users" | "apps") => void;
 }
 
 const MemoryCoreContext = createContext<MemoryCoreContextType | undefined>(undefined);
@@ -40,8 +40,10 @@ function pageTitle(pathname: string): string {
 export function AppShell({ viewer, children }: { viewer: AppViewer; children: ReactNode }) {
   const pathname = usePathname();
   const [menuOpen, setMenuOpen] = useState(false);
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
+  const [accountDrawerOpen, setAccountDrawerOpen] = useState(false);
   const [projects, setProjects] = useState<Project[]>([]);
-  const [settingsSection, setSettingsSection] = useState<"providers" | "users">("providers");
+  const [settingsSection, setSettingsSection] = useState<"providers" | "users" | "apps">("providers");
   const isAdmin = viewer.role === "owner";
   const isSettings = pathname.startsWith("/settings");
   const title = pageTitle(pathname);
@@ -53,27 +55,56 @@ export function AppShell({ viewer, children }: { viewer: AppViewer; children: Re
       .catch(() => {});
 
     const requested = new URLSearchParams(window.location.search).get("section");
-    if (requested === "users") setSettingsSection("users");
+    if (requested === "users" || requested === "apps") setSettingsSection(requested);
+    setSidebarCollapsed(window.localStorage.getItem("mop-agent-sidebar-collapsed") === "1");
   }, []);
 
+  useEffect(() => {
+    if (!accountDrawerOpen) return;
+    const closeOnEscape = (event: KeyboardEvent) => {
+      if (event.key === "Escape") setAccountDrawerOpen(false);
+    };
+    window.addEventListener("keydown", closeOnEscape);
+    return () => window.removeEventListener("keydown", closeOnEscape);
+  }, [accountDrawerOpen]);
+
   async function logout() {
     await signOut();
     window.location.replace("/login");
   }
 
-  function selectSection(section: "providers" | "users") {
+  function selectSection(section: "providers" | "users" | "apps") {
     setSettingsSection(section);
-    window.history.replaceState(null, "", section === "providers" ? "/settings" : "/settings?section=users");
+    window.history.replaceState(null, "", section === "providers" ? "/settings" : `/settings?section=${section}`);
+  }
+
+  function toggleSidebar() {
+    setSidebarCollapsed((collapsed) => {
+      window.localStorage.setItem("mop-agent-sidebar-collapsed", collapsed ? "0" : "1");
+      return !collapsed;
+    });
   }
 
   return (
     <MemoryCoreContext.Provider value={{ projects, settingsSection, setSettingsSection }}>
-      <div className="mop-app-frame">
+      <div className={`mop-app-frame${sidebarCollapsed ? " is-sidebar-collapsed" : ""}`}>
         <header className="mop-app-topbar">
-          <a className="mop-app-brand" href="/assistant" aria-label="MOP-AGENT home">
-            <img src="/icon.svg" alt="" />
-            <span>MOP-AGENT</span>
-          </a>
+          <div className="mop-app-brand-cell">
+            <a className="mop-app-brand" href="/assistant" aria-label="MOP-AGENT home">
+              <img src="/icon.svg" alt="" />
+              <span>MOP-AGENT</span>
+            </a>
+            <button
+              className="mop-sidebar-collapse-toggle"
+              type="button"
+              aria-label={sidebarCollapsed ? "Expand sidebar" : "Collapse sidebar"}
+              aria-expanded={!sidebarCollapsed}
+              title={sidebarCollapsed ? "Expand sidebar" : "Collapse sidebar"}
+              onClick={toggleSidebar}
+            >
+              {sidebarCollapsed ? "›" : "‹"}
+            </button>
+          </div>
           <div className="mop-app-topbar-main">
             <button
               className="mop-menu-toggle"
@@ -106,20 +137,27 @@ export function AppShell({ viewer, children }: { viewer: AppViewer; children: Re
                   <span className="mop-nav-icon">♙</span>
                   <span>Users</span>
                 </button>
+                <button className={settingsSection === "apps" ? "is-active" : ""} onClick={() => { selectSection("apps"); setMenuOpen(false); }}>
+                  <span className="mop-nav-icon">⌘</span>
+                  <span>Apps</span>
+                </button>
               </nav>
             </div>
           ) : (
             <>
-              <nav className="mop-sidebar-primary" aria-label="Workspace">
-                <a href="/assistant" className={pathname.startsWith("/assistant") || pathname.startsWith("/chat/") ? "is-active" : ""} onClick={() => setMenuOpen(false)}>
-                  <span className="mop-nav-icon">✎</span>
-                  <span>New chat</span>
-                </a>
-                <a href="/brain" className={pathname.startsWith("/brain") ? "is-active" : ""} onClick={() => setMenuOpen(false)}>
-                  <span className="mop-nav-icon">◉</span>
-                  <span>Brain</span>
-                </a>
-              </nav>
+              <div className="mop-nav-section mop-workspace-nav">
+                <p>WORKSPACE</p>
+                <nav className="mop-sidebar-primary" aria-label="Workspace">
+                  <a href="/assistant" className={pathname.startsWith("/assistant") || pathname.startsWith("/chat/") ? "is-active" : ""} onClick={() => setMenuOpen(false)}>
+                    <span className="mop-nav-icon">✎</span>
+                    <span>Chat</span>
+                  </a>
+                  <a href="/brain" className={pathname.startsWith("/brain") ? "is-active" : ""} onClick={() => setMenuOpen(false)}>
+                    <span className="mop-nav-icon">◉</span>
+                    <span>Brain</span>
+                  </a>
+                </nav>
+              </div>
 
               {isAdmin && (
                 <div className="mop-nav-section mop-admin-nav">
@@ -141,7 +179,14 @@ export function AppShell({ viewer, children }: { viewer: AppViewer; children: Re
               <span>← BACK TO WORKSPACE</span>
             </a>
           )}
-          <button className="mop-account-card" type="button" onClick={logout} title="Sign out">
+          <button
+            className="mop-account-card"
+            type="button"
+            onClick={() => { setAccountDrawerOpen(true); setMenuOpen(false); }}
+            title="Open profile"
+            aria-controls="mop-account-drawer"
+            aria-expanded={accountDrawerOpen}
+          >
             <span className="mop-account-avatar">{viewer.name.slice(0, 1).toUpperCase()}</span>
             <span className="mop-account-copy">
               <strong>{viewer.name}</strong>
@@ -152,6 +197,40 @@ export function AppShell({ viewer, children }: { viewer: AppViewer; children: Re
         </aside>
 
         <main className="mop-app-main">{children}</main>
+
+        {accountDrawerOpen && (
+          <>
+            <button className="mop-account-drawer-scrim" type="button" aria-label="Close profile drawer" onClick={() => setAccountDrawerOpen(false)} />
+            <aside id="mop-account-drawer" className="mop-account-drawer" role="dialog" aria-modal="true" aria-labelledby="mop-account-drawer-title">
+              <header className="mop-account-drawer-header">
+                <div>
+                  <span>ACCOUNT</span>
+                  <strong id="mop-account-drawer-title">Profile</strong>
+                </div>
+                <button type="button" aria-label="Close profile drawer" title="Close" onClick={() => setAccountDrawerOpen(false)}>×</button>
+              </header>
+
+              <div className="mop-account-drawer-profile">
+                <span className="mop-account-drawer-avatar">{viewer.name.slice(0, 1).toUpperCase()}</span>
+                <div>
+                  <strong>{viewer.name}</strong>
+                  <span>{viewer.email}</span>
+                </div>
+              </div>
+
+              <dl className="mop-account-drawer-details">
+                <div><dt>Access level</dt><dd>{isAdmin ? "Administrator" : "Member"}</dd></div>
+                <div><dt>Workspace</dt><dd>MOP-AGENT</dd></div>
+              </dl>
+
+              <div className="mop-account-drawer-spacer" />
+              <button className="mop-account-logout" type="button" onClick={logout}>
+                <span>↪</span>
+                <strong>Logout</strong>
+              </button>
+            </aside>
+          </>
+        )}
       </div>
     </MemoryCoreContext.Provider>
   );

package/apps/web/components/ui/chatgpt-prompt-input.tsx

@@ -0,0 +1,290 @@
+"use client";
+
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+
+type ClassValue = string | false | null | undefined;
+function cn(...values: ClassValue[]) {
+  return values.filter(Boolean).join(" ");
+}
+
+export type PromptTool = "image" | "web" | "code" | "research" | "think";
+export type PromptImage = { name: string; mimeType: string; dataUrl: string };
+export type PromptSubmit = { message: string; tool: PromptTool | null; image: PromptImage | null };
+
+type PromptBoxProps = Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "value" | "onChange" | "onSubmit"> & {
+  value: string;
+  onValueChange: (value: string) => void;
+  onSubmit: (payload: PromptSubmit) => void | boolean | Promise<void | boolean>;
+  busy?: boolean;
+};
+
+export const PromptBox = React.forwardRef<HTMLTextAreaElement, PromptBoxProps>(function PromptBox(
+  { value, onValueChange, onSubmit, busy = false, className, placeholder = "Message MOP-AGENT…", ...props },
+  forwardedRef,
+) {
+  const textareaRef = React.useRef<HTMLTextAreaElement>(null);
+  const fileInputRef = React.useRef<HTMLInputElement>(null);
+  const recognitionRef = React.useRef<SpeechRecognitionLike | null>(null);
+  const [image, setImage] = React.useState<PromptImage | null>(null);
+  const [selectedTool, setSelectedTool] = React.useState<PromptTool | null>(null);
+  const [popoverOpen, setPopoverOpen] = React.useState(false);
+  const [previewOpen, setPreviewOpen] = React.useState(false);
+  const [listening, setListening] = React.useState(false);
+  const [voiceError, setVoiceError] = React.useState("");
+
+  React.useImperativeHandle(forwardedRef, () => textareaRef.current as HTMLTextAreaElement);
+
+  React.useLayoutEffect(() => {
+    const textarea = textareaRef.current;
+    if (!textarea) return;
+    textarea.style.height = "auto";
+    textarea.style.height = `${Math.min(textarea.scrollHeight, 200)}px`;
+  }, [value]);
+
+  React.useEffect(() => () => recognitionRef.current?.stop(), []);
+
+  async function submit() {
+    const message = value.trim();
+    if (busy || (!message && !image)) return;
+    const accepted = await onSubmit({ message, tool: selectedTool, image });
+    if (accepted === false) return;
+    setImage(null);
+    setSelectedTool(null);
+    setVoiceError("");
+  }
+
+  function attachFile(event: React.ChangeEvent<HTMLInputElement>) {
+    const file = event.target.files?.[0];
+    event.target.value = "";
+    if (!file) return;
+    if (!file.type.startsWith("image/")) {
+      setVoiceError("Only image attachments are supported.");
+      return;
+    }
+    if (file.size > 5 * 1024 * 1024) {
+      setVoiceError("Image must be 5 MB or smaller.");
+      return;
+    }
+    const reader = new FileReader();
+    reader.onload = () => {
+      setImage({ name: file.name, mimeType: file.type, dataUrl: String(reader.result) });
+      setVoiceError("");
+    };
+    reader.readAsDataURL(file);
+  }
+
+  function toggleVoice() {
+    if (listening) {
+      recognitionRef.current?.stop();
+      return;
+    }
+    const SpeechRecognition = getSpeechRecognition();
+    if (!SpeechRecognition) {
+      setVoiceError("Voice input is not supported by this browser.");
+      return;
+    }
+    const recognition = new SpeechRecognition();
+    recognition.lang = navigator.language || "en-US";
+    recognition.interimResults = true;
+    recognition.continuous = false;
+    const startingValue = value;
+    recognition.onresult = (event) => {
+      let transcript = "";
+      for (let index = event.resultIndex; index < event.results.length; index += 1) {
+        transcript += event.results[index]?.[0]?.transcript ?? "";
+      }
+      onValueChange(`${startingValue}${startingValue && transcript ? " " : ""}${transcript}`);
+    };
+    recognition.onerror = () => {
+      setListening(false);
+      setVoiceError("Voice input could not be started.");
+    };
+    recognition.onend = () => setListening(false);
+    recognitionRef.current = recognition;
+    setVoiceError("");
+    setListening(true);
+    recognition.start();
+  }
+
+  const activeTool = toolItems.find((item) => item.id === selectedTool);
+  const ActiveToolIcon = activeTool?.icon;
+  const canSend = !busy && (!!value.trim() || !!image);
+
+  return (
+    <div className={cn("mop-prompt-box flex flex-col rounded-[26px] border border-[#2d4a3e]/40 bg-[#fffdf2] p-2 shadow-sm", className)}>
+      <input ref={fileInputRef} type="file" accept="image/*" className="hidden" onChange={attachFile} />
+
+      {image && (
+        <DialogPrimitive.Root open={previewOpen} onOpenChange={setPreviewOpen}>
+          <div className="relative mb-1 ml-1 w-fit">
+            <DialogPrimitive.Trigger asChild>
+              <button type="button" className="mop-prompt-preview-trigger" title="Preview attachment">
+                <img src={image.dataUrl} alt={image.name} className="h-16 w-16 rounded-xl object-cover" />
+              </button>
+            </DialogPrimitive.Trigger>
+            <button type="button" className="mop-prompt-remove-image" aria-label="Remove image" onClick={() => setImage(null)}>
+              <XIcon className="h-3.5 w-3.5" />
+            </button>
+          </div>
+          <DialogPrimitive.Portal>
+            <DialogPrimitive.Overlay className="fixed inset-0 z-[100] bg-black/65 backdrop-blur-sm" />
+            <DialogPrimitive.Content className="fixed left-1/2 top-1/2 z-[101] w-[min(900px,92vw)] -translate-x-1/2 -translate-y-1/2 outline-none">
+              <div className="relative rounded-2xl bg-[#fffdf2] p-3 shadow-2xl">
+                <img src={image.dataUrl} alt={image.name} className="max-h-[82vh] w-full rounded-xl object-contain" />
+                <DialogPrimitive.Close className="absolute right-5 top-5 grid h-8 w-8 place-items-center rounded-full bg-[#2d4a3e] text-[#fef9e1]" aria-label="Close preview">
+                  <XIcon className="h-4 w-4" />
+                </DialogPrimitive.Close>
+              </div>
+            </DialogPrimitive.Content>
+          </DialogPrimitive.Portal>
+        </DialogPrimitive.Root>
+      )}
+
+      <textarea
+        {...props}
+        ref={textareaRef}
+        rows={1}
+        value={value}
+        disabled={busy}
+        placeholder={placeholder}
+        className="mop-prompt-textarea min-h-12 w-full resize-none border-0 bg-transparent p-3 text-[#2d4a3e] outline-none placeholder:text-[#2d4a3e]/45"
+        onChange={(event) => onValueChange(event.target.value)}
+        onKeyDown={(event) => {
+          props.onKeyDown?.(event);
+          if (event.defaultPrevented) return;
+          if (event.key === "Enter" && !event.shiftKey) {
+            event.preventDefault();
+            void submit();
+          }
+        }}
+      />
+
+      <div className="flex items-center gap-2 px-1 pb-1">
+        <Tooltip label="Attach image">
+          <button type="button" className="mop-prompt-round-button" onClick={() => fileInputRef.current?.click()} disabled={busy} aria-label="Attach image">
+            <PlusIcon className="h-5 w-5" />
+          </button>
+        </Tooltip>
+
+        <PopoverPrimitive.Root open={popoverOpen} onOpenChange={setPopoverOpen}>
+          <TooltipPrimitive.Provider delayDuration={100}>
+            <TooltipPrimitive.Root>
+              <TooltipPrimitive.Trigger asChild>
+                <PopoverPrimitive.Trigger asChild>
+                  <button type="button" className="mop-prompt-tool-button" disabled={busy}>
+                    <SettingsIcon className="h-4 w-4" />
+                    {!selectedTool && <span>Tools</span>}
+                  </button>
+                </PopoverPrimitive.Trigger>
+              </TooltipPrimitive.Trigger>
+              <TooltipPortal label="Explore tools" />
+            </TooltipPrimitive.Root>
+          </TooltipPrimitive.Provider>
+          <PopoverPrimitive.Portal>
+            <PopoverPrimitive.Content side="top" align="start" sideOffset={9} className="mop-prompt-popover z-[90] w-64 rounded-xl border border-[#2d4a3e]/30 bg-[#fffdf2] p-2 text-[#2d4a3e] shadow-xl outline-none">
+              {toolItems.map((tool) => (
+                <button
+                  key={tool.id}
+                  type="button"
+                  className="mop-prompt-popover-item"
+                  onClick={() => { setSelectedTool(tool.id); setPopoverOpen(false); }}
+                >
+                  <tool.icon className="h-4 w-4" />
+                  <span>{tool.name}</span>
+                </button>
+              ))}
+            </PopoverPrimitive.Content>
+          </PopoverPrimitive.Portal>
+        </PopoverPrimitive.Root>
+
+        {activeTool && (
+          <button type="button" className="mop-prompt-active-tool" onClick={() => setSelectedTool(null)} disabled={busy}>
+            {ActiveToolIcon && <ActiveToolIcon className="h-4 w-4" />}
+            <span>{activeTool.shortName}</span>
+            <XIcon className="h-3.5 w-3.5" />
+          </button>
+        )}
+
+        <div className="ml-auto flex items-center gap-2">
+          <Tooltip label={listening ? "Stop listening" : "Voice input"}>
+            <button type="button" className={cn("mop-prompt-round-button", listening && "is-listening")} onClick={toggleVoice} disabled={busy} aria-label={listening ? "Stop listening" : "Voice input"}>
+              <MicIcon className="h-4.5 w-4.5" />
+            </button>
+          </Tooltip>
+          <Tooltip label="Send">
+            <button type="button" className="mop-prompt-send" disabled={!canSend} onClick={() => void submit()} aria-label="Send message">
+              <SendIcon className="h-5 w-5" />
+            </button>
+          </Tooltip>
+        </div>
+      </div>
+
+      {voiceError && <p className="mop-prompt-error">{voiceError}</p>}
+    </div>
+  );
+});
+
+function Tooltip({ label, children }: { label: string; children: React.ReactElement }) {
+  return (
+    <TooltipPrimitive.Provider delayDuration={100}>
+      <TooltipPrimitive.Root>
+        <TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>
+        <TooltipPortal label={label} />
+      </TooltipPrimitive.Root>
+    </TooltipPrimitive.Provider>
+  );
+}
+
+function TooltipPortal({ label }: { label: string }) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content side="top" sideOffset={6} className="z-[110] rounded-md bg-[#2d4a3e] px-2 py-1 text-xs text-[#fef9e1] shadow-lg">
+        {label}<TooltipPrimitive.Arrow className="fill-[#2d4a3e]" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  );
+}
+
+type SpeechRecognitionEventLike = { resultIndex: number; results: ArrayLike<{ 0?: { transcript?: string } }> };
+type SpeechRecognitionLike = {
+  lang: string;
+  interimResults: boolean;
+  continuous: boolean;
+  onresult: ((event: SpeechRecognitionEventLike) => void) | null;
+  onerror: (() => void) | null;
+  onend: (() => void) | null;
+  start(): void;
+  stop(): void;
+};
+type SpeechRecognitionConstructor = new () => SpeechRecognitionLike;
+
+function getSpeechRecognition(): SpeechRecognitionConstructor | undefined {
+  const voiceWindow = window as typeof window & {
+    SpeechRecognition?: SpeechRecognitionConstructor;
+    webkitSpeechRecognition?: SpeechRecognitionConstructor;
+  };
+  return voiceWindow.SpeechRecognition ?? voiceWindow.webkitSpeechRecognition;
+}
+
+type IconProps = React.SVGProps<SVGSVGElement>;
+const PlusIcon = (props: IconProps) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" {...props}><path d="M12 5v14M5 12h14" /></svg>;
+const SettingsIcon = (props: IconProps) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" {...props}><path d="M20 7h-9M14 17H5" /><circle cx="7" cy="7" r="3" /><circle cx="17" cy="17" r="3" /></svg>;
+const SendIcon = (props: IconProps) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" {...props}><path d="M12 19V5m-7 7 7-7 7 7" /></svg>;
+const XIcon = (props: IconProps) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" {...props}><path d="m6 6 12 12M18 6 6 18" /></svg>;
+const GlobeIcon = (props: IconProps) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" {...props}><circle cx="12" cy="12" r="9" /><path d="M3 12h18M12 3c3 3 4 6 4 9s-1 6-4 9c-3-3-4-6-4-9s1-6 4-9Z" /></svg>;
+const PencilIcon = (props: IconProps) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" {...props}><path d="m4 20 4-1 11-11a2.8 2.8 0 0 0-4-4L4 15l-1 5Z" /><path d="m14 5 5 5" /></svg>;
+const BrushIcon = (props: IconProps) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" {...props}><path d="m14 4 6 6-9 9c-2 2-6 1-7 1 0-1-1-5 1-7l9-9Z" /><path d="m11 7 6 6M4 20c-1 1-2 1-3 1 1-1 1-2 1-3" /></svg>;
+const TelescopeIcon = (props: IconProps) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" {...props}><path d="m3 7 13 5 2-5L5 2 3 7Z" /><path d="m11 11-3 10m6-9 3 9M7 21h12" /></svg>;
+const BulbIcon = (props: IconProps) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" {...props}><path d="M9 18h6m-5 3h4m3-7c1-1 2-3 2-5a7 7 0 1 0-14 0c0 2 1 4 2 5 1 1 2 2 2 4h6c0-2 1-3 2-4Z" /></svg>;
+const MicIcon = (props: IconProps) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" {...props}><rect x="9" y="2" width="6" height="12" rx="3" /><path d="M5 10v2a7 7 0 0 0 14 0v-2M12 19v3" /></svg>;
+
+const toolItems: Array<{ id: PromptTool; name: string; shortName: string; icon: React.ComponentType<IconProps> }> = [
+  { id: "image", name: "Create an image", shortName: "Image", icon: BrushIcon },
+  { id: "web", name: "Search the web", shortName: "Search", icon: GlobeIcon },
+  { id: "code", name: "Write or code", shortName: "Write", icon: PencilIcon },
+  { id: "research", name: "Run deep research", shortName: "Research", icon: TelescopeIcon },
+  { id: "think", name: "Think for longer", shortName: "Think", icon: BulbIcon },
+];

package/apps/web/components.json

@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "css": "app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true
+  },
+  "aliases": {
+    "components": "@/components",
+    "ui": "@/components/ui",
+    "utils": "@/lib/utils",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  }
+}