-
Something went wrong
+
+ Something went wrong
+
- An unexpected error occurred while rendering this page. You can try again or refresh the browser.
+ An unexpected error occurred while rendering this page. You can
+ try again or refresh the browser.
{this.state.error && (
@@ -63,9 +103,23 @@ class ErrorBoundary extends Component {
onClick={this.handleRetry}
className="inline-flex items-center gap-2 px-5 py-2.5 rounded-lg text-sm font-medium text-white bg-amber-600 hover:bg-amber-700 dark:bg-amber-500 dark:hover:bg-amber-600 transition-colors shadow-sm"
>
-
-
+
Retry
@@ -77,298 +131,18 @@ class ErrorBoundary extends Component {
}
}
-import ChannelsPage from "./pages/ChannelsPage";
-import SkillsPage from "./pages/SkillsPage";
-import SecurityPage from "./pages/SecurityPage";
-import AutomationPage from "./pages/AutomationPage";
-import NotebookPage from "./pages/NotebookPage";
-import ScannerPage from "./pages/ScannerPage";
-import MajlisPage from "./pages/MajlisPage";
-import PluginsPage from "./pages/PluginsPage";
-import ProvidersPage from "./pages/ProvidersPage";
-import DeveloperPage from "./pages/DeveloperPage";
-import WelcomePage from "./pages/WelcomePage";
-import SettingsPage from "./pages/SettingsPage";
-
-// ===== ICONS (inline SVG) =====
-const Icons = {
- Agent: () => (
-
-
- ),
- Brain: () => (
-
-
- ),
- Terminal: () => (
-
-
- ),
- Memory: () => (
-
-
- ),
- Chat: () => (
-
-
- ),
- Plus: () => (
-
-
- ),
- Send: () => (
-
-
- ),
- Trash: () => (
-
-
- ),
- Globe: () => (
-
-
- ),
- Zap: () => (
-
-
- ),
- Channel: () => (
-
-
- ),
- Skill: () => (
-
-
- ),
- Shield: () => (
-
-
- ),
- Clock: () => (
-
-
- ),
- Notebook: () => (
-
-
- ),
- Plugin: () => (
-
-
- ),
- Sun: () => (
-
-
- ),
- Moon: () => (
-
-
- ),
- Monitor: () => (
-
-
- ),
- Settings: () => (
-
-
- ),
-};
-
-// ===== NAFS LEVELS =====
-const NAFS_LEVELS: Record = {
- 1: { latin: "Ammara", color: "#ef4444", desc: "Raw potential" },
- 2: { latin: "Lawwama", color: "#f97316", desc: "Self-correcting" },
- 3: { latin: "Mulhama", color: "#f59e0b", desc: "Inspired" },
- 4: { latin: "Mutmainna", color: "#84cc16", desc: "Tranquil" },
- 5: { latin: "Radiya", color: "#10b981", desc: "Content" },
- 6: { latin: "Mardiyya", color: "#06b6d4", desc: "Pleasing" },
- 7: { latin: "Kamila", color: "#a78bfa", desc: "Perfected" },
-};
-
-// ===== AGENT CARD =====
-const AgentCard = ({ agent, selected, onClick }: { agent: Agent; selected: boolean; onClick: () => void }) => {
- const nafs = NAFS_LEVELS[agent.nafs_level] || NAFS_LEVELS[1];
-
- const stateColors: Record = {
- resting: "bg-gray-100 dark:bg-zinc-700/30 text-gray-500 dark:text-gray-400",
- thinking: "bg-blue-100 dark:bg-blue-500/15 text-blue-600 dark:text-blue-400",
- acting: "bg-amber-100 dark:bg-amber-500/15 text-amber-600 dark:text-amber-400",
- learning: "bg-emerald-100 dark:bg-emerald-500/15 text-emerald-600 dark:text-emerald-400",
- error: "bg-red-100 dark:bg-red-500/15 text-red-600 dark:text-red-400",
- };
-
- return (
-
-
-
- {agent.name[0]?.toUpperCase() || "A"}
-
-
-
{agent.name}
-
{agent.role}
-
-
- {agent.state}
-
-
-
-
-
- Level {agent.nafs_level}
-
-
-
{nafs.desc}
-
-
-
- {[
- { label: "Tasks", value: agent.total_tasks, color: undefined as boolean | undefined },
- { label: "Success", value: `${(agent.success_rate * 100).toFixed(0)}%`, color: agent.success_rate > 0.7 },
- { label: "Wisdom", value: agent.hikmah_count, color: undefined as boolean | undefined },
- ].map(s => (
-
-
- {s.value}
-
- {s.label}
-
- ))}
-
-
- {(agent.tools || []).length > 0 && (
-
- {(agent.tools || []).slice(0, 4).map(t => (
- {t}
- ))}
- {(agent.tools || []).length > 4 && (
- +{(agent.tools || []).length - 4}
- )}
-
- )}
-
- {icon}
- {label}
-
- );
-}
-
-// ===== CONNECTION BANNER =====
-function ConnectionBanner({ status, attempts }: { status: string; attempts: number }) {
- if (status === "connected") return null;
- if (status === "connecting" || (status === "reconnecting" && attempts < 5)) return null;
-
- return (
-
-
-
-
-
Cannot connect to backend. Make sure the server is running: mizan serve or make dev
-
-
window.location.reload()}
- className="text-xs px-3 py-1 bg-amber-100 dark:bg-amber-500/10 hover:bg-amber-200 dark:hover:bg-amber-500/20 text-amber-800 dark:text-amber-300 rounded transition-colors shrink-0"
- >
- Retry
-
-
$2$1')
- // Bold
- .replace(/\*\*(.+?)\*\*/g, "$1 ")
- // Italic
- .replace(/\*(.+?)\*/g, "$1 ")
- // Headers (only at line start)
- .replace(/^### (.+)$/gm, '$1 ')
- .replace(/^## (.+)$/gm, '$1 ')
- .replace(/^# (.+)$/gm, '$1 ')
- // Line breaks
- .replace(/\n/g, "([]);
const [selectedAgent, setSelectedAgent] = useState(null);
const [messages, setMessages] = useState([]);
@@ -393,31 +173,73 @@ function AppInner() {
{ text: "Connecting to backend...", type: "" },
]);
const [taskInput, setTaskInput] = useState("");
- const [sessionId] = useState(() => `session_${Date.now()}`);
+ const [sessionId, setSessionId] = useState(() => {
+ return localStorage.getItem("mizan_session_id") || `session_${Date.now()}`;
+ });
const [typingIndicator, setTypingIndicator] = useState(false);
const [toolStatus, setToolStatus] = useState("");
const [showCreateAgent, setShowCreateAgent] = useState(false);
const [memories, setMemories] = useState([]);
const [memoryQuery, setMemoryQuery] = useState("");
+ const [memoryTypeFilter, setMemoryTypeFilter] = useState("all");
+ const [showAddMemory, setShowAddMemory] = useState(false);
+ const [newMemory, setNewMemory] = useState({
+ content: "",
+ memory_type: "semantic",
+ importance: 0.7,
+ tags: "",
+ });
+ const [knowledgeUrl, setKnowledgeUrl] = useState("");
+ const [knowledgeLoading, setKnowledgeLoading] = useState(false);
+ const [knowledgeSources, setKnowledgeSources] = useState<
+ { title: string; type: string; chunks: number; last_updated: string }[]
+ >([]);
+ const [knowledgeResult, setKnowledgeResult] = useState(null);
const [status, setStatus] = useState(null);
const [integrations, setIntegrations] = useState([]);
- const [newAgent, setNewAgent] = useState({ name: "", type: "general", model: "claude-opus-4-6" });
+ const [newAgent, setNewAgent] = useState({
+ name: "",
+ type: "general",
+ model: "claude-opus-4-6",
+ system_prompt: "",
+ });
+ const [editingAgent, setEditingAgent] = useState(null);
const [appVersion, setAppVersion] = useState("...");
const [showCommandMenu, setShowCommandMenu] = useState(false);
const [commandMenuIndex, setCommandMenuIndex] = useState(0);
+ const [showAgentPicker, setShowAgentPicker] = useState(false);
+ const [chatModelOverride, setChatModelOverride] = useState("");
+ const [chatSessions, setChatSessions] = useState<
+ {
+ session_id: string;
+ started_at: string;
+ last_message_at: string;
+ message_count: number;
+ first_message?: string;
+ }[]
+ >([]);
+ const [showSessionHistory, setShowSessionHistory] = useState(false);
const CHAT_COMMANDS = [
{ name: "/help", description: "Show available commands" },
{ name: "/status", description: "Show system status" },
{ name: "/new", description: "Start a new chat session" },
{ name: "/reset", description: "Reset agent state" },
- { name: "/model", description: "Switch AI model (e.g. /model claude-sonnet-4-6)" },
+ {
+ name: "/model",
+ description: "Switch AI model (e.g. /model claude-sonnet-4-6)",
+ },
{ name: "/agents", description: "List available agents" },
- { name: "/compact", description: "Summarize older messages to save context" },
+ {
+ name: "/compact",
+ description: "Summarize older messages to save context",
+ },
];
- const filteredCommands = CHAT_COMMANDS.filter(cmd =>
- input.startsWith("/") && cmd.name.startsWith(input.split(" ")[0].toLowerCase())
+ const filteredCommands = CHAT_COMMANDS.filter(
+ (cmd) =>
+ input.startsWith("/") &&
+ cmd.name.startsWith(input.split(" ")[0].toLowerCase()),
);
const api = useApi();
@@ -426,7 +248,10 @@ function AppInner() {
const clientId = useRef(`client_${Date.now()}`);
const addTerminalLine = useCallback((text: string, type: string = "") => {
- setTerminalLines(prev => [...prev.slice(-100), { text, type: type as TerminalLine["type"], ts: Date.now() }]);
+ setTerminalLines((prev) => [
+ ...prev.slice(-100),
+ { text, type: type as TerminalLine["type"], ts: Date.now() },
+ ]);
}, []);
// Connect WebSocket
@@ -488,88 +313,114 @@ function AppInner() {
};
}, []);
- const handleWsMessage = useCallback((data: Record) => {
- switch (data.type) {
- case "connected":
- addTerminalLine(`${data.message} — ${data.agents} agents online`, "gold");
- loadAgents();
- loadStatus();
- break;
- case "stream":
- case "chat_stream":
- setTypingIndicator(false);
- setStreamingText(prev => prev + (data.chunk as string));
- break;
- case "response":
- setStreamingText("");
- setStreaming(false);
- setTypingIndicator(false);
- setToolStatus("");
- setMessages(prev => [...prev, {
- id: Date.now(),
- role: "assistant" as const,
- content: data.content as string,
- agent: data.agent as string,
- ts: new Date().toLocaleTimeString(),
- }]);
- addTerminalLine(`Response from ${data.agent}`, "info");
- break;
- case "chat_complete":
- setStreamingText("");
- setStreaming(false);
- setTypingIndicator(false);
- setToolStatus("");
- setMessages(prev => [...prev, {
- id: Date.now(),
- role: "assistant" as const,
- content: (data.response as string) || (data.content as string) || "",
- agent: data.agent as string,
- ts: new Date().toLocaleTimeString(),
- }]);
- addTerminalLine(`Response from ${data.agent}`, "info");
- break;
- case "typing":
- setTypingIndicator(true);
- break;
- case "tool_use":
- setToolStatus(`Agent is using ${data.tool_name as string}...`);
- addTerminalLine(`Tool: ${data.tool_name as string}`, "info");
- break;
- case "command_result": {
- setStreaming(false);
- setStreamingText("");
- setTypingIndicator(false);
- const cmdContent = (data.content as string) || (data.result as string) || "done";
- setMessages(prev => [...prev, {
- id: Date.now(),
- role: "system" as const,
- content: cmdContent,
- agent: "system",
- ts: new Date().toLocaleTimeString(),
- }]);
- addTerminalLine(`Command: ${cmdContent.substring(0, 60)}`, "gold");
- break;
+ const handleWsMessage = useCallback(
+ (data: Record) => {
+ switch (data.type) {
+ case "connected":
+ addTerminalLine(
+ `${data.message} — ${data.agents} agents online`,
+ "gold",
+ );
+ loadAgents();
+ loadStatus();
+ break;
+ case "stream":
+ case "chat_stream":
+ setTypingIndicator(false);
+ setStreamingText((prev) => prev + (data.chunk as string));
+ break;
+ case "response":
+ setStreamingText("");
+ setStreaming(false);
+ setTypingIndicator(false);
+ setToolStatus("");
+ setMessages((prev) => [
+ ...prev,
+ {
+ id: Date.now(),
+ role: "assistant" as const,
+ content: data.content as string,
+ agent: data.agent as string,
+ ts: new Date().toLocaleTimeString(),
+ },
+ ]);
+ addTerminalLine(`Response from ${data.agent}`, "info");
+ break;
+ case "chat_complete":
+ setStreamingText("");
+ setStreaming(false);
+ setTypingIndicator(false);
+ setToolStatus("");
+ setMessages((prev) => [
+ ...prev,
+ {
+ id: Date.now(),
+ role: "assistant" as const,
+ content:
+ (data.response as string) || (data.content as string) || "",
+ agent: data.agent as string,
+ ts: new Date().toLocaleTimeString(),
+ cognitive: data.cognitive as CognitiveMetadata | undefined,
+ },
+ ]);
+ addTerminalLine(`Response from ${data.agent}`, "info");
+ break;
+ case "typing":
+ setTypingIndicator(true);
+ break;
+ case "tool_use":
+ setToolStatus(`Agent is using ${data.tool_name as string}...`);
+ addTerminalLine(`Tool: ${data.tool_name as string}`, "info");
+ break;
+ case "command_result": {
+ setStreaming(false);
+ setStreamingText("");
+ setTypingIndicator(false);
+ const cmdContent =
+ (data.content as string) || (data.result as string) || "done";
+ // Handle /new — clear messages and start fresh session
+ if ((data.command as string) === "/new") {
+ startNewSession();
+ } else {
+ setMessages((prev) => [
+ ...prev,
+ {
+ id: Date.now(),
+ role: "system" as const,
+ content: cmdContent,
+ agent: "system",
+ ts: new Date().toLocaleTimeString(),
+ },
+ ]);
+ }
+ addTerminalLine(`Command: ${cmdContent.substring(0, 60)}`, "gold");
+ break;
+ }
+ case "error":
+ setStreaming(false);
+ setStreamingText("");
+ setTypingIndicator(false);
+ setToolStatus("");
+ addTerminalLine(`Error: ${data.message as string}`, "error");
+ break;
+ case "task_stream":
+ addTerminalLine(data.chunk as string, "");
+ break;
+ case "task_done":
+ addTerminalLine("Task completed", "gold");
+ loadAgents();
+ break;
+ case "agent_created":
+ addTerminalLine(
+ `Agent created: ${(data.agent as Record).name}`,
+ "gold",
+ );
+ loadAgents();
+ break;
}
- case "error":
- setStreaming(false);
- setStreamingText("");
- setTypingIndicator(false);
- setToolStatus("");
- addTerminalLine(`Error: ${data.message as string}`, "error");
- break;
- case "task_stream":
- addTerminalLine(data.chunk as string, "");
- break;
- case "task_done":
- addTerminalLine("Task completed", "gold");
- loadAgents();
- break;
- case "agent_created":
- addTerminalLine(`Agent created: ${(data.agent as Record).name}`, "gold");
- loadAgents();
- break;
- }
- }, [addTerminalLine]);
+ },
+ [addTerminalLine],
+ );
const loadAgents = async () => {
try {
@@ -577,10 +428,17 @@ function AppInner() {
const data = await res.json();
setAgents(data.agents || []);
if (!selectedAgent && data.agents?.length > 0) {
- setSelectedAgent(data.agents[0]);
+ const savedAgentId = localStorage.getItem("mizan_selected_agent");
+ const restored = savedAgentId
+ ? data.agents.find((a: Agent) => a.id === savedAgentId)
+ : null;
+ setSelectedAgent(restored || data.agents[0]);
}
} catch (e: unknown) {
- addTerminalLine(`Failed to load agents: ${(e as Error).message}`, "error");
+ addTerminalLine(
+ `Failed to load agents: ${(e as Error).message}`,
+ "error",
+ );
}
};
@@ -589,19 +447,108 @@ function AppInner() {
const res = await fetch(`${config.API_URL}/status`);
const data = await res.json();
setStatus(data);
- } catch { /* ignore */ }
+ } catch {
+ /* ignore */
+ }
};
- const loadMemories = async (query: string = "") => {
+ const loadMemories = async (query: string = "", typeFilter?: string) => {
try {
- const res = await fetch(`${config.API_URL}/memory/query`, {
+ let data;
+ if (query.trim()) {
+ const res = await fetch(`${config.API_URL}/memory/query`, {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify({
+ query,
+ limit: 30,
+ ...(typeFilter && typeFilter !== "all"
+ ? { memory_type: typeFilter }
+ : {}),
+ }),
+ });
+ data = await res.json();
+ } else {
+ const params = new URLSearchParams({ limit: "30" });
+ if (typeFilter && typeFilter !== "all") {
+ params.set("memory_type", typeFilter);
+ }
+ const res = await fetch(
+ `${config.API_URL}/memory/list?${params.toString()}`,
+ );
+ data = await res.json();
+ }
+ setMemories(data.results || []);
+ } catch {
+ /* ignore */
+ }
+ };
+
+ const loadKnowledgeSources = async () => {
+ try {
+ const res = await fetch(`${config.API_URL}/knowledge/sources`);
+ const data = await res.json();
+ setKnowledgeSources(data.sources || []);
+ } catch {
+ /* ignore */
+ }
+ };
+
+ const ingestKnowledge = async () => {
+ if (!knowledgeUrl.trim()) return;
+ setKnowledgeLoading(true);
+ setKnowledgeResult(null);
+ try {
+ const res = await fetch(`${config.API_URL}/knowledge/ingest`, {
method: "POST",
headers: { "Content-Type": "application/json" },
- body: JSON.stringify({ query: query || "all", limit: 20 }),
+ body: JSON.stringify({ source: knowledgeUrl.trim() }),
});
const data = await res.json();
- setMemories(data.results || []);
- } catch { /* ignore */ }
+ if (res.ok) {
+ setKnowledgeResult(
+ `Ingested "${data.title}" — ${data.chunks_stored} chunks stored (${data.char_count?.toLocaleString()} chars)`,
+ );
+ setKnowledgeUrl("");
+ loadKnowledgeSources();
+ } else {
+ setKnowledgeResult(`Error: ${data.detail || "Failed to ingest"}`);
+ }
+ } catch (err) {
+ setKnowledgeResult(
+ `Error: ${err instanceof Error ? err.message : "Network error"}`,
+ );
+ } finally {
+ setKnowledgeLoading(false);
+ }
+ };
+
+ const uploadKnowledgePdf = async (file: File) => {
+ setKnowledgeLoading(true);
+ setKnowledgeResult(null);
+ try {
+ const formData = new FormData();
+ formData.append("file", file);
+ const res = await fetch(`${config.API_URL}/knowledge/upload`, {
+ method: "POST",
+ body: formData,
+ });
+ const data = await res.json();
+ if (res.ok) {
+ setKnowledgeResult(
+ `Uploaded "${data.title}" — ${data.page_count} pages, ${data.chunks_stored} chunks stored`,
+ );
+ loadKnowledgeSources();
+ } else {
+ setKnowledgeResult(`Error: ${data.detail || "Upload failed"}`);
+ }
+ } catch (err) {
+ setKnowledgeResult(
+ `Error: ${err instanceof Error ? err.message : "Network error"}`,
+ );
+ } finally {
+ setKnowledgeLoading(false);
+ }
};
const loadIntegrations = async () => {
@@ -609,15 +556,74 @@ function AppInner() {
const res = await fetch(`${config.API_URL}/integrations`);
const data = await res.json();
setIntegrations(data.integrations || []);
- } catch { /* ignore */ }
+ } catch {
+ /* ignore */
+ }
};
+ const loadChatHistory = useCallback(async (sid: string) => {
+ try {
+ const res = await fetch(`${config.API_URL}/chat/${sid}`);
+ if (!res.ok) return;
+ const data = await res.json();
+ const history = (data.messages || []).map(
+ (
+ m: {
+ id?: number;
+ role: string;
+ content: string;
+ agent_id?: string;
+ created_at?: string;
+ },
+ idx: number,
+ ) => ({
+ id: m.id || idx,
+ role: m.role as "user" | "assistant" | "system",
+ content: m.content,
+ agent: m.agent_id,
+ ts: m.created_at ? new Date(m.created_at).toLocaleTimeString() : "",
+ }),
+ );
+ if (history.length > 0) {
+ setMessages(history);
+ }
+ } catch {
+ // No history available — start fresh
+ }
+ }, []);
+
+ const loadChatSessions = useCallback(async () => {
+ try {
+ const res = await fetch(`${config.API_URL}/chat/sessions/list`);
+ if (!res.ok) return;
+ const data = await res.json();
+ setChatSessions(data.sessions || []);
+ } catch {
+ // ignore
+ }
+ }, []);
+
+ const switchSession = useCallback(
+ async (sid: string) => {
+ setSessionId(sid);
+ setMessages([]);
+ setShowSessionHistory(false);
+ await loadChatHistory(sid);
+ },
+ [loadChatHistory],
+ );
+
useEffect(() => {
loadAgents();
+ loadChatHistory(sessionId);
+ loadChatSessions();
// Fetch version from backend
- fetch(`${config.API_URL}/version`).then(r => r.json()).then(data => {
- if (data.version) setAppVersion(data.version);
- }).catch(() => {});
+ fetch(`${config.API_URL}/version`)
+ .then((r) => r.json())
+ .then((data) => {
+ if (data.version) setAppVersion(data.version);
+ })
+ .catch(() => {});
const interval = setInterval(() => {
loadAgents();
loadStatus();
@@ -625,8 +631,21 @@ function AppInner() {
return () => clearInterval(interval);
}, []);
+ // Persist sessionId to localStorage
useEffect(() => {
- if (activeTab === "memory") loadMemories(memoryQuery);
+ localStorage.setItem("mizan_session_id", sessionId);
+ }, [sessionId]);
+
+ // Persist selected agent ID
+ useEffect(() => {
+ if (selectedAgent) {
+ localStorage.setItem("mizan_selected_agent", selectedAgent.id);
+ }
+ }, [selectedAgent]);
+
+ useEffect(() => {
+ if (activeTab === "memory") loadMemories(memoryQuery, memoryTypeFilter);
+ if (activeTab === "knowledge") loadKnowledgeSources();
if (activeTab === "integrations") loadIntegrations();
}, [activeTab]);
@@ -634,11 +653,24 @@ function AppInner() {
messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
}, [messages, streamingText]);
+ const startNewSession = useCallback(() => {
+ const newId = `session_${Date.now()}`;
+ setSessionId(newId);
+ setMessages([]);
+ setStreamingText("");
+ addTerminalLine("New chat session started", "gold");
+ }, []);
+
const sendMessage = async () => {
if (!input.trim() || streaming) return;
const content = input;
- const userMsg: ChatMessage = { id: Date.now(), role: "user", content, ts: new Date().toLocaleTimeString() };
- setMessages(prev => [...prev, userMsg]);
+ const userMsg: ChatMessage = {
+ id: Date.now(),
+ role: "user",
+ content,
+ ts: new Date().toLocaleTimeString(),
+ };
+ setMessages((prev) => [...prev, userMsg]);
setStreaming(true);
setStreamingText("");
setTypingIndicator(true);
@@ -656,19 +688,22 @@ function AppInner() {
session_id: sessionId,
content,
agent_id: selectedAgent?.id,
+ ...(chatModelOverride ? { model_override: chatModelOverride } : {}),
}),
});
if (!res.ok) throw new Error(`HTTP ${res.status}`);
- // Response processing happens via chat_stream/chat_complete WebSocket events
+ if (chatModelOverride) setChatModelOverride("");
} catch {
// Fallback: send via WebSocket directly
if (ws) {
- ws.send(JSON.stringify({
- type: "chat",
- session_id: sessionId,
- content,
- agent_id: selectedAgent?.id,
- }));
+ ws.send(
+ JSON.stringify({
+ type: "chat",
+ session_id: sessionId,
+ content,
+ agent_id: selectedAgent?.id,
+ }),
+ );
} else {
setStreaming(false);
setTypingIndicator(false);
@@ -680,31 +715,86 @@ function AppInner() {
const runTask = () => {
if (!taskInput.trim() || !ws) return;
addTerminalLine(`$ ${taskInput}`, "gold");
- ws.send(JSON.stringify({
- type: "task",
- task: taskInput,
- agent_id: selectedAgent?.id,
- }));
+ ws.send(
+ JSON.stringify({
+ type: "task",
+ task: taskInput,
+ agent_id: selectedAgent?.id,
+ }),
+ );
setTaskInput("");
};
const createAgent = async () => {
try {
- const res = await fetch(`${config.API_URL}/agents`, {
- method: "POST",
- headers: { "Content-Type": "application/json" },
- body: JSON.stringify(newAgent),
+ const payload = {
+ ...newAgent,
+ system_prompt: newAgent.system_prompt || undefined,
+ };
+ await api.post("/agents", payload);
+ setShowCreateAgent(false);
+ setNewAgent({
+ name: "",
+ type: "general",
+ model: "claude-opus-4-6",
+ system_prompt: "",
});
- await res.json();
+ loadAgents();
+ addToast({
+ type: "success",
+ title: "Agent created",
+ description: `${newAgent.name} is ready`,
+ });
+ } catch (e: unknown) {
+ addToast({
+ type: "error",
+ title: "Failed to create agent",
+ description: (e as Error).message,
+ });
+ }
+ };
+
+ const updateAgent = async () => {
+ if (!editingAgent) return;
+ try {
+ const payload: Record = {};
+ if (newAgent.name !== editingAgent.name) payload.name = newAgent.name;
+ if (newAgent.model !== (editingAgent.model || ""))
+ payload.model = newAgent.model;
+ if (newAgent.system_prompt !== (editingAgent.system_prompt || ""))
+ payload.system_prompt = newAgent.system_prompt;
+
+ await api.put(`/agents/${editingAgent.id}`, payload);
setShowCreateAgent(false);
- setNewAgent({ name: "", type: "general", model: "claude-opus-4-6" });
+ setEditingAgent(null);
+ setNewAgent({
+ name: "",
+ type: "general",
+ model: "claude-opus-4-6",
+ system_prompt: "",
+ });
loadAgents();
- addToast({ type: "success", title: "Agent created", description: `${newAgent.name} is ready` });
+ addToast({ type: "success", title: "Agent updated" });
} catch (e: unknown) {
- addToast({ type: "error", title: "Failed to create agent", description: (e as Error).message });
+ addToast({
+ type: "error",
+ title: "Failed to update agent",
+ description: (e as Error).message,
+ });
}
};
+ const openEditAgent = (agent: Agent) => {
+ setEditingAgent(agent);
+ setNewAgent({
+ name: agent.name,
+ type: agent.role,
+ model: agent.model || "claude-opus-4-6",
+ system_prompt: agent.system_prompt || "",
+ });
+ setShowCreateAgent(true);
+ };
+
const deleteAgent = async (agentId: string) => {
if (!confirm("Delete this agent?")) return;
try {
@@ -712,7 +802,9 @@ function AppInner() {
if (selectedAgent?.id === agentId) setSelectedAgent(null);
loadAgents();
addToast({ type: "success", title: "Agent deleted" });
- } catch { /* ignore */ }
+ } catch {
+ /* ignore */
+ }
};
// ===== WELCOME PAGE =====
@@ -731,79 +823,181 @@ function AppInner() {
{
label: "Main",
items: [
- { id: "chat", label: "Chat", desc: "Talk to your AI", icon:
-
+
+
Agents
-
Your AI team — create and manage intelligent agents
+
+ Your AI team — create and manage intelligent agents
+
-
setShowCreateAgent(true)}>
+ {
+ setEditingAgent(null);
+ setNewAgent({
+ name: "",
+ type: "general",
+ model: "claude-opus-4-6",
+ system_prompt: "",
+ });
+ setShowCreateAgent(true);
+ }}
+ >
-
-
- {agents.map(agent => (
+
+
+ {agents.map((agent) => (
setSelectedAgent(agent)}
/>
- { e.stopPropagation(); deleteAgent(agent.id); }}
- title="Delete agent"
- >
-
+
+ {
+ e.stopPropagation();
+ openEditAgent(agent);
+ }}
+ title="Edit agent"
+ >
+
+ {
+ e.stopPropagation();
+ deleteAgent(agent.id);
+ }}
+ title="Delete agent"
+ >
+
+
))}
@@ -811,7 +1005,10 @@ function AppInner() {
No agents yet
-
Create your first agent to get started, or make sure the backend is running.
+
+ Create your first agent to get started, or make sure the
+ backend is running.
+
)}
@@ -820,54 +1017,282 @@ function AppInner() {
case "chat":
return (
-
-
+
+
-
Chat
-
{
- const agent = agents.find(a => a.id === e.target.value);
- setSelectedAgent(agent || null);
- }}
- >
- Select Agent
- {agents.map(a => (
- {a.name} ({a.role})
- ))}
-
- {selectedAgent && (
-
- Level {selectedAgent.nafs_level} — {NAFS_LEVELS[selectedAgent.nafs_level]?.latin}
-
- )}
+
+ Chat
+
+
+ {/* Agent picker pill */}
+
+
setShowAgentPicker(!showAgentPicker)}
+ >
+
+ {selectedAgent?.name?.[0]?.toUpperCase() || "?"}
+
+
+ {selectedAgent?.name || "Select Agent"}
+
+
+ {selectedAgent?.role || ""}
+
+
+
+
+
+ {/* Agent picker dropdown */}
+ {showAgentPicker && (
+
+ {agents.map((agent) => {
+ const roleLabels: Record
= {
+ general: "General Purpose",
+ hafiz: "General Purpose",
+ wakil: "General Purpose",
+ browser: "Web Browsing",
+ mubashir: "Web Browsing",
+ research: "Deep Research",
+ mundhir: "Deep Research",
+ code: "Code Generation",
+ katib: "Code Generation",
+ communication: "Communication",
+ rasul: "Communication",
+ };
+ return (
+ {
+ setSelectedAgent(agent);
+ setShowAgentPicker(false);
+ }}
+ >
+
+ {agent.name[0]?.toUpperCase()}
+
+
+
+ {agent.name}
+
+
+ {roleLabels[agent.role] || agent.role}
+
+
+ ACTIVE
+
+ )}
+
+ );
+ })}
+
+ )}
+
+
+
+ {selectedAgent && (
+
+ Level {selectedAgent.nafs_level} —{" "}
+ {NAFS_LEVELS[selectedAgent.nafs_level]?.latin}
+
+ )}
+
+ {/* Session history dropdown */}
+
+
{
+ setShowSessionHistory(!showSessionHistory);
+ if (!showSessionHistory) loadChatSessions();
+ }}
+ title="Chat history"
+ >
+
+
+
+ {showSessionHistory && (
+
+
+ Recent Sessions
+
+
+ {chatSessions.length === 0 && (
+
+ No previous sessions
+
+ )}
+ {chatSessions.map((s) => (
+
switchSession(s.session_id)}
+ >
+
+
+ {s.first_message ||
+ s.session_id.slice(0, 24) + "..."}
+
+
+ {s.message_count} msgs
+ {s.last_message_at &&
+ ` · ${new Date(s.last_message_at).toLocaleDateString()}`}
+
+
+ CURRENT
+
+ )}
+
+ ))}
+
+
+ )}
+
+
+ {/* New chat button */}
+
+
+
+ New
+
+
{messages.length === 0 && !streaming && (
-
-
-
Start a conversation
-
Send a message below. Your AI is ready to help with anything.
+
+
+
+ ميزان
+
+
+ How can I help?
+
+
+ Start a conversation, ask a question, or try one of these
+ suggestions.
+
+
+
+ {[
+ {
+ label: "Write code",
+ desc: "Generate, debug, or refactor",
+ prompt: "Help me write a Python script that ",
+ },
+ {
+ label: "Analyze data",
+ desc: "Explore patterns and insights",
+ prompt: "Analyze this data and help me understand ",
+ },
+ {
+ label: "Research topic",
+ desc: "Deep dive into any subject",
+ prompt: "Research and summarize the key points about ",
+ },
+ {
+ label: "Brainstorm ideas",
+ desc: "Creative thinking together",
+ prompt: "Help me brainstorm ideas for ",
+ },
+ ].map((action) => (
+
{
+ setInput(action.prompt);
+ }}
+ >
+
+ {action.label}
+
+
+ {action.desc}
+
+
+ ))}
+
)}
- {messages.map(msg => (
-
+ {messages.map((msg) => (
+
{msg.role === "system" ? (
-
-
-
+
System
@@ -881,26 +1306,34 @@ function AppInner() {
) : (
<>
-
- {msg.role === "user" ? "You" : (msg.agent?.[0] || "AI")}
+
+ {msg.role === "user" ? "You" : msg.agent?.[0] || "AI"}
-
+
{msg.role === "assistant" ? (
-
+
+
) : (
-
+
{msg.content}
)}
- {msg.role === "assistant" ? msg.agent : "You"} · {msg.ts}
+ {msg.role === "assistant" ? msg.agent : "You"}{" "}
+ · {msg.ts}
@@ -917,9 +1350,18 @@ function AppInner() {
@@ -928,10 +1370,21 @@ function AppInner() {
{/* Tool status indicator */}
{streaming && toolStatus && (
-
-
-
- {toolStatus}
+
)}
@@ -944,17 +1397,17 @@ function AppInner() {
)}
-
-
+
{/* Command autocomplete dropdown */}
{showCommandMenu && filteredCommands.length > 0 && (
- {cmd.name}
- {cmd.description}
+
+ {cmd.name}
+
+
+ {cmd.description}
+
))}
@@ -990,7 +1447,7 @@ function AppInner() {
className="input flex-1 resize-none min-h-[38px] max-h-[120px]"
placeholder="Type your message... (/ for commands, Enter to send)"
value={input}
- onChange={e => {
+ onChange={(e) => {
const val = e.target.value;
setInput(val);
if (val.startsWith("/") && !val.includes(" ")) {
@@ -1000,19 +1457,28 @@ function AppInner() {
setShowCommandMenu(false);
}
}}
- onKeyDown={e => {
+ onKeyDown={(e) => {
if (showCommandMenu && filteredCommands.length > 0) {
if (e.key === "ArrowDown") {
e.preventDefault();
- setCommandMenuIndex(prev => (prev + 1) % filteredCommands.length);
+ setCommandMenuIndex(
+ (prev) => (prev + 1) % filteredCommands.length,
+ );
return;
}
if (e.key === "ArrowUp") {
e.preventDefault();
- setCommandMenuIndex(prev => (prev - 1 + filteredCommands.length) % filteredCommands.length);
+ setCommandMenuIndex(
+ (prev) =>
+ (prev - 1 + filteredCommands.length) %
+ filteredCommands.length,
+ );
return;
}
- if (e.key === "Tab" || (e.key === "Enter" && !e.shiftKey)) {
+ if (
+ e.key === "Tab" ||
+ (e.key === "Enter" && !e.shiftKey)
+ ) {
e.preventDefault();
const selected = filteredCommands[commandMenuIndex];
if (selected) {
@@ -1056,17 +1522,21 @@ function AppInner() {
Task Runner
-
Execute tasks through your AI agents
+
+ Execute tasks through your AI agents
+
-
mizan ~ %
+
+ mizan ~ %
+
Agent: {selectedAgent?.name || "None"}
@@ -1074,26 +1544,40 @@ function AppInner() {
{terminalLines.map((line, i) => (
-
- {line.type === "gold" &&
{"> "} }
+
+ {line.type === "gold" && (
+
+ {"> "}
+
+ )}
{line.text}
))}
-
{">"}
+
+ {">"}
+
setTaskInput(e.target.value)}
- onKeyDown={e => e.key === "Enter" && runTask()}
+ onChange={(e) => setTaskInput(e.target.value)}
+ onKeyDown={(e) => e.key === "Enter" && runTask()}
/>
+ {/* Header */}
Memory
-
What your AI remembers from past interactions
+
+ What your AI remembers from past interactions
+
loadMemories(memoryQuery)}>Search
- {
- await fetch(`${config.API_URL}/memory/consolidate`, { method: "POST" });
- addToast({ type: "success", title: "Memory consolidated" });
- loadMemories();
- }}>Consolidate
+ loadMemories(memoryQuery, memoryTypeFilter)}
+ >
+ Search
+
+ {
+ await fetch(`${config.API_URL}/memory/consolidate`, {
+ method: "POST",
+ });
+ addToast({
+ type: "success",
+ title: "Memory consolidated",
+ });
+ loadMemories("", memoryTypeFilter);
+ }}
+ >
+ Consolidate
+
+ setShowAddMemory(!showAddMemory)}
+ >
+
+ {/* Add Memory Form */}
+ {showAddMemory && (
+
+