Fix full verbosity: show reasoning, tool calls expanded with results
- Full mode shows Thinking blocks with expand/collapse - Full mode shows all assistant messages including tool-only - Full mode expands tool calls by default with results (2000 char limit) - Session delete with confirm - Improved deploy script generates service files dynamically
This commit is contained in:
+43
-10
@@ -1,12 +1,13 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { use, useState, useRef } from "react";
|
import { use, useState, useRef } from "react";
|
||||||
import { ArrowLeft, Send, Loader2, Eye, RefreshCw } from "lucide-react";
|
import { ArrowLeft, Send, Loader2, Eye, RefreshCw, Trash2 } from "lucide-react";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import { useSession, useMessages } from "@/lib/hooks";
|
import { useSession, useMessages } from "@/lib/hooks";
|
||||||
import { timeAgo, formatTokens, platformBadgeClass } from "@/lib/utils";
|
import { timeAgo, formatTokens, platformBadgeClass } from "@/lib/utils";
|
||||||
import { MessageBubble } from "@/components/MessageBubble";
|
import { MessageBubble } from "@/components/MessageBubble";
|
||||||
import { useQueryClient } from "@tanstack/react-query";
|
import { useQueryClient } from "@tanstack/react-query";
|
||||||
|
import { useRouter } from "next/navigation";
|
||||||
|
|
||||||
export type Verbosity = "compact" | "normal" | "full";
|
export type Verbosity = "compact" | "normal" | "full";
|
||||||
|
|
||||||
@@ -19,6 +20,8 @@ const VERBOSITY_OPTIONS: { id: Verbosity; label: string }[] = [
|
|||||||
export default function SessionReplayPage({ params }: { params: Promise<{ id: string }> }) {
|
export default function SessionReplayPage({ params }: { params: Promise<{ id: string }> }) {
|
||||||
const { id } = use(params);
|
const { id } = use(params);
|
||||||
const qc = useQueryClient();
|
const qc = useQueryClient();
|
||||||
|
const router = useRouter();
|
||||||
|
const [confirmDelete, setConfirmDelete] = useState(false);
|
||||||
const { data: sessionData } = useSession(id);
|
const { data: sessionData } = useSession(id);
|
||||||
const { data: messagesData, isLoading } = useMessages(id);
|
const { data: messagesData, isLoading } = useMessages(id);
|
||||||
const [input, setInput] = useState("");
|
const [input, setInput] = useState("");
|
||||||
@@ -33,17 +36,15 @@ export default function SessionReplayPage({ params }: { params: Promise<{ id: st
|
|||||||
|
|
||||||
// Filter based on verbosity
|
// Filter based on verbosity
|
||||||
let visibleMessages = messages.filter((m) => {
|
let visibleMessages = messages.filter((m) => {
|
||||||
if (verbosity === "compact") return m.role === "user" || (m.role === "assistant" && m.content);
|
if (m.role === "user") return true;
|
||||||
return m.role === "user" || m.role === "assistant";
|
if (m.role === "assistant") {
|
||||||
}).reverse();
|
if (verbosity === "compact") return !!m.content?.trim();
|
||||||
|
if (verbosity === "normal") return !!m.content?.trim() || !!m.tool_calls;
|
||||||
// In compact mode, skip assistant messages that are only tool calls (no text)
|
// full: show everything including tool-only and reasoning-only messages
|
||||||
if (verbosity === "compact") {
|
|
||||||
visibleMessages = visibleMessages.filter((m) => {
|
|
||||||
if (m.role === "assistant" && !m.content?.trim()) return false;
|
|
||||||
return true;
|
return true;
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
return false;
|
||||||
|
}).reverse();
|
||||||
|
|
||||||
const toolResults = new Map<string, { name: string; content: string }>();
|
const toolResults = new Map<string, { name: string; content: string }>();
|
||||||
for (const m of messages) {
|
for (const m of messages) {
|
||||||
@@ -74,6 +75,11 @@ export default function SessionReplayPage({ params }: { params: Promise<{ id: st
|
|||||||
qc.invalidateQueries({ queryKey: ["session", id] });
|
qc.invalidateQueries({ queryKey: ["session", id] });
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const deleteSession = async () => {
|
||||||
|
await fetch("/api/sessions/" + id, { method: "DELETE" });
|
||||||
|
router.push("/history");
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-col" style={{ minHeight: "calc(100vh - 6rem)" }}>
|
<div className="flex flex-col" style={{ minHeight: "calc(100vh - 6rem)" }}>
|
||||||
{/* Header */}
|
{/* Header */}
|
||||||
@@ -96,6 +102,33 @@ export default function SessionReplayPage({ params }: { params: Promise<{ id: st
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
{/* Delete */}
|
||||||
|
{confirmDelete ? (
|
||||||
|
<div className="flex items-center gap-1">
|
||||||
|
<button
|
||||||
|
onClick={deleteSession}
|
||||||
|
className="px-2 py-1 rounded-lg text-[11px] font-semibold"
|
||||||
|
style={{ background: "rgba(255,59,48,0.12)", color: "#ff3b30" }}
|
||||||
|
>
|
||||||
|
Delete
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => setConfirmDelete(false)}
|
||||||
|
className="px-2 py-1 rounded-lg text-[11px]"
|
||||||
|
style={{ color: "var(--text-3)" }}
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<button
|
||||||
|
onClick={() => setConfirmDelete(true)}
|
||||||
|
className="p-1.5 rounded-lg active:bg-white/[0.04]"
|
||||||
|
style={{ color: "var(--text-3)" }}
|
||||||
|
>
|
||||||
|
<Trash2 size={16} />
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
{/* Refresh */}
|
{/* Refresh */}
|
||||||
<button
|
<button
|
||||||
onClick={() => { qc.invalidateQueries({ queryKey: ["messages", id] }); qc.invalidateQueries({ queryKey: ["session", id] }); }}
|
onClick={() => { qc.invalidateQueries({ queryKey: ["messages", id] }); qc.invalidateQueries({ queryKey: ["session", id] }); }}
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
import { Wrench, ChevronDown, ChevronRight } from "lucide-react";
|
import { Wrench, ChevronDown, ChevronRight, Lightbulb } from "lucide-react";
|
||||||
import type { Message, ToolCall } from "@/lib/types";
|
import type { Message, ToolCall } from "@/lib/types";
|
||||||
|
|
||||||
type Verbosity = "compact" | "normal" | "full";
|
type Verbosity = "compact" | "normal" | "full";
|
||||||
@@ -12,8 +12,36 @@ interface Props {
|
|||||||
verbosity?: Verbosity;
|
verbosity?: Verbosity;
|
||||||
}
|
}
|
||||||
|
|
||||||
function ToolCallBlock({ tc, result, showResult }: { tc: ToolCall; result?: { name: string; content: string }; showResult: boolean }) {
|
function ReasoningBlock({ text }: { text: string }) {
|
||||||
const [open, setOpen] = useState(showResult);
|
const [open, setOpen] = useState(false);
|
||||||
|
const preview = text.slice(0, 120);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="mb-2">
|
||||||
|
<button
|
||||||
|
onClick={() => setOpen(!open)}
|
||||||
|
className="flex items-center gap-1 text-[11px] py-0.5 px-1.5 rounded-md active:bg-white/[0.04]"
|
||||||
|
style={{ color: "#e0a030" }}
|
||||||
|
>
|
||||||
|
<Lightbulb size={10} />
|
||||||
|
<span>Thinking</span>
|
||||||
|
{open ? <ChevronDown size={10} /> : <ChevronRight size={10} />}
|
||||||
|
</button>
|
||||||
|
{open ? (
|
||||||
|
<pre className="mt-1 text-[12px] whitespace-pre-wrap leading-relaxed max-h-[50vh] overflow-y-auto px-2" style={{ color: "var(--text-2)" }}>
|
||||||
|
{text}
|
||||||
|
</pre>
|
||||||
|
) : (
|
||||||
|
<p className="mt-0.5 text-[11px] px-2 line-clamp-1" style={{ color: "var(--text-3)" }}>
|
||||||
|
{preview}{text.length > 120 ? "..." : ""}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function ToolCallBlock({ tc, result, defaultOpen, showResult }: { tc: ToolCall; result?: { name: string; content: string }; defaultOpen: boolean; showResult: boolean }) {
|
||||||
|
const [open, setOpen] = useState(defaultOpen);
|
||||||
let args: Record<string, unknown> = {};
|
let args: Record<string, unknown> = {};
|
||||||
try { args = JSON.parse(tc.function.arguments); } catch {}
|
try { args = JSON.parse(tc.function.arguments); } catch {}
|
||||||
|
|
||||||
@@ -34,8 +62,8 @@ function ToolCallBlock({ tc, result, showResult }: { tc: ToolCall; result?: { na
|
|||||||
{JSON.stringify(args, null, 2)}
|
{JSON.stringify(args, null, 2)}
|
||||||
</pre>
|
</pre>
|
||||||
{showResult && result && (
|
{showResult && result && (
|
||||||
<pre className="text-[11px] overflow-x-auto whitespace-pre-wrap max-h-32 overflow-y-auto" style={{ color: "var(--text-3)", opacity: 0.6 }}>
|
<pre className="text-[11px] overflow-x-auto whitespace-pre-wrap max-h-48 overflow-y-auto" style={{ color: "var(--text-3)", opacity: 0.6 }}>
|
||||||
{result.content.slice(0, 1000)}{result.content.length > 1000 ? "..." : ""}
|
{result.content.slice(0, 2000)}{result.content.length > 2000 ? "..." : ""}
|
||||||
</pre>
|
</pre>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
@@ -47,17 +75,17 @@ function ToolCallBlock({ tc, result, showResult }: { tc: ToolCall; result?: { na
|
|||||||
export function MessageBubble({ message, toolResults, verbosity = "normal" }: Props) {
|
export function MessageBubble({ message, toolResults, verbosity = "normal" }: Props) {
|
||||||
const isUser = message.role === "user";
|
const isUser = message.role === "user";
|
||||||
const content = message.content || "";
|
const content = message.content || "";
|
||||||
|
const reasoning = message.reasoning || "";
|
||||||
|
|
||||||
let toolCalls: ToolCall[] = [];
|
let toolCalls: ToolCall[] = [];
|
||||||
if (message.tool_calls) {
|
if (message.tool_calls) {
|
||||||
try { toolCalls = JSON.parse(message.tool_calls); } catch {}
|
try { toolCalls = JSON.parse(message.tool_calls); } catch {}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!content && toolCalls.length === 0) return null;
|
if (!content && toolCalls.length === 0 && !reasoning) return null;
|
||||||
|
|
||||||
// Compact: no tool calls at all
|
|
||||||
const showTools = verbosity !== "compact" && toolCalls.length > 0;
|
const showTools = verbosity !== "compact" && toolCalls.length > 0;
|
||||||
// Full: expand tool calls and show results
|
const showReasoning = verbosity === "full" && reasoning;
|
||||||
const expandTools = verbosity === "full";
|
const expandTools = verbosity === "full";
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@@ -69,6 +97,10 @@ export function MessageBubble({ message, toolResults, verbosity = "normal" }: Pr
|
|||||||
color: isUser ? "white" : "var(--text-1)",
|
color: isUser ? "white" : "var(--text-1)",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
|
{/* Reasoning / thinking */}
|
||||||
|
{showReasoning && <ReasoningBlock text={reasoning} />}
|
||||||
|
|
||||||
|
{/* Content */}
|
||||||
{content && (
|
{content && (
|
||||||
<p className="text-[14px] whitespace-pre-wrap leading-relaxed break-words">
|
<p className="text-[14px] whitespace-pre-wrap leading-relaxed break-words">
|
||||||
{verbosity === "compact" && content.length > 300
|
{verbosity === "compact" && content.length > 300
|
||||||
@@ -76,24 +108,30 @@ export function MessageBubble({ message, toolResults, verbosity = "normal" }: Pr
|
|||||||
: content}
|
: content}
|
||||||
</p>
|
</p>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
{/* Tool calls */}
|
||||||
{showTools && (
|
{showTools && (
|
||||||
<div>
|
<div>
|
||||||
{expandTools ? (
|
{expandTools ? (
|
||||||
// Full: show all tool calls expanded with results
|
|
||||||
toolCalls.map((tc) => (
|
toolCalls.map((tc) => (
|
||||||
<ToolCallBlock key={tc.id} tc={tc} result={toolResults.get(tc.id)} showResult={true} />
|
<ToolCallBlock key={tc.id} tc={tc} result={toolResults.get(tc.id)} defaultOpen={true} showResult={true} />
|
||||||
))
|
))
|
||||||
) : toolCalls.length <= 3 ? (
|
) : toolCalls.length <= 3 ? (
|
||||||
// Normal: collapsed tool calls, no results
|
|
||||||
toolCalls.map((tc) => (
|
toolCalls.map((tc) => (
|
||||||
<ToolCallBlock key={tc.id} tc={tc} result={toolResults.get(tc.id)} showResult={false} />
|
<ToolCallBlock key={tc.id} tc={tc} result={toolResults.get(tc.id)} defaultOpen={false} showResult={false} />
|
||||||
))
|
))
|
||||||
) : (
|
) : (
|
||||||
// Normal with many tools: collapsed summary
|
|
||||||
<CollapsedTools toolCalls={toolCalls} toolResults={toolResults} />
|
<CollapsedTools toolCalls={toolCalls} toolResults={toolResults} />
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
{/* No content indicator for tool-only messages in full mode */}
|
||||||
|
{!content && showTools && verbosity === "full" && (
|
||||||
|
<div className="text-[11px] mt-1" style={{ color: "var(--text-3)" }}>
|
||||||
|
(tool calls only)
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
@@ -113,7 +151,7 @@ function CollapsedTools({ toolCalls, toolResults }: { toolCalls: ToolCall[]; too
|
|||||||
{open ? <ChevronDown size={10} /> : <ChevronRight size={10} />}
|
{open ? <ChevronDown size={10} /> : <ChevronRight size={10} />}
|
||||||
</button>
|
</button>
|
||||||
{open && toolCalls.map((tc) => (
|
{open && toolCalls.map((tc) => (
|
||||||
<ToolCallBlock key={tc.id} tc={tc} result={toolResults.get(tc.id)} showResult={false} />
|
<ToolCallBlock key={tc.id} tc={tc} result={toolResults.get(tc.id)} defaultOpen={false} showResult={false} />
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
+51
-16
@@ -5,34 +5,69 @@ PROJECT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")/.." && pwd)"
|
|||||||
SYSTEMD_DIR="$HOME/.config/systemd/user"
|
SYSTEMD_DIR="$HOME/.config/systemd/user"
|
||||||
PORT="${1:-3100}"
|
PORT="${1:-3100}"
|
||||||
|
|
||||||
echo "Building..."
|
|
||||||
cd "$PROJECT_DIR"
|
|
||||||
export PATH="$HOME/.hermes/node/bin:$PATH"
|
export PATH="$HOME/.hermes/node/bin:$PATH"
|
||||||
|
|
||||||
|
echo "→ Building..."
|
||||||
|
cd "$PROJECT_DIR"
|
||||||
HERMES_BACKEND_URL=http://127.0.0.1:8643 npx next build
|
HERMES_BACKEND_URL=http://127.0.0.1:8643 npx next build
|
||||||
|
|
||||||
echo "Copying static assets to standalone..."
|
echo "→ Copying static assets..."
|
||||||
cp -r .next/static .next/standalone/.next/static
|
cp -r .next/static .next/standalone/.next/static
|
||||||
cp -r public .next/standalone/public
|
cp -r public .next/standalone/public
|
||||||
|
|
||||||
echo "Installing service..."
|
echo "→ Installing services..."
|
||||||
mkdir -p "$SYSTEMD_DIR"
|
mkdir -p "$SYSTEMD_DIR"
|
||||||
sed "s|ExecStart=.*|ExecStart=/home/hermes/.hermes/node/bin/node $PROJECT_DIR/.next/standalone/server.js|" \
|
|
||||||
"$PROJECT_DIR/deploy/hermes-os.service" > "$SYSTEMD_DIR/hermes-os.service"
|
|
||||||
|
|
||||||
# Add port
|
cat > "$SYSTEMD_DIR/hermes-os.service" << EOF
|
||||||
if ! grep -q "PORT=" "$SYSTEMD_DIR/hermes-os.service"; then
|
[Unit]
|
||||||
sed -i "/NODE_ENV/a Environment=PORT=$PORT" "$SYSTEMD_DIR/hermes-os.service"
|
Description=Hermes OS — Mobile dashboard
|
||||||
sed -i "/NODE_ENV/a Environment=HOSTNAME=0.0.0.0" "$SYSTEMD_DIR/hermes-os.service"
|
After=network.target
|
||||||
fi
|
|
||||||
|
[Service]
|
||||||
|
Type=simple
|
||||||
|
WorkingDirectory=$PROJECT_DIR
|
||||||
|
Environment=PATH=$HOME/.hermes/node/bin:/usr/local/bin:/usr/bin:/bin
|
||||||
|
Environment=HERMES_BACKEND_URL=http://127.0.0.1:8643
|
||||||
|
Environment=HERMES_GATEWAY_URL=http://127.0.0.1:8642
|
||||||
|
Environment=HERMES_SOUL_PATH=$HOME/.hermes/SOUL.md
|
||||||
|
Environment=NODE_ENV=production
|
||||||
|
Environment=PORT=$PORT
|
||||||
|
Environment=HOSTNAME=0.0.0.0
|
||||||
|
ExecStart=$HOME/.hermes/node/bin/node $PROJECT_DIR/.next/standalone/server.js
|
||||||
|
Restart=on-failure
|
||||||
|
RestartSec=5
|
||||||
|
|
||||||
|
[Install]
|
||||||
|
WantedBy=default.target
|
||||||
|
EOF
|
||||||
|
|
||||||
|
cat > "$SYSTEMD_DIR/hermes-webapi.service" << EOF
|
||||||
|
[Unit]
|
||||||
|
Description=Hermes WebAPI (FastAPI)
|
||||||
|
After=network.target
|
||||||
|
|
||||||
|
[Service]
|
||||||
|
Type=simple
|
||||||
|
WorkingDirectory=$HOME/.hermes/hermes-agent
|
||||||
|
Environment=HERMES_WEBAPI_HOST=0.0.0.0
|
||||||
|
Environment=HERMES_CORS_ORIGINS=*
|
||||||
|
ExecStart=$HOME/.hermes/hermes-agent/venv/bin/python -m webapi
|
||||||
|
Restart=on-failure
|
||||||
|
RestartSec=5
|
||||||
|
|
||||||
|
[Install]
|
||||||
|
WantedBy=default.target
|
||||||
|
EOF
|
||||||
|
|
||||||
systemctl --user daemon-reload
|
systemctl --user daemon-reload
|
||||||
|
systemctl --user enable hermes-os hermes-webapi
|
||||||
systemctl --user restart hermes-os
|
systemctl --user restart hermes-os
|
||||||
systemctl --user enable hermes-os
|
|
||||||
|
|
||||||
sleep 3
|
sleep 3
|
||||||
if curl -s -o /dev/null -w "%{http_code}" "http://localhost:$PORT" | grep -q 200; then
|
STATUS=$(curl -s -o /dev/null -w "%{http_code}" "http://localhost:$PORT" 2>/dev/null || echo "000")
|
||||||
echo "✅ Hermes OS running on port $PORT"
|
if [ "$STATUS" = "200" ]; then
|
||||||
|
echo "✅ Hermes OS running on http://0.0.0.0:$PORT"
|
||||||
else
|
else
|
||||||
echo "⚠️ Service started but health check failed"
|
echo "⚠️ Health check returned $STATUS"
|
||||||
systemctl --user status hermes-os --no-pager
|
systemctl --user status hermes-os --no-pager | head -10
|
||||||
fi
|
fi
|
||||||
|
|||||||
Reference in New Issue
Block a user