mop-agent 0.1.15 → 0.1.16

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);
@@ -41,8 +41,9 @@ export function AppShell({ viewer, children }: { viewer: AppViewer; children: Re
   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);
@@ -54,18 +55,27 @@ 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() {
@@ -127,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">
@@ -162,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>
@@ -173,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"
+  }
+}

package/apps/web/lib/channels/config.ts

@@ -0,0 +1,48 @@
+import { decryptSecret, encryptSecret, keyHint } from "../crypto";
+import { getSqlite } from "../db/client";
+
+export type AppId = "telegram" | "discord" | "whatsapp" | "slack" | "webhook";
+export type AppPayload = { secret: string; fields: Record<string, string> };
+type AppRow = { owner_id: string; app_id: AppId; config_enc: string; enabled: number; updated_at: number };
+
+export function listAppConfigs(ownerId: string) {
+  const rows = getSqlite().prepare("SELECT * FROM app_config WHERE owner_id = ? ORDER BY app_id").all(ownerId) as AppRow[];
+  return rows.map((row) => {
+    let hint = "••••";
+    try { hint = keyHint((JSON.parse(decryptSecret(row.config_enc)) as AppPayload).secret); } catch { /* masked */ }
+    return { appId: row.app_id, configured: true, enabled: !!row.enabled, keyHint: hint, updatedAt: row.updated_at };
+  });
+}
+
+export function saveAppConfig(ownerId: string, input: { appId: AppId; secret?: string; fields?: Record<string, string>; enabled: boolean }) {
+  const existing = getSqlite().prepare("SELECT * FROM app_config WHERE owner_id = ? AND app_id = ?").get(ownerId, input.appId) as AppRow | undefined;
+  let previous: AppPayload | undefined;
+  if (existing) {
+    try { previous = JSON.parse(decryptSecret(existing.config_enc)) as AppPayload; } catch { /* replace invalid config */ }
+  }
+  const secret = input.secret?.trim() || previous?.secret;
+  if (!secret) throw new Error("missing_secret");
+  const payload: AppPayload = { secret, fields: { ...(previous?.fields ?? {}), ...(input.fields ?? {}) } };
+  getSqlite().prepare(`
+    INSERT INTO app_config(owner_id, app_id, config_enc, enabled, updated_at)
+    VALUES (?, ?, ?, ?, ?)
+    ON CONFLICT(owner_id, app_id) DO UPDATE SET
+      config_enc = excluded.config_enc,
+      enabled = excluded.enabled,
+      updated_at = excluded.updated_at
+  `).run(ownerId, input.appId, encryptSecret(JSON.stringify(payload)), input.enabled ? 1 : 0, Date.now());
+}
+
+export function listEnabledAppConfigs(): Array<{ appId: AppId; payload: AppPayload }> {
+  const rows = getSqlite().prepare("SELECT * FROM app_config WHERE enabled = 1 ORDER BY updated_at DESC").all() as AppRow[];
+  const seen = new Set<AppId>();
+  const configs: Array<{ appId: AppId; payload: AppPayload }> = [];
+  for (const row of rows) {
+    if (seen.has(row.app_id)) continue;
+    try {
+      configs.push({ appId: row.app_id, payload: JSON.parse(decryptSecret(row.config_enc)) as AppPayload });
+      seen.add(row.app_id);
+    } catch { /* skip unreadable secrets */ }
+  }
+  return configs;
+}

package/apps/web/lib/channels/index.ts

@@ -4,14 +4,18 @@
  */
 export async function startChannels(): Promise<string[]> {
   const started: string[] = [];
-  if (process.env.TELEGRAM_BOT_TOKEN) {
+  const { listEnabledAppConfigs } = await import("./config");
+  const configs = listEnabledAppConfigs();
+  const telegramToken = process.env.TELEGRAM_BOT_TOKEN ?? configs.find((config) => config.appId === "telegram")?.payload.secret;
+  const discordToken = process.env.DISCORD_BOT_TOKEN ?? configs.find((config) => config.appId === "discord")?.payload.secret;
+  if (telegramToken) {
     const { startTelegram } = await import("./telegram");
-    startTelegram(process.env.TELEGRAM_BOT_TOKEN);
+    startTelegram(telegramToken);
     started.push("telegram");
   }
-  if (process.env.DISCORD_BOT_TOKEN) {
+  if (discordToken) {
     const { startDiscord } = await import("./discord");
-    startDiscord(process.env.DISCORD_BOT_TOKEN);
+    startDiscord(discordToken);
     started.push("discord");
   }
   return started;

package/apps/web/lib/db/migrate.ts

@@ -80,6 +80,15 @@ CREATE TABLE IF NOT EXISTS provider_config (
   updated_at INTEGER NOT NULL
 );
 
+CREATE TABLE IF NOT EXISTS app_config (
+  owner_id TEXT NOT NULL,
+  app_id TEXT NOT NULL,
+  config_enc TEXT NOT NULL,
+  enabled INTEGER NOT NULL DEFAULT 0,
+  updated_at INTEGER NOT NULL,
+  PRIMARY KEY (owner_id, app_id)
+);
+
 CREATE TABLE IF NOT EXISTS skill (
   id TEXT PRIMARY KEY,
   name TEXT NOT NULL,

package/apps/web/lib/providers/anthropic.ts

@@ -7,11 +7,30 @@ export function anthropicProvider(apiKey: string, model = "claude-sonnet-4-6"):
     id: "anthropic",
     model,
     async *chat({ system, messages }: ChatOptions) {
+      const anthropicMessages: Anthropic.MessageParam[] = messages.map((message) => {
+        if (!message.image || message.role !== "user") return { role: message.role, content: message.content };
+        const match = message.image.dataUrl.match(/^data:(image\/(?:jpeg|png|gif|webp));base64,(.+)$/s);
+        if (!match) return { role: message.role, content: message.content };
+        return {
+          role: message.role,
+          content: [
+            {
+              type: "image",
+              source: {
+                type: "base64",
+                media_type: match[1] as "image/jpeg" | "image/png" | "image/gif" | "image/webp",
+                data: match[2]!,
+              },
+            },
+            { type: "text", text: message.content || "Describe and help with this image." },
+          ],
+        };
+      });
       const stream = client.messages.stream({
         model,
         max_tokens: 4096,
         system,
-        messages: messages.map((m) => ({ role: m.role, content: m.content })),
+        messages: anthropicMessages,
       });
       for await (const ev of stream) {
         if (ev.type === "content_block_delta" && ev.delta.type === "text_delta") {

package/apps/web/lib/providers/openrouter.ts

@@ -8,12 +8,22 @@ export function openRouterProvider(apiKey: string, model = "anthropic/claude-son
     id: "openrouter",
     model,
     async *chat({ system, messages }: ChatOptions) {
+      const openRouterMessages: OpenAI.Chat.Completions.ChatCompletionMessageParam[] = messages.map((message) => {
+        if (!message.image || message.role !== "user") return { role: message.role, content: message.content };
+        return {
+          role: "user",
+          content: [
+            { type: "text", text: message.content || "Describe and help with this image." },
+            { type: "image_url", image_url: { url: message.image.dataUrl } },
+          ],
+        };
+      });
       const stream = await client.chat.completions.create({
         model,
         stream: true,
         messages: [
           ...(system ? ([{ role: "system" as const, content: system }]) : []),
-          ...messages.map((m) => ({ role: m.role, content: m.content })),
+          ...openRouterMessages,
         ],
       });
       for await (const chunk of stream) {

package/apps/web/lib/providers/types.ts

@@ -1,5 +1,6 @@
 /** Provider-neutral chat interface. Adapters stream text deltas. */
-export type Msg = { role: "user" | "assistant"; content: string };
+export type ChatImage = { name: string; mimeType: string; dataUrl: string };
+export type Msg = { role: "user" | "assistant"; content: string; image?: ChatImage };
 
 export type ChatOptions = {
   system?: string;

package/apps/web/package.json

@@ -15,6 +15,9 @@
   "dependencies": {
     "@anthropic-ai/sdk": "^0.105.0",
     "@mop/link-protocol": "*",
+    "@radix-ui/react-dialog": "^1.1.17",
+    "@radix-ui/react-popover": "^1.1.17",
+    "@radix-ui/react-tooltip": "^1.2.10",
     "@xenova/transformers": "^2.17.2",
     "better-auth": "^1.6.20",
     "better-sqlite3": "^12.11.1",
@@ -31,6 +34,7 @@
     "ws": "^8.18.0"
   },
   "devDependencies": {
+    "@tailwindcss/postcss": "^4.3.1",
     "@types/better-sqlite3": "^7.6.13",
     "@types/node": "^22.0.0",
     "@types/react": "^19.0.0",
@@ -38,7 +42,9 @@
     "@types/ws": "^8.5.12",
     "cross-env": "^7.0.3",
     "drizzle-kit": "^0.31.10",
+    "tailwindcss": "^4.3.1",
     "tsx": "^4.19.0",
+    "tw-animate-css": "^1.4.0",
     "typescript": "^5.5.0"
   }
 }

package/apps/web/postcss.config.mjs

@@ -0,0 +1,5 @@
+export default {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};