mop-agent 0.1.14 → 0.1.16

package/README.md

@@ -5,17 +5,25 @@ through MOP-FLOW. It stores project memory, performs semantic recall and
 consolidation, serves grounded chat, and can request approved actions from a
 linked FLOW node.
 
-> **Release status:** release candidate `mop-agent@0.1.14` contains the corrected VPS
-> installer, one-time Admin setup/login flow, and simplified shared application shell
-> with centered page titles and ChatGPT-inspired navigation.
+> **Release status:** release candidate `mop-agent@0.1.16` contains the corrected VPS
+> installer, one-time Admin setup/login flow, rich Assistant composer, Main Brain
+> workspace, Obsidian-inspired Graph View, and encrypted Apps settings.
 > The canonical installation command is exactly `npx mop-agent`.
 
 ## Current status
 
 The application core through Fasa 7 foundation is implemented: reverse-WSS
 project links, SQLite + sqlite-vec storage, Better Auth, semantic recall,
-admin-only provider/user settings, consolidation, approval-based write-back,
-Telegram and Discord adapters, skills, graph UI, execution backends, and user invites.
+admin-only provider/user/app settings, consolidation, approval-based write-back,
+Telegram and Discord adapters, skills, graph UI, execution backends, and user accounts.
+
+The Assistant supports an autosizing prompt, image attachment/preview, voice input
+(when the browser exposes Web Speech), and focused tool modes. Anthropic and
+OpenRouter receive attached images as multimodal input. Brain treats Main Brain as
+the primary knowledge layer and provides an interactive, searchable Graph View.
+Telegram and Discord credentials can be stored encrypted under **Settings → Apps**;
+their adapters become active after the service restarts. WhatsApp, Slack, and generic
+webhook configuration can be stored there now while their runtime adapters remain planned.
 
 The npm bootstrap stages the packaged application durably at `/opt/mop-agent`,
 uses the proven SQLite + sqlite-vec backend, and asks for sudo only for specific

package/apps/web/app/api/apps/route.ts

@@ -0,0 +1,23 @@
+import { requireRole } from "@/lib/authz";
+import { listAppConfigs, saveAppConfig, type AppId } from "@/lib/channels/config";
+
+const APP_IDS = new Set<AppId>(["telegram", "discord", "whatsapp", "slack", "webhook"]);
+
+export async function GET(req: Request): Promise<Response> {
+  const auth = await requireRole(req, ["owner"]);
+  if (!auth.ok) return auth.response;
+  return Response.json({ apps: listAppConfigs(auth.userId) });
+}
+
+export async function POST(req: Request): Promise<Response> {
+  const auth = await requireRole(req, ["owner"]);
+  if (!auth.ok) return auth.response;
+  const body = (await req.json()) as { appId?: AppId; secret?: string; fields?: Record<string, string>; enabled?: boolean };
+  if (!body.appId || !APP_IDS.has(body.appId)) return Response.json({ error: "unknown_app" }, { status: 400 });
+  try {
+    saveAppConfig(auth.userId, { appId: body.appId, secret: body.secret, fields: body.fields, enabled: body.enabled !== false });
+    return Response.json({ apps: listAppConfigs(auth.userId), restartRequired: true });
+  } catch (error) {
+    return Response.json({ error: error instanceof Error ? error.message : "save_failed" }, { status: 400 });
+  }
+}

package/apps/web/app/api/chat/route.ts

@@ -6,23 +6,44 @@
 import { auth } from "@/lib/auth";
 import { recall } from "@/lib/brain/broker";
 import { resolveProvider } from "@/lib/providers";
+import type { ChatImage } from "@/lib/providers/types";
+
+type ChatTool = "image" | "web" | "code" | "research" | "think";
+
+const TOOL_INSTRUCTIONS: Record<ChatTool, string> = {
+  image: "The user selected image creation. Produce a precise image-generation brief or image-oriented response.",
+  web: "The user selected web search. Clearly separate recalled knowledge from facts that require a live web source; never invent browsing results.",
+  code: "The user selected writing/code. Give implementation-ready, technically precise output.",
+  research: "The user selected deep research. Analyze methodically, compare alternatives, and state uncertainties.",
+  think: "The user selected extended thinking. Check assumptions carefully before answering.",
+};
 
 export async function POST(req: Request): Promise<Response> {
   const session = await auth.api.getSession({ headers: req.headers });
   if (!session) return Response.json({ error: "unauthorized" }, { status: 401 });
 
-  const { projectId, message, allowCrossProject } = (await req.json()) as {
+  const { projectId, message, allowCrossProject, tool, image } = (await req.json()) as {
     projectId?: string;
     message: string;
     allowCrossProject?: boolean;
+    tool?: ChatTool | null;
+    image?: ChatImage | null;
   };
-  if (typeof message !== "string" || !message.trim()) {
+  if ((typeof message !== "string" || !message.trim()) && !image) {
     return Response.json({ error: "missing_message" }, { status: 400 });
   }
+  if (tool && !Object.hasOwn(TOOL_INSTRUCTIONS, tool)) {
+    return Response.json({ error: "unknown_tool" }, { status: 400 });
+  }
+  if (image && (!image.dataUrl?.startsWith("data:image/") || image.dataUrl.length > 7_000_000)) {
+    return Response.json({ error: "invalid_or_oversized_image" }, { status: 400 });
+  }
+
+  const userMessage = message.trim() || "Help me understand this attached image.";
 
   const centralAssistant = !projectId;
   const pack = await recall({
-    query: message.trim(),
+    query: userMessage,
     projectId,
     // The main assistant is the authenticated, cross-project surface.
     allowCrossProject: centralAssistant || !!allowCrossProject,
@@ -34,6 +55,7 @@ export async function POST(req: Request): Promise<Response> {
     centralAssistant
       ? "Help the user directly. Use the available cross-project memory when relevant; a linked project is not required."
       : "Help the user with the selected project and use its memory when relevant.",
+    tool ? TOOL_INSTRUCTIONS[tool] : "",
     "",
     pack.toPromptString(),
   ].join("\n");
@@ -42,7 +64,7 @@ export async function POST(req: Request): Promise<Response> {
   const stream = new ReadableStream<Uint8Array>({
     async start(controller) {
       try {
-        for await (const delta of provider.chat({ system, messages: [{ role: "user", content: message.trim() }] })) {
+        for await (const delta of provider.chat({ system, messages: [{ role: "user", content: userMessage, image: image ?? undefined }] })) {
           controller.enqueue(encoder.encode(delta));
         }
       } catch (e) {

package/apps/web/app/api/graph/route.ts

@@ -8,25 +8,30 @@ import { listProjects } from "@/lib/link/store";
 import { listSemanticNotes } from "@/lib/brain/consolidate";
 import { listSkills } from "@/lib/brain/skills";
 
-export type GraphNode = { id: string; label: string; type: "project" | "pattern" | "skill" };
+export type GraphNode = { id: string; label: string; type: "main" | "project" | "pattern" | "skill" };
 export type GraphEdge = { from: string; to: string };
 
 export async function GET(req: Request): Promise<Response> {
   const session = await auth.api.getSession({ headers: req.headers });
   if (!session) return Response.json({ error: "unauthorized" }, { status: 401 });
 
-  const nodes: GraphNode[] = [];
+  const nodes: GraphNode[] = [{ id: "main-brain", label: "Main Brain", type: "main" }];
   const edges: GraphEdge[] = [];
 
-  for (const p of listProjects()) nodes.push({ id: `project:${p.id}`, label: p.name, type: "project" });
+  for (const p of listProjects()) {
+    nodes.push({ id: `project:${p.id}`, label: p.name, type: "project" });
+    edges.push({ from: "main-brain", to: `project:${p.id}` });
+  }
 
   for (const n of listSemanticNotes()) {
     nodes.push({ id: `pattern:${n.id}`, label: n.title, type: "pattern" });
+    edges.push({ from: "main-brain", to: `pattern:${n.id}` });
     for (const pid of n.sourceProjects ?? []) edges.push({ from: `pattern:${n.id}`, to: `project:${pid}` });
   }
 
   for (const s of listSkills()) {
     nodes.push({ id: `skill:${s.id}`, label: s.name, type: "skill" });
+    edges.push({ from: "main-brain", to: `skill:${s.id}` });
     for (const pid of s.sourceProjects ?? []) edges.push({ from: `skill:${s.id}`, to: `project:${pid}` });
   }
 

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

@@ -3,6 +3,7 @@
 import type { CSSProperties } from "react";
 import { useEffect, useRef, useState } from "react";
 import { useMemoryCore } from "@/components/AppShell";
+import { PromptBox, type PromptSubmit } from "@/components/ui/chatgpt-prompt-input";
 
 type Turn = { role: "user" | "assistant"; content: string };
 type SavedChat = { id: string; title: string; turns: Turn[]; updatedAt: number };
@@ -19,6 +20,7 @@ export default function AssistantPage() {
   const [history, setHistory] = useState<SavedChat[]>([]);
   const [historyReady, setHistoryReady] = useState(false);
   const [activeChatId, setActiveChatId] = useState("");
+  const [historyCollapsed, setHistoryCollapsed] = useState(false);
   const endRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -31,6 +33,7 @@ export default function AssistantPage() {
     try {
       const stored = JSON.parse(window.localStorage.getItem(CHAT_HISTORY_KEY) ?? "[]");
       if (Array.isArray(stored)) setHistory(stored.slice(0, 30));
+      setHistoryCollapsed(window.localStorage.getItem("mop-agent-history-collapsed") === "1");
     } catch {
       window.localStorage.removeItem(CHAT_HISTORY_KEY);
     } finally {
@@ -78,13 +81,24 @@ export default function AssistantPage() {
     if (activeChatId === id) startNewChat();
   }
 
-  async function send(prefill?: string) {
-    const message = (prefill ?? input).trim();
-    if (!message || busy) return;
+  function toggleHistory() {
+    setHistoryCollapsed((collapsed) => {
+      window.localStorage.setItem("mop-agent-history-collapsed", collapsed ? "0" : "1");
+      return !collapsed;
+    });
+  }
+
+  async function send(request?: string | PromptSubmit) {
+    const payload: PromptSubmit = typeof request === "string"
+      ? { message: request, tool: null, image: null }
+      : request ?? { message: input, tool: null, image: null };
+    const message = payload.message.trim();
+    if ((!message && !payload.image) || busy) return false;
+    const visibleMessage = [message, payload.image ? `📎 ${payload.image.name}` : ""].filter(Boolean).join("\n");
     if (!activeChatId) setActiveChatId(`chat-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`);
     setInput("");
     setBusy(true);
-    setTurns((current) => [...current, { role: "user", content: message }, { role: "assistant", content: "" }]);
+    setTurns((current) => [...current, { role: "user", content: visibleMessage }, { role: "assistant", content: "" }]);
 
     const res = await fetch("/api/chat", {
       method: "POST",
@@ -92,6 +106,8 @@ export default function AssistantPage() {
       body: JSON.stringify({
         message,
         allowCrossProject: true,
+        tool: payload.tool,
+        image: payload.image,
       }),
     });
 
@@ -103,7 +119,7 @@ export default function AssistantPage() {
         return next;
       });
       setBusy(false);
-      return;
+      return true;
     }
 
     const reader = res.body.getReader();
@@ -121,10 +137,11 @@ export default function AssistantPage() {
       endRef.current?.scrollIntoView({ behavior: "smooth" });
     }
     setBusy(false);
+    return true;
   }
 
   return (
-    <section className="mop-assistant-page">
+    <section className={`mop-assistant-page${historyCollapsed ? " is-history-collapsed" : ""}`}>
       <div className="mop-assistant-workspace">
         <div className="mop-assistant-conversation">
           {turns.length === 0 ? (
@@ -165,17 +182,7 @@ export default function AssistantPage() {
         </div>
 
         <div className="mop-assistant-composer-wrap">
-          <div style={composer}>
-            <textarea
-              value={input}
-              onChange={(e) => setInput(e.target.value)}
-              onKeyDown={(e) => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); send(); } }}
-              placeholder="Message MOP-AGENT…"
-              rows={1}
-              style={textarea}
-            />
-            <button onClick={() => send()} disabled={busy || !input.trim()} style={{ ...sendButton, opacity: busy || !input.trim() ? .45 : 1 }}>↑</button>
-          </div>
+          <PromptBox value={input} onValueChange={setInput} onSubmit={send} busy={busy} />
           <div style={{ textAlign: "center", color: "rgba(45,74,62,.62)", fontSize: 11, marginTop: 8 }}>
             {providerUsed ? `Answered by ${providerUsed} · ` : ""}Cross-project memory
           </div>
@@ -184,11 +191,20 @@ export default function AssistantPage() {
 
       <aside className="mop-chat-history" aria-label="Chat history">
         <div className="mop-chat-history-header">
-          <div>
-            <span>MEMORY LOG</span>
-            <strong>Chat history</strong>
+          <strong>Chat history</strong>
+          <div className="mop-chat-history-actions">
+            <button
+              className="mop-chat-history-collapse"
+              type="button"
+              onClick={toggleHistory}
+              aria-label={historyCollapsed ? "Expand chat history" : "Collapse chat history"}
+              aria-expanded={!historyCollapsed}
+              title={historyCollapsed ? "Expand chat history" : "Collapse chat history"}
+            >
+              {historyCollapsed ? "‹" : "›"}
+            </button>
+            <button className="mop-chat-history-new" type="button" onClick={startNewChat} disabled={busy} title="Start a new chat">＋</button>
           </div>
-          <button type="button" onClick={startNewChat} disabled={busy} title="Start a new chat">＋</button>
         </div>
         <div className="mop-chat-history-list">
           {history.length === 0 ? (
@@ -219,6 +235,3 @@ const promptGrid: CSSProperties = { width: "min(100%, 650px)", display: "grid",
 const promptCard: CSSProperties = { display: "flex", justifyContent: "space-between", padding: "14px 15px", border: "1px solid rgba(45,74,62,.38)", borderBottomWidth: 3, background: "#fffdf2", color: "#2d4a3e", cursor: "pointer", textAlign: "left" };
 const botAvatar: CSSProperties = { width: 32, height: 32, display: "grid", placeItems: "center", background: "#742220", color: "#fef9e1" };
 const userAvatar: CSSProperties = { ...botAvatar, background: "#2d4a3e", fontSize: 12 };
-const composer: CSSProperties = { width: "min(calc(100% - 32px), 800px)", margin: "0 auto", display: "flex", alignItems: "flex-end", gap: 10, padding: "10px 10px 10px 15px", border: "1px solid rgba(45,74,62,.48)", borderBottomWidth: 4, background: "#fffdf2", boxShadow: "4px 4px 0 rgba(45,74,62,.13)" };
-const textarea: CSSProperties = { flex: 1, resize: "none", border: 0, outline: 0, boxShadow: "none", background: "transparent", color: "#2d4a3e", font: "inherit", lineHeight: 1.55, padding: "5px 0" };
-const sendButton: CSSProperties = { width: 34, height: 34, border: 0, background: "#742220", color: "#fef9e1", fontSize: 18, cursor: "pointer" };

package/apps/web/app/brain/graph/page.tsx

@@ -1,54 +1,170 @@
 "use client";
-/** Brain knowledge graph (Fasa 5) — projects ⟷ patterns ⟷ skills, via React Flow. */
+
 import { useEffect, useMemo, useState } from "react";
-import { ReactFlow, Background, Controls, type Edge, type Node } from "reactflow";
+import {
+  Background,
+  Controls,
+  Handle,
+  MiniMap,
+  Position,
+  ReactFlow,
+  type Edge,
+  type Node,
+  type NodeMouseHandler,
+  type NodeProps,
+} from "reactflow";
 import "reactflow/dist/style.css";
 
-type GNode = { id: string; label: string; type: "project" | "pattern" | "skill" };
+type MemoryNodeType = "main" | "project" | "pattern" | "skill";
+type GNode = { id: string; label: string; type: MemoryNodeType };
 type GEdge = { from: string; to: string };
+type MemoryNodeData = { label: string; memoryType: MemoryNodeType };
+
+const COLORS: Record<MemoryNodeType, string> = {
+  main: "#e4b83f",
+  project: "#d74c45",
+  pattern: "#4fa676",
+  skill: "#4d91c9",
+};
 
-const COLOR = { project: "#742220", pattern: "#2d4a3e", skill: "#9a6738" };
+const nodeTypes = { memory: MemoryGraphNode };
 
 export default function GraphPage() {
   const [data, setData] = useState<{ nodes: GNode[]; edges: GEdge[] }>({ nodes: [], edges: [] });
+  const [query, setQuery] = useState("");
+  const [filters, setFilters] = useState<Record<MemoryNodeType, boolean>>({ main: true, project: true, pattern: true, skill: true });
+  const [selected, setSelected] = useState<GNode | null>(null);
+  const [labelsVisible, setLabelsVisible] = useState(true);
 
   useEffect(() => {
-    fetch("/api/graph").then((r) => r.json()).then((d) => setData({ nodes: d.nodes ?? [], edges: d.edges ?? [] })).catch(() => {});
+    fetch("/api/graph")
+      .then((response) => response.json())
+      .then((result) => setData({ nodes: result.nodes ?? [], edges: result.edges ?? [] }))
+      .catch(() => {});
   }, []);
 
-  const nodes: Node[] = useMemo(() => {
-    const cols: Record<GNode["type"], number> = { project: 0, pattern: 1, skill: 2 };
-    const counts: Record<string, number> = {};
-    return data.nodes.map((n) => {
-      const col = cols[n.type];
-      const row = (counts[n.type] = (counts[n.type] ?? 0) + 1);
+  const visibleData = useMemo(() => {
+    const normalizedQuery = query.trim().toLowerCase();
+    const directMatches = new Set(
+      data.nodes
+        .filter((node) => filters[node.type] && (!normalizedQuery || node.label.toLowerCase().includes(normalizedQuery)))
+        .map((node) => node.id),
+    );
+    if (normalizedQuery && directMatches.size) directMatches.add("main-brain");
+    return data.nodes.filter((node) => filters[node.type] && (!normalizedQuery || directMatches.has(node.id)));
+  }, [data.nodes, filters, query]);
+
+  const nodes: Node<MemoryNodeData>[] = useMemo(() => {
+    const grouped = new Map<MemoryNodeType, GNode[]>();
+    for (const type of ["main", "project", "pattern", "skill"] as const) {
+      grouped.set(type, visibleData.filter((node) => node.type === type));
+    }
+    return visibleData.map((node) => {
+      if (node.type === "main") {
+        return { id: node.id, type: "memory", position: { x: 0, y: 0 }, data: { label: node.label, memoryType: node.type } };
+      }
+      const peers = grouped.get(node.type) ?? [];
+      const index = peers.findIndex((peer) => peer.id === node.id);
+      const radius = node.type === "project" ? 250 : node.type === "pattern" ? 430 : 590;
+      const phase = node.type === "project" ? 0 : node.type === "pattern" ? 0.35 : 0.7;
+      const angle = phase + (Math.PI * 2 * Math.max(index, 0)) / Math.max(peers.length, 1);
       return {
-        id: n.id,
-        position: { x: col * 280, y: row * 90 },
-        data: { label: `${n.type === "project" ? "📦" : n.type === "pattern" ? "🌐" : "🛠"} ${n.label}` },
-        style: { border: `1px solid ${COLOR[n.type]}`, borderRadius: 8, background: "#fffdf2", color: "#2d4a3e", fontSize: 12, width: 240 },
+        id: node.id,
+        type: "memory",
+        position: { x: Math.cos(angle) * radius, y: Math.sin(angle) * radius },
+        data: { label: node.label, memoryType: node.type },
       };
     });
-  }, [data.nodes]);
+  }, [visibleData]);
 
+  const nodeIds = useMemo(() => new Set(nodes.map((node) => node.id)), [nodes]);
   const edges: Edge[] = useMemo(
-    () => data.edges.map((e, i) => ({ id: `e${i}`, source: e.from, target: e.to, style: { stroke: "#2a3a4f" } })),
-    [data.edges],
+    () => data.edges
+      .filter((edge) => nodeIds.has(edge.from) && nodeIds.has(edge.to))
+      .map((edge, index) => ({
+        id: `edge-${index}-${edge.from}-${edge.to}`,
+        source: edge.from,
+        target: edge.to,
+        style: { stroke: "rgba(215, 210, 190, .24)", strokeWidth: edge.from === "main-brain" ? 1.25 : .75 },
+      })),
+    [data.edges, nodeIds],
   );
 
+  const onNodeClick: NodeMouseHandler = (_, node) => {
+    setSelected(data.nodes.find((item) => item.id === node.id) ?? null);
+  };
+
   return (
-    <main style={{ height: "calc(100vh - 70px)", display: "flex", flexDirection: "column" }}>
-      <div style={{ padding: "12px 16px" }}>
-        <a href="/brain" style={{ color: "#742220" }}>← Brain</a>{" "}
-        <strong>Knowledge Graph</strong>{" "}
-        <span style={{ opacity: 0.6, fontSize: 13 }}>{data.nodes.length} nodes · {data.edges.length} edges</span>
-      </div>
-      <div style={{ flex: 1 }}>
-        <ReactFlow nodes={nodes} edges={edges} fitView>
-          <Background color="#b8b49f" />
-          <Controls />
+    <main className={`mop-graph-view${labelsVisible ? " show-labels" : " hide-labels"}`}>
+      <header className="mop-graph-toolbar">
+        <div className="mop-graph-toolbar-left">
+          <a href="/brain" aria-label="Back to Brain">←</a>
+          <strong>Graph view</strong>
+          <span>{nodes.length} nodes · {edges.length} links</span>
+        </div>
+        <label className="mop-graph-search">
+          <span>⌕</span>
+          <input value={query} onChange={(event) => setQuery(event.target.value)} placeholder="Search memory graph" />
+        </label>
+        <button type="button" onClick={() => setLabelsVisible((visible) => !visible)}>{labelsVisible ? "Hide labels" : "Show labels"}</button>
+      </header>
+
+      <div className="mop-graph-canvas">
+        <ReactFlow
+          nodes={nodes}
+          edges={edges}
+          nodeTypes={nodeTypes}
+          onNodeClick={onNodeClick}
+          fitView
+          fitViewOptions={{ padding: .22 }}
+          minZoom={0.08}
+          maxZoom={2.4}
+          nodesConnectable={false}
+          proOptions={{ hideAttribution: true }}
+        >
+          <Background color="rgba(255,255,255,.08)" gap={28} size={1} />
+          <MiniMap
+            pannable
+            zoomable
+            nodeColor={(node) => COLORS[(node.data as MemoryNodeData).memoryType]}
+            maskColor="rgba(14,15,15,.72)"
+            style={{ background: "#171918", border: "1px solid rgba(255,255,255,.12)" }}
+          />
+          <Controls showInteractive={false} />
         </ReactFlow>
+
+        <aside className="mop-graph-filters">
+          <strong>Graph filters</strong>
+          {(["main", "project", "pattern", "skill"] as const).map((type) => (
+            <label key={type}>
+              <input type="checkbox" checked={filters[type]} onChange={() => setFilters((current) => ({ ...current, [type]: !current[type] }))} />
+              <span style={{ background: COLORS[type] }} />
+              {type === "main" ? "Main Brain" : `${type.charAt(0).toUpperCase()}${type.slice(1)}s`}
+            </label>
+          ))}
+        </aside>
+
+        {selected && (
+          <aside className="mop-graph-inspector">
+            <button type="button" aria-label="Close inspector" onClick={() => setSelected(null)}>×</button>
+            <span style={{ background: COLORS[selected.type] }} />
+            <small>{selected.type === "main" ? "CENTRAL MEMORY" : selected.type.toUpperCase()}</small>
+            <strong>{selected.label}</strong>
+            <p>{selected.type === "main" ? "Shared semantic memory and the root of every linked project." : "Connected knowledge within MOP MemoryCore."}</p>
+          </aside>
+        )}
       </div>
     </main>
   );
 }
+
+function MemoryGraphNode({ data, selected }: NodeProps<MemoryNodeData>) {
+  return (
+    <div className={`mop-memory-graph-node is-${data.memoryType}${selected ? " is-selected" : ""}`}>
+      <Handle type="target" position={Position.Top} className="mop-graph-handle" />
+      <span className="mop-memory-node-dot" style={{ background: COLORS[data.memoryType] }} />
+      <span className="mop-memory-node-label">{data.label}</span>
+      <Handle type="source" position={Position.Bottom} className="mop-graph-handle" />
+    </div>
+  );
+}