+
+ {currentPage === "chatbot" && (
{msg.role === "user"
? {msg.content}
- : msg.content
+ : msg.content
?
);
- i++;
- continue;
+ i++; continue;
}
- // Unordered list
if (/^[-*]\s+/.test(line)) {
const items = [];
while (i < lines.length && /^[-*]\s+/.test(lines[i])) {
@@ -75,7 +147,6 @@ function TextBlock({ text }) {
continue;
}
- // Ordered list
if (/^\d+\.\s+/.test(line)) {
const items = [];
while (i < lines.length && /^\d+\.\s+/.test(lines[i])) {
@@ -86,21 +157,16 @@ function TextBlock({ text }) {
continue;
}
- // Horizontal rule
if (/^---+$/.test(line.trim())) {
elements.push(
{blocks.map((block, i) =>
- block.type === "code" ? (
-
);
}
+function CodeBlock({ lang, value, streaming }) {
+ const [copied, setCopied] = useState(false);
+
+ const copy = () => {
+ navigator.clipboard.writeText(value.trimEnd()).then(() => {
+ setCopied(true);
+ setTimeout(() => setCopied(false), 1500);
+ });
+ };
+
+ return (
+
- {block.value.trimEnd()}
-
- ) : (
-
+
+ );
+}
+
function TextBlock({ text }) {
const lines = text.split("\n");
const elements = [];
@@ -50,7 +125,6 @@ function TextBlock({ text }) {
while (i < lines.length) {
const line = lines[i];
- // Heading
const hMatch = line.match(/^(#{1,3})\s+(.+)/);
if (hMatch) {
const level = hMatch[1].length;
@@ -60,11 +134,9 @@ function TextBlock({ text }) {
{inlineMarkdown(hMatch[2])}
+
+ {lang || "code"}
+ {streaming && β}
+
+ {!streaming && (
+
+ )}
+
+
+ {value.trimEnd()}
+
+ ); - i++; - continue; + i++; continue; } - // Empty line β small gap if (line.trim() === "") { elements.push(); - i++; - continue; + i++; continue; } - // Regular paragraph line elements.push(
{inlineMarkdown(line)}
);
i++;
}
@@ -116,7 +182,6 @@ function inlineMarkdown(text) {
while ((m = re.exec(text)) !== null) {
if (m.index > last) parts.push(text.slice(last, m.index));
-
if (m[2] !== undefined) {
parts.push({m[2]});
} else if (m[3] !== undefined) {
diff --git a/interface/web/src/Memory.jsx b/interface/web/src/Memory.jsx
old mode 100644
new mode 100755
index e683684..946da2c
--- a/interface/web/src/Memory.jsx
+++ b/interface/web/src/Memory.jsx
@@ -13,6 +13,28 @@ function groupBySection(items) {
return map;
}
+function indentLevelOf(text) {
+ const m = text.match(/^( *)/);
+ return Math.floor((m ? m[0].length : 0) / 2);
+}
+
+// Collapse a section's items into top-level "groups": each group is a parent
+// (indent 0) plus its consecutive indented children.
+function computeGroups(sectionItems) {
+ const groups = [];
+ const groupIndexById = {};
+ for (const item of sectionItems) {
+ const lvl = indentLevelOf(item.text);
+ if (lvl === 0 || groups.length === 0) {
+ groups.push([item]);
+ } else {
+ groups[groups.length - 1].push(item);
+ }
+ groupIndexById[item.id] = groups.length - 1;
+ }
+ return { groups, groupIndexById };
+}
+
export function Memory() {
const [items, setItems] = useState([]);
const [editing, setEditing] = useState(null); // { id, section, text } or null
@@ -20,6 +42,8 @@ export function Memory() {
const [newSection, setNewSection] = useState("");
const [showNewSection, setShowNewSection] = useState(false);
const [message, setMessage] = useState("");
+ const [draggingId, setDraggingId] = useState(null);
+ const [dragOver, setDragOver] = useState(null); // { id, position: "before"|"after" }
const loadItems = useCallback(async () => {
try {
@@ -36,22 +60,30 @@ export function Memory() {
const flash = (msg) => { setMessage(msg); setTimeout(() => setMessage(""), 3000); };
const saveNew = async (section, text) => {
- if (!text.trim()) return;
- const res = await fetch(`${API_BASE}/memory`, {
- method: "POST",
- headers: { "Content-Type": "application/json" },
- body: JSON.stringify({ section, text: text.trim() }),
- });
- if (res.ok) { loadItems(); setAdding(null); flash("Saved."); }
+ // Split on newlines so a pasted list becomes one memory per line (leading
+ // spaces kept for nesting). Direct write β no LLM curator, saves every line.
+ const lines = text.split("\n").map(l => l.replace(/\s+$/, "")).filter(l => l.trim());
+ if (!lines.length) return;
+ let ok = 0;
+ for (const line of lines) {
+ const res = await fetch(`${API_BASE}/memory`, {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify({ section, text: line }),
+ });
+ if (res.ok) ok++;
+ }
+ if (ok) { loadItems(); setAdding(null); flash(ok === 1 ? "Saved." : `Saved ${ok} items.`); }
else flash("Save failed.");
};
const saveEdit = async (id, section, text) => {
- if (!text.trim()) return;
+ const cleaned = text.replace(/\s+$/, "");
+ if (!cleaned.trim()) return;
const res = await fetch(`${API_BASE}/memory/${id}`, {
method: "PATCH",
headers: { "Content-Type": "application/json" },
- body: JSON.stringify({ section, text: text.trim() }),
+ body: JSON.stringify({ section, text: cleaned }),
});
if (res.ok) { loadItems(); setEditing(null); flash("Updated."); }
else flash("Update failed.");
@@ -64,6 +96,154 @@ export function Memory() {
else flash("Delete failed.");
};
+ const reorderSection = async (section, ids) => {
+ try {
+ const res = await fetch(`${API_BASE}/memory/reorder`, {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify({ section, ids }),
+ });
+ const result = await res.json();
+ if (!res.ok || result.ok === false) {
+ throw new Error("Memory reorder failed");
+ }
+ loadItems();
+ } catch (err) {
+ setMessage(err.message);
+ }
+ };
+
+ const moveItem = (id, direction) => {
+ const item = items.find(i => i.id === id);
+ if (!item) return;
+ const section = item.section || "General";
+ const sectionItems = items.filter(i => (i.section || "General") === section);
+ const { groups, groupIndexById } = computeGroups(sectionItems);
+ const lvl = indentLevelOf(item.text);
+
+ if (lvl === 0) {
+ // Swap whole group with previous/next group
+ const gIdx = groupIndexById[id];
+ const tIdx = direction === "up" ? gIdx - 1 : gIdx + 1;
+ if (tIdx < 0 || tIdx >= groups.length) return;
+ const newGroups = [...groups];
+ [newGroups[gIdx], newGroups[tIdx]] = [newGroups[tIdx], newGroups[gIdx]];
+ reorderSection(section, newGroups.flat().map(i => i.id));
+ } else {
+ // Swap child with previous/next sibling within same group; never past the parent
+ const gIdx = groupIndexById[id];
+ const group = groups[gIdx];
+ const localIdx = group.findIndex(i => i.id === id);
+ const tLocal = direction === "up" ? localIdx - 1 : localIdx + 1;
+ if (tLocal <= 0 || tLocal >= group.length) return; // tLocal === 0 is the parent
+ const newGroup = [...group];
+ [newGroup[localIdx], newGroup[tLocal]] = [newGroup[tLocal], newGroup[localIdx]];
+ const newGroups = [...groups];
+ newGroups[gIdx] = newGroup;
+ reorderSection(section, newGroups.flat().map(i => i.id));
+ }
+ };
+
+ const onItemDragStart = (e, item) => {
+ setDraggingId(item.id);
+ e.dataTransfer.effectAllowed = "move";
+ try { e.dataTransfer.setData("text/plain", item.id); } catch { /* some browsers restrict */ }
+ };
+
+ const onItemDragOver = (e, targetItem, section) => {
+ if (!draggingId || draggingId === targetItem.id) return;
+ const dragged = items.find(i => i.id === draggingId);
+ if (!dragged || (dragged.section || "General") !== section) return;
+
+ const sectionItems = items.filter(i => (i.section || "General") === section);
+ const { groups, groupIndexById } = computeGroups(sectionItems);
+ const draggedLevel = indentLevelOf(dragged.text);
+ const targetGroupIdx = groupIndexById[targetItem.id];
+ const draggedGroupIdx = groupIndexById[dragged.id];
+ const rect = e.currentTarget.getBoundingClientRect();
+ const inUpperHalf = e.clientY < rect.top + rect.height / 2;
+
+ if (draggedLevel === 0) {
+ // Top-level drag: snap to group boundaries; ignore hover over own group
+ if (targetGroupIdx === draggedGroupIdx) {
+ if (dragOver) setDragOver(null);
+ return;
+ }
+ e.preventDefault();
+ e.dataTransfer.dropEffect = "move";
+ const targetGroup = groups[targetGroupIdx];
+ const isTargetParent = targetItem.id === targetGroup[0].id;
+ const position = (isTargetParent && inUpperHalf) ? "before" : "after";
+ if (dragOver?.kind !== "group" || dragOver?.section !== section || dragOver?.groupIdx !== targetGroupIdx || dragOver?.position !== position) {
+ setDragOver({ kind: "group", section, groupIdx: targetGroupIdx, position });
+ }
+ } else {
+ // Child drag: confined to its own parent group
+ if (targetGroupIdx !== draggedGroupIdx) {
+ if (dragOver) setDragOver(null);
+ return;
+ }
+ e.preventDefault();
+ e.dataTransfer.dropEffect = "move";
+ const targetGroup = groups[targetGroupIdx];
+ const isTargetParent = targetItem.id === targetGroup[0].id;
+ let position = inUpperHalf ? "before" : "after";
+ if (isTargetParent) position = "after"; // child can't go before its parent
+ if (dragOver?.kind !== "item" || dragOver?.section !== section || dragOver?.id !== targetItem.id || dragOver?.position !== position) {
+ setDragOver({ kind: "item", section, id: targetItem.id, position });
+ }
+ }
+ };
+
+ const onItemDrop = (e, targetItem, section) => {
+ e.preventDefault();
+ const dragged = items.find(i => i.id === draggingId);
+ if (!dragged || dragged.id === targetItem.id || (dragged.section || "General") !== section || !dragOver) {
+ setDraggingId(null);
+ setDragOver(null);
+ return;
+ }
+ const sectionItems = items.filter(i => (i.section || "General") === section);
+ const { groups, groupIndexById } = computeGroups(sectionItems);
+ const draggedLevel = indentLevelOf(dragged.text);
+
+ let block, anchorId, after;
+ if (draggedLevel === 0 && dragOver.kind === "group") {
+ block = groups[groupIndexById[dragged.id]];
+ const targetGroup = groups[dragOver.groupIdx];
+ anchorId = dragOver.position === "before" ? targetGroup[0].id : targetGroup[targetGroup.length - 1].id;
+ after = dragOver.position === "after";
+ } else if (draggedLevel > 0 && dragOver.kind === "item") {
+ block = [dragged];
+ anchorId = dragOver.id;
+ after = dragOver.position === "after";
+ } else {
+ setDraggingId(null);
+ setDragOver(null);
+ return;
+ }
+
+ const blockIds = new Set(block.map(b => b.id));
+ const remainder = sectionItems.filter(i => !blockIds.has(i.id));
+ let insertIdx = remainder.findIndex(i => i.id === anchorId);
+ if (insertIdx < 0) {
+ setDraggingId(null);
+ setDragOver(null);
+ return;
+ }
+ if (after) insertIdx += 1;
+ const newOrder = [...remainder.slice(0, insertIdx), ...block, ...remainder.slice(insertIdx)];
+
+ setDraggingId(null);
+ setDragOver(null);
+ reorderSection(section, newOrder.map(i => i.id));
+ };
+
+ const onItemDragEnd = () => {
+ setDraggingId(null);
+ setDragOver(null);
+ };
+
const addSection = () => {
const sec = newSection.trim();
if (!sec) return;
@@ -98,7 +278,7 @@ export function Memory() {
});
return (
-
+
{/* Bullet items */}
+ {(() => {
+ const sectionItems = grouped[section] || [];
+ const { groups, groupIndexById } = computeGroups(sectionItems);
+ return (
Memory
@@ -148,9 +328,49 @@ export function Memory() {
- {(grouped[section] || []).map(item => (
-
+ {sectionItems.map((item) => {
+ const indentMatch = item.text.match(/^( *)(.*)$/s);
+ const indentLevel = indentMatch ? Math.floor(indentMatch[1].length / 2) : 0;
+ const displayText = indentMatch ? indentMatch[2] : item.text;
+ const gIdx = groupIndexById[item.id];
+ const group = groups[gIdx];
+ const localIdx = group.findIndex(i => i.id === item.id);
+ const isParentRow = localIdx === 0;
+ const isLastInGroup = localIdx === group.length - 1;
+ const arrowUpDisabled = indentLevel === 0 ? gIdx === 0 : localIdx <= 1;
+ const arrowDownDisabled = indentLevel === 0 ? gIdx === groups.length - 1 : isLastInGroup;
+ const isDragging = draggingId === item.id;
+ let showLineBefore = false, showLineAfter = false;
+ if (dragOver && dragOver.section === section) {
+ if (dragOver.kind === "group" && dragOver.groupIdx === gIdx) {
+ if (dragOver.position === "before" && isParentRow) showLineBefore = true;
+ if (dragOver.position === "after" && isLastInGroup) showLineAfter = true;
+ } else if (dragOver.kind === "item" && dragOver.id === item.id) {
+ if (dragOver.position === "before") showLineBefore = true;
+ else showLineAfter = true;
+ }
+ }
+ return (
+
+ {/* Icon Branding */}
+ onItemDragStart(e, item)}
+ onDragOver={(e) => onItemDragOver(e, item, section)}
+ onDrop={(e) => onItemDrop(e, item, section)}
+ onDragEnd={onItemDragEnd}
+ style={{
+ marginBottom: "0.4rem",
+ paddingLeft: `${indentLevel * 1.5}rem`,
+ borderTop: showLineBefore ? "2px solid #4db8ff" : "2px solid transparent",
+ borderBottom: showLineAfter ? "2px solid #4db8ff" : "2px solid transparent",
+ opacity: isDragging ? 0.4 : 1,
+ }}
+ >
{editing?.id === item.id ? (
))}
@@ -203,19 +438,34 @@ export function Memory() {
);
}
+function handleIndentKey(e, setText) {
+ if (e.key !== "Tab") return false;
+ e.preventDefault();
+ if (e.shiftKey) {
+ setText(t => t.startsWith(" ") ? t.slice(2) : t);
+ } else {
+ setText(t => " " + t);
+ }
+ return true;
+}
+
function AddRow({ onSave, onCancel, inputStyle, btnStyle }) {
const [text, setText] = useState("");
return (
+
+ );
+ })()}
setEditing({ id: item.id, section, text: item.text })}
+ title="Drag to reorder Β· double-click to edit"
+ style={{ display: "flex", alignItems: "flex-start", gap: "0.5rem", cursor: "grab" }}
+ >
-
- {item.text}
+ {displayText}
- ))}
+ );
+ })}
{/* Inline add form */}
{adding?.section === section && (
@@ -191,6 +424,8 @@ export function Memory() {
/>
)}
e.currentTarget.style.opacity = 1}
onMouseLeave={e => e.currentTarget.style.opacity = 0.4}
>
+ onClick={() => moveItem(item.id, "up")}
+ disabled={arrowUpDisabled}
+ title="Move up"
+ style={{ ...btnStyle("#333"), fontSize: "0.72rem", padding: "0.2rem 0.4rem", opacity: arrowUpDisabled ? 0.3 : 1, cursor: arrowUpDisabled ? "default" : "pointer" }}
+ >β²
+
)}
-
- setText(e.target.value)}
- onKeyDown={e => { if (e.key === "Enter") onSave(text); if (e.key === "Escape") onCancel(); }}
- style={{ ...inputStyle }}
+ onKeyDown={e => {
+ if (handleIndentKey(e, setText)) return;
+ if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); onSave(text); }
+ if (e.key === "Escape") onCancel();
+ }}
+ style={{ ...inputStyle, resize: "vertical", fontFamily: "inherit", minHeight: "2.1rem" }}
/>
@@ -233,7 +483,11 @@ function EditRow({ initial, onSave, onCancel, inputStyle, btnStyle }) {
type="text"
value={text}
onChange={e => setText(e.target.value)}
- onKeyDown={e => { if (e.key === "Enter") onSave(text); if (e.key === "Escape") onCancel(); }}
+ onKeyDown={e => {
+ if (handleIndentKey(e, setText)) return;
+ if (e.key === "Enter") onSave(text);
+ if (e.key === "Escape") onCancel();
+ }}
style={{ ...inputStyle }}
/>
diff --git a/interface/web/src/Models.jsx b/interface/web/src/Models.jsx
old mode 100644
new mode 100755
index aeaa7c3..b66ef7e
--- a/interface/web/src/Models.jsx
+++ b/interface/web/src/Models.jsx
@@ -1,28 +1,25 @@
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
import { API_BASE } from "./config";
-export function Models({ status }) {
+export function Models({ onPullStateChange }) {
const [models, setModels] = useState([]);
const [loading, setLoading] = useState(false);
const [error, setError] = useState("");
const [pulling, setPulling] = useState(false);
const [modelName, setModelName] = useState("");
const [pullProgress, setPullProgress] = useState("");
- const [ollamaStatus, setOllamaStatus] = useState("checking");
- const checkOllamaStatus = async () => {
+ const checkOllamaStatus = useCallback(async () => {
try {
const response = await fetch(`${API_BASE}/ollama/status`);
const data = await response.json();
- setOllamaStatus(data.status);
return data.status === "running";
} catch {
- setOllamaStatus("unavailable");
return false;
}
- };
+ }, []);
- const loadModels = async () => {
+ const loadModels = useCallback(async () => {
setLoading(true);
setError("");
try {
@@ -35,14 +32,15 @@ export function Models({ status }) {
const response = await fetch(`${API_BASE}/models/details`);
if (!response.ok) throw new Error("Failed to fetch models");
const data = await response.json();
- setModels(data.models || []);
+ // Embedding models (nomic-embed-text) are infrastructure β hide them.
+ setModels((data.models || []).filter((m) => !m.name.toLowerCase().includes("embed")));
} catch (err) {
setError(`Error loading models: ${err.message}`);
setModels([]);
} finally {
setLoading(false);
}
- };
+ }, [checkOllamaStatus]);
const pullModel = async () => {
if (!modelName.trim()) {
@@ -51,6 +49,7 @@ export function Models({ status }) {
}
setPulling(true);
+ onPullStateChange?.(true);
setError("");
setPullProgress("");
@@ -99,6 +98,7 @@ export function Models({ status }) {
setError(`Error pulling model: ${err.message}`);
} finally {
setPulling(false);
+ onPullStateChange?.(false);
}
};
@@ -123,8 +123,9 @@ export function Models({ status }) {
useEffect(() => {
loadModels();
const interval = setInterval(loadModels, 30000);
+
return () => clearInterval(interval);
- }, []);
+ }, [loadModels]);
return (
Available Models ({models.length})
diff --git a/interface/web/src/Playbook.jsx b/interface/web/src/Playbook.jsx
old mode 100644
new mode 100755
index 2e37aae..8706a07
--- a/interface/web/src/Playbook.jsx
+++ b/interface/web/src/Playbook.jsx
@@ -1,7 +1,7 @@
import { useEffect, useState, useCallback, useRef } from "react";
import { API_BASE } from "./config";
-export function Playbook({ status }) {
+export function Playbook() {
const [playbooks, setPlaybooks] = useState([]);
const [selectedId, setSelectedId] = useState(null);
const [form, setForm] = useState({ title: "", goal: "", instructions: "", tags: "" });
@@ -29,6 +29,7 @@ export function Playbook({ status }) {
}
}, []);
+ // eslint-disable-next-line react-hooks/set-state-in-effect -- async fetch on mount; setPlaybooks runs after await, not a synchronous cascading render
useEffect(() => { loadPlaybooks(); }, [loadPlaybooks]);
const safeString = (v) => (v == null ? "" : String(v));
@@ -184,7 +185,6 @@ export function Playbook({ status }) {
// Optimistic UI update β reorder within filtered set, keep unfiltered playbooks intact
setPlaybooks(prev => {
const filteredSet = new Set(currentOrder);
- const unfiltered = prev.filter(p => !filteredSet.has(String(p.id)));
const filteredMap = Object.fromEntries(prev.filter(p => filteredSet.has(String(p.id))).map(p => [String(p.id), p]));
const reorderedFiltered = newFilteredOrder.map(id => filteredMap[id]).filter(Boolean);
// Merge: place unfiltered items back in their original relative positions
diff --git a/interface/web/src/Settings.jsx b/interface/web/src/Settings.jsx
old mode 100644
new mode 100755
index 7016b55..fafebe7
--- a/interface/web/src/Settings.jsx
+++ b/interface/web/src/Settings.jsx
@@ -6,6 +6,10 @@ const DEFAULTS = {
temperature: 0.7,
system_prompt: "",
timeout: 120,
+ gpu_offload: -1, // -1 = Auto; 0β100 = percent of layers forced onto the GPU
+ memory_model: "mistral:latest", // curator model for memory extraction
+ memory_gpu_offload: 0, // curator offload; 0 = all CPU/RAM (safe on small GPUs)
+ memory_merge_threshold: 0.80, // 0 = off; else update near-duplicate facts in place
};
export function Settings() {
@@ -13,11 +17,25 @@ export function Settings() {
const [saved, setSaved] = useState(false);
const [error, setError] = useState("");
+ // Icon branding state
+ const [iconApps, setIconApps] = useState([]);
+ const [iconFilter, setIconFilter] = useState("");
+ const [iconFrac, setIconFrac] = useState(0.60);
+ const [iconRing, setIconRing] = useState(false);
+ const [selectedApps, setSelectedApps] = useState([]);
+ const [brandQueue, setBrandQueue] = useState([]);
+ const [isBranding, setIsBranding] = useState(false);
+
useEffect(() => {
fetch(`${API_BASE}/settings`)
.then(r => r.ok ? r.json() : null)
.then(d => { if (d) setForm(f => ({ ...f, ...d })); })
.catch(() => {});
+
+ fetch(`${API_BASE}/icons/apps`)
+ .then(r => r.ok ? r.json() : null)
+ .then(d => { if (d) setIconApps(d.apps || []); })
+ .catch(() => {});
}, []);
const update = (key, value) => setForm(f => ({ ...f, [key]: value }));
@@ -41,6 +59,73 @@ export function Settings() {
const reset = () => setForm(DEFAULTS);
+ // Icon branding logic
+ const toggleAppSelect = (app) => {
+ setSelectedApps(prev => {
+ const exists = prev.find(a => a.icon_name === app.icon_name);
+ if (exists) return prev.filter(a => a.icon_name !== app.icon_name);
+ return [...prev, app];
+ });
+ };
+
+ const removeFromQueue = (icon_name) => {
+ setSelectedApps(prev => prev.filter(a => a.icon_name !== icon_name));
+ };
+
+ const brandAll = async () => {
+ if (!selectedApps.length || isBranding) return;
+ setIsBranding(true);
+ const queue = selectedApps.map(a => ({ ...a, status: "pending" }));
+ setBrandQueue(queue);
+
+ for (let i = 0; i < queue.length; i++) {
+ const app = queue[i];
+ setBrandQueue(prev => prev.map((a, idx) => idx === i ? { ...a, status: "running" } : a));
+ try {
+ const r = await fetch(`${API_BASE}/icons/brand`, {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify({
+ src_path: app.icon_path,
+ output_name: app.icon_name,
+ frac: iconFrac,
+ nexus_ring: iconRing,
+ reload: false,
+ }),
+ });
+ if (!r.ok) throw new Error(await r.text());
+ setBrandQueue(prev => prev.map((a, idx) => idx === i ? { ...a, status: "done" } : a));
+ } catch (e) {
+ setBrandQueue(prev => prev.map((a, idx) => idx === i ? { ...a, status: "error", err: e.message } : a));
+ }
+ }
+
+ // Apply cache once after all are done
+ await fetch(`${API_BASE}/icons/apply`, { method: "POST" }).catch(() => {});
+
+ // Mark already_branded in the app list
+ setIconApps(prev => prev.map(a => {
+ if (selectedApps.find(s => s.icon_name === a.icon_name)) {
+ return { ...a, already_branded: true };
+ }
+ return a;
+ }));
+
+ setIsBranding(false);
+ };
+
+ const filteredApps = iconApps.filter(a =>
+ a.name.toLowerCase().includes(iconFilter.toLowerCase())
+ );
+
+ const statusIcon = (status) => {
+ if (status === "pending") return β;
+ if (status === "running") return β³;
+ if (status === "done") return β;
+ if (status === "error") return β;
+ return null;
+ };
+
const inputStyle = {
width: "100%",
padding: "0.6rem 0.75rem",
@@ -69,8 +154,10 @@ export function Settings() {
marginBottom: "1rem",
};
+ const displayQueue = isBranding ? brandQueue : selectedApps;
+
return (
-
+
+ {/* Memory Curator */}
+
@@ -214,7 +215,7 @@ export function Models({ status }) {
)}
- {/* Models List */}
+ {/* Local Models List */}
Available Models ({models.length})
diff --git a/interface/web/src/Playbook.jsx b/interface/web/src/Playbook.jsx
old mode 100644
new mode 100755
index 2e37aae..8706a07
--- a/interface/web/src/Playbook.jsx
+++ b/interface/web/src/Playbook.jsx
@@ -1,7 +1,7 @@
import { useEffect, useState, useCallback, useRef } from "react";
import { API_BASE } from "./config";
-export function Playbook({ status }) {
+export function Playbook() {
const [playbooks, setPlaybooks] = useState([]);
const [selectedId, setSelectedId] = useState(null);
const [form, setForm] = useState({ title: "", goal: "", instructions: "", tags: "" });
@@ -29,6 +29,7 @@ export function Playbook({ status }) {
}
}, []);
+ // eslint-disable-next-line react-hooks/set-state-in-effect -- async fetch on mount; setPlaybooks runs after await, not a synchronous cascading render
useEffect(() => { loadPlaybooks(); }, [loadPlaybooks]);
const safeString = (v) => (v == null ? "" : String(v));
@@ -184,7 +185,6 @@ export function Playbook({ status }) {
// Optimistic UI update β reorder within filtered set, keep unfiltered playbooks intact
setPlaybooks(prev => {
const filteredSet = new Set(currentOrder);
- const unfiltered = prev.filter(p => !filteredSet.has(String(p.id)));
const filteredMap = Object.fromEntries(prev.filter(p => filteredSet.has(String(p.id))).map(p => [String(p.id), p]));
const reorderedFiltered = newFilteredOrder.map(id => filteredMap[id]).filter(Boolean);
// Merge: place unfiltered items back in their original relative positions
diff --git a/interface/web/src/Settings.jsx b/interface/web/src/Settings.jsx
old mode 100644
new mode 100755
index 7016b55..fafebe7
--- a/interface/web/src/Settings.jsx
+++ b/interface/web/src/Settings.jsx
@@ -6,6 +6,10 @@ const DEFAULTS = {
temperature: 0.7,
system_prompt: "",
timeout: 120,
+ gpu_offload: -1, // -1 = Auto; 0β100 = percent of layers forced onto the GPU
+ memory_model: "mistral:latest", // curator model for memory extraction
+ memory_gpu_offload: 0, // curator offload; 0 = all CPU/RAM (safe on small GPUs)
+ memory_merge_threshold: 0.80, // 0 = off; else update near-duplicate facts in place
};
export function Settings() {
@@ -13,11 +17,25 @@ export function Settings() {
const [saved, setSaved] = useState(false);
const [error, setError] = useState("");
+ // Icon branding state
+ const [iconApps, setIconApps] = useState([]);
+ const [iconFilter, setIconFilter] = useState("");
+ const [iconFrac, setIconFrac] = useState(0.60);
+ const [iconRing, setIconRing] = useState(false);
+ const [selectedApps, setSelectedApps] = useState([]);
+ const [brandQueue, setBrandQueue] = useState([]);
+ const [isBranding, setIsBranding] = useState(false);
+
useEffect(() => {
fetch(`${API_BASE}/settings`)
.then(r => r.ok ? r.json() : null)
.then(d => { if (d) setForm(f => ({ ...f, ...d })); })
.catch(() => {});
+
+ fetch(`${API_BASE}/icons/apps`)
+ .then(r => r.ok ? r.json() : null)
+ .then(d => { if (d) setIconApps(d.apps || []); })
+ .catch(() => {});
}, []);
const update = (key, value) => setForm(f => ({ ...f, [key]: value }));
@@ -41,6 +59,73 @@ export function Settings() {
const reset = () => setForm(DEFAULTS);
+ // Icon branding logic
+ const toggleAppSelect = (app) => {
+ setSelectedApps(prev => {
+ const exists = prev.find(a => a.icon_name === app.icon_name);
+ if (exists) return prev.filter(a => a.icon_name !== app.icon_name);
+ return [...prev, app];
+ });
+ };
+
+ const removeFromQueue = (icon_name) => {
+ setSelectedApps(prev => prev.filter(a => a.icon_name !== icon_name));
+ };
+
+ const brandAll = async () => {
+ if (!selectedApps.length || isBranding) return;
+ setIsBranding(true);
+ const queue = selectedApps.map(a => ({ ...a, status: "pending" }));
+ setBrandQueue(queue);
+
+ for (let i = 0; i < queue.length; i++) {
+ const app = queue[i];
+ setBrandQueue(prev => prev.map((a, idx) => idx === i ? { ...a, status: "running" } : a));
+ try {
+ const r = await fetch(`${API_BASE}/icons/brand`, {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify({
+ src_path: app.icon_path,
+ output_name: app.icon_name,
+ frac: iconFrac,
+ nexus_ring: iconRing,
+ reload: false,
+ }),
+ });
+ if (!r.ok) throw new Error(await r.text());
+ setBrandQueue(prev => prev.map((a, idx) => idx === i ? { ...a, status: "done" } : a));
+ } catch (e) {
+ setBrandQueue(prev => prev.map((a, idx) => idx === i ? { ...a, status: "error", err: e.message } : a));
+ }
+ }
+
+ // Apply cache once after all are done
+ await fetch(`${API_BASE}/icons/apply`, { method: "POST" }).catch(() => {});
+
+ // Mark already_branded in the app list
+ setIconApps(prev => prev.map(a => {
+ if (selectedApps.find(s => s.icon_name === a.icon_name)) {
+ return { ...a, already_branded: true };
+ }
+ return a;
+ }));
+
+ setIsBranding(false);
+ };
+
+ const filteredApps = iconApps.filter(a =>
+ a.name.toLowerCase().includes(iconFilter.toLowerCase())
+ );
+
+ const statusIcon = (status) => {
+ if (status === "pending") return β;
+ if (status === "running") return β³;
+ if (status === "done") return β;
+ if (status === "error") return β;
+ return null;
+ };
+
const inputStyle = {
width: "100%",
padding: "0.6rem 0.75rem",
@@ -69,8 +154,10 @@ export function Settings() {
marginBottom: "1rem",
};
+ const displayQueue = isBranding ? brandQueue : selectedApps;
+
return (
-
+
Settings
{/* Generation */}
@@ -99,6 +186,140 @@ export function Settings() {
2.0 β creative
+
+
+
+ update("gpu_offload", parseInt(e.target.value))}
+ style={{ width: "100%", accentColor: "#b040c0", opacity: form.gpu_offload < 0 ? 0.4 : 1 }}
+ />
+
+ 0% β all CPU
+ 100% β all GPU
+
+
+
+ Lower values push more of the model onto the CPU β slower, but frees VRAM and reduces GPU load. Layer count is resolved per model.
+
+
+
Settings
{/* Generation */} @@ -99,6 +186,140 @@ export function Settings() { 2.0 β creative
+ 0% β all CPU
+ 100% β all GPU
+
+
+ + Lower values push more of the model onto the CPU β slower, but frees VRAM and reduces GPU load. Layer count is resolved per model. +
+
+
{/* Behaviour */}
@@ -143,6 +364,165 @@ export function Settings() {
Memory Curator
++ The model that reviews each exchange and saves new facts to memory, in the background after every reply. +
+ +
+
+ update("memory_model", e.target.value)}
+ placeholder="mistral:latest (blank = same model as chat)"
+ style={inputStyle}
+ />
+
+
+
+ A dedicated model like mistral:latest extracts facts more reliably than a small chat model.
+
+
+ update("memory_gpu_offload", parseInt(e.target.value))}
+ style={{ width: "100%", accentColor: "#b040c0", opacity: form.memory_gpu_offload < 0 ? 0.4 : 1 }}
+ />
+
+
+
+ 0% β all CPU/RAM
+ 100% β all GPU
+
+
+ + Keep at 0% (all CPU/RAM) on a small GPU so the curator doesn't evict the chat model β on a ~4 GB GPU that thrash makes extraction time out and silently save nothing. Raise it only if you have spare VRAM. +
+
+
+
+ When a newly extracted fact closely matches an existing one, update that entry instead of adding a duplicate. Uses embeddings. +
+ {form.memory_merge_threshold > 0 && ( + <> + + update("memory_merge_threshold", parseFloat(e.target.value))} + style={{ width: "100%", accentColor: "#b040c0" }} + /> +
+ 0.60 β merges more
+ 0.98 β only near-identical
+
+
+ )}
+
+
+
{/* Actions */}
App Icon Branding
++ Select apps on the left to composite their icon onto the NexusOS tile. +
+ + {/* Controls row */} +
+
+
+ {/* Shuttle */}
+
+
+ setIconFrac(parseFloat(e.target.value))}
+ style={{ width: "100%", accentColor: "#b040c0" }}
+ />
+
+
+
+ {/* Left: app list */}
+
+
+ {/* Brand button */}
+
+ setIconFilter(e.target.value)}
+ style={{ ...inputStyle, padding: "0.4rem 0.6rem", fontSize: "0.82rem" }}
+ />
+
+
+ {/* Right: queue */}
+
+ {filteredApps.length === 0 && (
+
+
+ {iconApps.length === 0 ? "Loadingβ¦" : "No apps match"}
+
+ )}
+ {filteredApps.map(app => {
+ const isSelected = !!selectedApps.find(a => a.icon_name === app.icon_name);
+ return (
+ !isBranding && !isSelected && app.icon_path && toggleAppSelect(app)}
+ style={{
+ display: "flex",
+ alignItems: "center",
+ gap: "0.5rem",
+ padding: "0.35rem 0.6rem",
+ cursor: isBranding || isSelected || !app.icon_path ? "default" : "pointer",
+ background: isSelected ? "rgba(176,64,192,0.15)" : "transparent",
+ borderLeft: isSelected ? "2px solid #b040c0" : "2px solid transparent",
+ opacity: !app.icon_path ? 0.35 : 1,
+ }}
+ onMouseEnter={e => { if (!isSelected && app.icon_path && !isBranding) e.currentTarget.style.background = "rgba(255,255,255,0.04)"; }}
+ onMouseLeave={e => { if (!isSelected) e.currentTarget.style.background = "transparent"; }}
+ >
+ {app.icon_path ? (
+ }`})
{ e.target.style.display = "none"; }}
+ />
+ ) : (
+
+ )}
+
+ {app.name}
+
+ {app.already_branded && (
+ β
+ )}
+
+ );
+ })}
+
+
+
+ {isBranding ? `Branding ${brandQueue.length} app${brandQueue.length !== 1 ? "s" : ""}β¦` : `${selectedApps.length} selected`}
+
+
+ {displayQueue.length === 0 && (
+
+
+ Click apps to add β
+
+ )}
+ {displayQueue.map(app => (
+
+ {isBranding ? (
+
+ {statusIcon(app.status)}
+
+ ) : (
+
+ )}
+
+ {app.name}
+
+
+ ))}
+
+
+ {!isBranding && brandQueue.length > 0 && brandQueue.every(a => a.status === "done") && (
+ Done β panel reloaded
+ )}
+
+