1 Commits

Author SHA1 Message Date
Alexander Whitestone
c2f2cfe3ea feat: add Tower Log narrative event feed (Fixes #7)
Some checks failed
CI / Typecheck & Lint (pull_request) Failing after 0s
Adds the tower_log DB table, a narrateEvent method on AgentService (Haiku-powered, stub-safe), a tower-log service that persists and broadcasts entries, a GET /api/tower-log REST endpoint, WebSocket bootstrap and real-time push, and a bottom-sheet Tower Log panel in the-matrix UI with fade-in animations and auto-scroll.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-23 22:43:10 -04:00
25 changed files with 605 additions and 1010 deletions

View File

@@ -442,6 +442,89 @@ Respond ONLY with valid JSON: {"accepted": true/false, "reason": "..."}`,
return ""; return "";
} }
} }
/**
* Generate a short narrative entry for the Tower Log.
* Uses Haiku (evalModel) with Timmy's wizardly persona.
* Returns a single sentence under 100 characters.
*
* In STUB_MODE returns a canned narrative so the full flow
* can be exercised without an Anthropic API key.
*/
async narrateEvent(eventType: string, context?: string): Promise<string> {
const STUB_NARRATIVES: Record<string, string[]> = {
"job:complete": [
"Timmy conjures a brilliant solution, weaving lightning and wisdom.",
"Another quest fulfilled — the Workshop hums with quiet satisfaction.",
"The crystal ball glows as Timmy delivers yet another worthy result.",
],
"job:rejected": [
"With gentle wisdom, Timmy declines — not all quests suit the Workshop.",
"The Beta oracle speaks: this path shall not be walked today.",
],
"job:failed": [
"The arcane machinery sputters — a job falters in the ether.",
"Even wizards face setbacks; Timmy regroups and stands ready.",
],
"visitor:enter": [
"A new traveler arrives, drawn by the Workshop's lightning glow.",
"The Workshop doors swing open to welcome another seeker.",
"Another soul finds the Workshop, guided by satoshi starlight.",
],
"visitor:leave": [
"A visitor departs, carrying a spark of the Workshop's magic.",
"The door closes softly — one more seeker returns to the world.",
],
"payment:eval": [
"⚡ Lightning strikes — eval fee confirmed, wisdom unlocked.",
"Sats flow in; the Workshop's scales tip toward action.",
],
"payment:work": [
"⚡ Work payment confirmed — Gamma stirs to weave the answer.",
"The Lightning Network delivers; Timmy's full power is unleashed.",
],
};
const candidates = STUB_NARRATIVES[eventType]
?? ["The Workshop stirs with quiet, purposeful magic."];
if (STUB_MODE) {
return candidates[Math.floor(Math.random() * candidates.length)]!;
}
const EVENT_CONTEXT: Record<string, string> = {
"job:complete": "A visitor's paid job completed successfully in Timmy's Workshop.",
"job:rejected": "A visitor's job request was rejected after AI evaluation.",
"job:failed": "A job failed unexpectedly in the Workshop.",
"visitor:enter": "A new visitor just entered Timmy's Workshop.",
"visitor:leave": "A visitor just left Timmy's Workshop.",
"payment:eval": "A visitor paid the evaluation fee via Lightning.",
"payment:work": "A visitor paid the work fee via Lightning, unlocking execution.",
};
const baseContext = EVENT_CONTEXT[eventType] ?? "Something noteworthy happened in the Workshop.";
const fullContext = context ? `${baseContext} ${context}` : baseContext;
try {
const client = await getClient();
const message = await client.messages.create({
model: this.evalModel, // Haiku — cheap and fast
max_tokens: 80,
system: `You are the chronicler of Timmy's Workshop — a mystical tower powered by Bitcoin Lightning where an AI wizard named Timmy fulfills paid quests for visitors.
Write a single vivid sentence (strictly under 100 characters) narrating what just happened.
Style: wizardly, warm, slightly epic. Present tense. No quotes. No hashtags.`,
messages: [{ role: "user", content: `Narrate this event: ${fullContext}` }],
});
const block = message.content[0];
if (block?.type === "text") {
const text = block.text!.trim().replace(/^["']|["']$/g, "");
return text.slice(0, 120); // hard cap
}
return candidates[0]!;
} catch (err) {
logger.warn("narrateEvent failed", { eventType, err: String(err) });
return candidates[Math.floor(Math.random() * candidates.length)]!;
}
}
} }
export const agentService = new AgentService(); export const agentService = new AgentService();

View File

@@ -21,11 +21,10 @@ export type CostEvent =
export type CommentaryEvent = export type CommentaryEvent =
| { type: "agent_commentary"; agentId: string; jobId: string; text: string }; | { type: "agent_commentary"; agentId: string; jobId: string; text: string };
// External agent state changes (e.g. Kimi, Perplexity picking up or completing tasks) export type TowerLogEvent =
export type AgentExternalEvent = | { type: "tower_log:entry"; id: string; narrative: string; eventType: string; agentId: string | null; jobId: string | null; createdAt: string };
| { type: "agent:external_state"; agentId: string; state: string; taskSummary?: string };
export type BusEvent = JobEvent | SessionEvent | DebateEvent | CostEvent | CommentaryEvent | AgentExternalEvent; export type BusEvent = JobEvent | SessionEvent | DebateEvent | CostEvent | CommentaryEvent | TowerLogEvent;
class EventBus extends EventEmitter { class EventBus extends EventEmitter {
emit(event: "bus", data: BusEvent): boolean; emit(event: "bus", data: BusEvent): boolean;

View File

@@ -0,0 +1,74 @@
/**
* Tower Log — narrative event feed (#7).
*
* Generates a prose narrative entry via Haiku whenever a key Workshop event
* occurs, persists it to the tower_log DB table, and emits it on the eventBus
* so connected WebSocket clients receive it in real time.
*/
import { randomUUID } from "crypto";
import { db, towerLog } from "@workspace/db";
import { desc } from "drizzle-orm";
import { eventBus } from "./event-bus.js";
import { agentService } from "./agent.js";
import { makeLogger } from "./logger.js";
const logger = makeLogger("tower-log");
export interface TowerLogRow {
id: string;
narrative: string;
eventType: string;
agentId: string | null;
jobId: string | null;
createdAt: Date;
}
/**
* Generate a narrative entry, persist it, and broadcast it via eventBus.
* Non-fatal — errors are logged but never thrown.
*/
export async function addTowerLogEntry(
eventType: string,
context?: string,
agentId?: string,
jobId?: string,
): Promise<void> {
try {
const narrative = await agentService.narrateEvent(eventType, context);
const id = randomUUID();
await db.insert(towerLog).values({
id,
narrative,
eventType,
agentId: agentId ?? null,
jobId: jobId ?? null,
});
// Broadcast to connected WS clients
eventBus.publish({
type: "tower_log:entry",
id,
narrative,
eventType,
agentId: agentId ?? null,
jobId: jobId ?? null,
createdAt: new Date().toISOString(),
});
} catch (err) {
logger.warn("addTowerLogEntry failed", { eventType, err: String(err) });
}
}
/**
* Fetch the most recent N entries from the DB, oldest-first.
*/
export async function getRecentTowerLog(limit = 20): Promise<TowerLogRow[]> {
const rows = await db
.select()
.from(towerLog)
.orderBy(desc(towerLog.createdAt))
.limit(limit);
return rows.reverse();
}

View File

@@ -16,7 +16,7 @@ const DEFAULT_TIMMY: TimmyState = {
const _state: WorldState = { const _state: WorldState = {
timmyState: { ...DEFAULT_TIMMY }, timmyState: { ...DEFAULT_TIMMY },
agentStates: { alpha: "idle", beta: "idle", gamma: "idle", delta: "idle", kimi: "idle", perplexity: "idle" }, agentStates: { alpha: "idle", beta: "idle", gamma: "idle", delta: "idle" },
updatedAt: new Date().toISOString(), updatedAt: new Date().toISOString(),
}; };
@@ -34,10 +34,8 @@ export function setAgentStateInWorld(agentId: string, agentState: string): void
_deriveTimmy(); _deriveTimmy();
} }
const WORKSHOP_AGENTS = ["alpha", "beta", "gamma", "delta"];
function _deriveTimmy(): void { function _deriveTimmy(): void {
const states = WORKSHOP_AGENTS.map(id => _state.agentStates[id] ?? "idle"); const states = Object.values(_state.agentStates);
if (states.includes("working")) { if (states.includes("working")) {
_state.timmyState.activity = "working"; _state.timmyState.activity = "working";
_state.timmyState.mood = "focused"; _state.timmyState.mood = "focused";

View File

@@ -32,6 +32,7 @@ import { eventBus, type BusEvent } from "../lib/event-bus.js";
import { makeLogger } from "../lib/logger.js"; import { makeLogger } from "../lib/logger.js";
import { getWorldState, setAgentStateInWorld } from "../lib/world-state.js"; import { getWorldState, setAgentStateInWorld } from "../lib/world-state.js";
import { agentService } from "../lib/agent.js"; import { agentService } from "../lib/agent.js";
import { addTowerLogEntry, getRecentTowerLog } from "../lib/tower-log.js";
import { db, worldEvents } from "@workspace/db"; import { db, worldEvents } from "@workspace/db";
const logger = makeLogger("ws-events"); const logger = makeLogger("ws-events");
@@ -269,20 +270,17 @@ function translateEvent(ev: BusEvent): object | null {
text: ev.text, text: ev.text,
}; };
// ── External agent state (Kimi, Perplexity) (#11) ───────────────────────── // ── Tower Log (#7) ────────────────────────────────────────────────────────
case "agent:external_state": { case "tower_log:entry":
updateAgentWorld(ev.agentId, ev.state); return {
void logWorldEvent( type: "tower_log_entry",
`agent:${ev.state}`, id: ev.id,
`${ev.agentId} is now ${ev.state}${ev.taskSummary ? `: ${ev.taskSummary.slice(0, 80)}` : ""}`, narrative: ev.narrative,
ev.agentId, eventType: ev.eventType,
); agentId: ev.agentId,
const msgs: object[] = [{ type: "agent_state", agentId: ev.agentId, state: ev.state }]; jobId: ev.jobId,
if (ev.taskSummary) { createdAt: ev.createdAt,
msgs.push({ type: "agent_task_summary", agentId: ev.agentId, summary: ev.taskSummary }); };
}
return msgs;
}
default: default:
return null; return null;
@@ -321,6 +319,17 @@ async function sendWorldStateBootstrap(socket: WebSocket): Promise<void> {
} catch { } catch {
send(socket, { type: "world_state", ...getWorldState(), recentEvents: [] }); send(socket, { type: "world_state", ...getWorldState(), recentEvents: [] });
} }
// Send recent tower log entries
try {
const logEntries = await getRecentTowerLog(20);
send(socket, {
type: "tower_log_history",
entries: logEntries,
});
} catch {
/* non-fatal */
}
} }
export function attachWebSocketServer(server: Server): void { export function attachWebSocketServer(server: Server): void {
@@ -353,6 +362,7 @@ export function attachWebSocketServer(server: Server): void {
const formattedNpub = `${npub.slice(0, 8)}${npub.slice(-4)}`; const formattedNpub = `${npub.slice(0, 8)}${npub.slice(-4)}`;
broadcastToAll(wss, { type: "chat", agentId: "timmy", text: `Welcome, Nostr user ${formattedNpub}! What can I help you with?` }); broadcastToAll(wss, { type: "chat", agentId: "timmy", text: `Welcome, Nostr user ${formattedNpub}! What can I help you with?` });
} }
void addTowerLogEntry("visitor:enter", undefined, "timmy");
wss.clients.forEach(c => { wss.clients.forEach(c => {
if (c !== socket && c.readyState === 1) { if (c !== socket && c.readyState === 1) {
@@ -452,13 +462,22 @@ export function attachWebSocketServer(server: Server): void {
agentId = "gamma"; phase = "starting"; agentId = "gamma"; phase = "starting";
} else if (ev.state === "complete") { } else if (ev.state === "complete") {
agentId = "alpha"; phase = "complete"; agentId = "alpha"; phase = "complete";
void addTowerLogEntry("job:complete", undefined, "alpha", ev.jobId);
} else if (ev.state === "rejected") { } else if (ev.state === "rejected") {
agentId = "alpha"; phase = "rejected"; agentId = "alpha"; phase = "rejected";
void addTowerLogEntry("job:rejected", undefined, "beta", ev.jobId);
} else if (ev.state === "failed") {
void addTowerLogEntry("job:failed", undefined, "alpha", ev.jobId);
} }
} else if (ev.type === "job:paid") { } else if (ev.type === "job:paid") {
jobId = ev.jobId; jobId = ev.jobId;
agentId = "delta"; agentId = "delta";
phase = ev.invoiceType === "eval" ? "eval_paid" : "work_paid"; phase = ev.invoiceType === "eval" ? "eval_paid" : "work_paid";
if (ev.invoiceType === "eval") {
void addTowerLogEntry("payment:eval", undefined, "delta", ev.jobId);
} else if (ev.invoiceType === "work") {
void addTowerLogEntry("payment:work", undefined, "delta", ev.jobId);
}
} }
if (agentId && phase && jobId) { if (agentId && phase && jobId) {

View File

@@ -18,6 +18,7 @@ import adminRelayRouter from "./admin-relay.js";
import adminRelayQueueRouter from "./admin-relay-queue.js"; import adminRelayQueueRouter from "./admin-relay-queue.js";
import geminiRouter from "./gemini.js"; import geminiRouter from "./gemini.js";
import statsRouter from "./stats.js"; import statsRouter from "./stats.js";
import towerLogRouter from "./tower-log.js";
const router: IRouter = Router(); const router: IRouter = Router();
@@ -33,6 +34,7 @@ router.use(relayRouter);
router.use(adminRelayRouter); router.use(adminRelayRouter);
router.use(adminRelayQueueRouter); router.use(adminRelayQueueRouter);
router.use(demoRouter); router.use(demoRouter);
router.use(towerLogRouter);
router.use("/gemini", geminiRouter); router.use("/gemini", geminiRouter);
router.use(testkitRouter); router.use(testkitRouter);
router.use(uiRouter); router.use(uiRouter);

View File

@@ -0,0 +1,21 @@
import { Router, type Request, type Response } from "express";
import { getRecentTowerLog } from "../lib/tower-log.js";
import { makeLogger } from "../lib/logger.js";
const logger = makeLogger("tower-log-route");
const router = Router();
/**
* GET /api/tower-log — return the 20 most recent narrative entries, oldest first.
*/
router.get("/tower-log", async (_req: Request, res: Response) => {
try {
const entries = await getRecentTowerLog(20);
res.json({ entries });
} catch (err) {
logger.error("GET /api/tower-log failed", { error: String(err) });
res.status(500).json({ error: "tower_log_error" });
}
});
export default router;

View File

@@ -20,20 +20,7 @@
"adaptiveIcon": { "adaptiveIcon": {
"foregroundImage": "./assets/images/icon.png", "foregroundImage": "./assets/images/icon.png",
"backgroundColor": "#0A0A12" "backgroundColor": "#0A0A12"
}, }
"intentFilters": [
{
"action": "VIEW",
"autoVerify": false,
"data": [
{
"scheme": "mobile",
"host": "nostr-callback"
}
],
"category": ["BROWSABLE", "DEFAULT"]
}
]
}, },
"web": { "web": {
"favicon": "./assets/images/icon.png", "favicon": "./assets/images/icon.png",

View File

@@ -16,7 +16,6 @@ import { SafeAreaProvider } from "react-native-safe-area-context";
import { ErrorBoundary } from "@/components/ErrorBoundary"; import { ErrorBoundary } from "@/components/ErrorBoundary";
import { TimmyProvider } from "@/context/TimmyContext"; import { TimmyProvider } from "@/context/TimmyContext";
import { NostrProvider } from "@/context/NostrContext";
import { ONBOARDING_COMPLETED_KEY } from "@/constants/storage-keys"; import { ONBOARDING_COMPLETED_KEY } from "@/constants/storage-keys";
SplashScreen.preventAutoHideAsync(); SplashScreen.preventAutoHideAsync();
@@ -78,11 +77,9 @@ export default function RootLayout() {
<QueryClientProvider client={queryClient}> <QueryClientProvider client={queryClient}>
<GestureHandlerRootView style={{ flex: 1 }}> <GestureHandlerRootView style={{ flex: 1 }}>
<KeyboardProvider> <KeyboardProvider>
<NostrProvider> <TimmyProvider>
<TimmyProvider> <RootLayoutNav />
<RootLayoutNav /> </TimmyProvider>
</TimmyProvider>
</NostrProvider>
</KeyboardProvider> </KeyboardProvider>
</GestureHandlerRootView> </GestureHandlerRootView>
</QueryClientProvider> </QueryClientProvider>

View File

@@ -1,101 +1,114 @@
import { Stack } from "expo-router"; import { Stack } from 'expo-router';
import { import { View, Text, StyleSheet, ScrollView, TextInput, Switch, Pressable, Linking, Platform } from 'react-native';
Linking, import { useState, useEffect } from 'react';
Platform, import AsyncStorage from '@react-native-async-storage/async-storage';
Pressable, import * as SecureStore from 'expo-secure-store';
ScrollView, import Constants from 'expo-constants';
StyleSheet, import { useTimmy } from '@/context/TimmyContext';
Switch, import { Ionicons } from '@expo/vector-icons';
Text, import { ConnectionBadge } from '@/components/ConnectionBadge';
TextInput, import { Colors } from '@/constants/colors';
View,
} from "react-native";
import { useState, useEffect } from "react";
import AsyncStorage from "@react-native-async-storage/async-storage";
import Constants from "expo-constants";
import { Ionicons } from "@expo/vector-icons";
import { useTimmy } from "@/context/TimmyContext"; const STORAGE_KEYS = {
import { useNostr, truncateNpub } from "@/context/NostrContext"; SERVER_URL: 'settings_server_url',
import { ConnectionBadge } from "@/components/ConnectionBadge"; NOTIFICATIONS_JOB_COMPLETION: 'settings_notifications_job_completion',
import { NostrConnectModal } from "@/components/NostrConnectModal"; NOTIFICATIONS_LOW_BALANCE: 'settings_notifications_low_balance',
import { Colors } from "@/constants/colors"; NOSTR_PRIVATE_KEY: 'settings_nostr_private_key', // Use SecureStore for this
};
const NOTIF_JOB_KEY = "settings.notifications_job_completion";
const NOTIF_BALANCE_KEY = "settings.notifications_low_balance";
export default function SettingsScreen() { export default function SettingsScreen() {
const { apiBaseUrl, setApiBaseUrl, isConnected, nostrPublicKey, connectNostr, disconnectNostr } = useTimmy();
const C = Colors.dark; const C = Colors.dark;
const { apiBaseUrl, setApiBaseUrl, isConnected } = useTimmy();
const { npub, nostrConnected, signerType, disconnect: disconnectNostr } = useNostr();
const [serverUrl, setServerUrl] = useState(apiBaseUrl); const [serverUrl, setServerUrl] = useState(apiBaseUrl);
const [jobCompletionNotifications, setJobCompletionNotifications] = useState(false); const [jobCompletionNotifications, setJobCompletionNotifications] = useState(false);
const [lowBalanceWarning, setLowBalanceWarning] = useState(false); const [lowBalanceWarning, setLowBalanceWarning] = useState(false);
const [nostrModalVisible, setNostrModalVisible] = useState(false); const [currentNpub, setCurrentNpub] = useState<string | null>(nostrPublicKey);
// Sync local serverUrl with context value (e.g. on first load from AsyncStorage)
useEffect(() => {
setServerUrl(apiBaseUrl);
}, [apiBaseUrl]);
useEffect(() => { useEffect(() => {
AsyncStorage.multiGet([NOTIF_JOB_KEY, NOTIF_BALANCE_KEY]) // Load settings from AsyncStorage and SecureStore
.then(([[, job], [, balance]]) => { const loadSettings = async () => {
if (job !== null) setJobCompletionNotifications(JSON.parse(job)); const storedServerUrl = await AsyncStorage.getItem(STORAGE_KEYS.SERVER_URL);
if (balance !== null) setLowBalanceWarning(JSON.parse(balance)); if (storedServerUrl) {
}) setServerUrl(storedServerUrl);
.catch(() => {}); }
}, []); const storedJobCompletion = await AsyncStorage.getItem(STORAGE_KEYS.NOTIFICATIONS_JOB_COMPLETION);
if (storedJobCompletion !== null) {
setJobCompletionNotifications(JSON.parse(storedJobCompletion));
}
const storedLowBalance = await AsyncStorage.getItem(STORAGE_KEYS.NOTIFICATIONS_LOW_BALANCE);
if (storedLowBalance !== null) {
setLowBalanceWarning(JSON.parse(storedLowBalance));
}
// Nostr npub is handled by TimmyContext, so we just use the provided nostrPublicKey
setCurrentNpub(nostrPublicKey);
};
loadSettings();
}, [nostrPublicKey]);
const handleServerUrlBlur = () => { // Update apiBaseUrl in context when serverUrl changes and is saved
useEffect(() => {
if (serverUrl !== apiBaseUrl) { if (serverUrl !== apiBaseUrl) {
setApiBaseUrl(serverUrl); setApiBaseUrl(serverUrl);
AsyncStorage.setItem(STORAGE_KEYS.SERVER_URL, serverUrl);
} }
}, [serverUrl, setApiBaseUrl, apiBaseUrl]);
const handleServerUrlChange = (text: string) => {
setServerUrl(text);
}; };
const toggleJobCompletion = async () => { const toggleJobCompletionNotifications = async () => {
const next = !jobCompletionNotifications; const newValue = !jobCompletionNotifications;
setJobCompletionNotifications(next); setJobCompletionNotifications(newValue);
await AsyncStorage.setItem(NOTIF_JOB_KEY, JSON.stringify(next)); await AsyncStorage.setItem(STORAGE_KEYS.NOTIFICATIONS_JOB_COMPLETION, JSON.stringify(newValue));
}; };
const toggleLowBalance = async () => { const toggleLowBalanceWarning = async () => {
const next = !lowBalanceWarning; const newValue = !lowBalanceWarning;
setLowBalanceWarning(next); setLowBalanceWarning(newValue);
await AsyncStorage.setItem(NOTIF_BALANCE_KEY, JSON.stringify(next)); await AsyncStorage.setItem(STORAGE_KEYS.NOTIFICATIONS_LOW_BALANCE, JSON.stringify(newValue));
};
const handleConnectNostr = async () => {
// This will ideally link to a dedicated Nostr connection flow
console.log('Connect Nostr button pressed');
// For now, simulate connection if not connected
if (!currentNpub) {
// This is a placeholder. Real implementation would involve generating/importing keys.
const simulatedNpub = 'npub1xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
connectNostr(simulatedNpub, 'private_key_placeholder'); // Pass a placeholder private key
setCurrentNpub(simulatedNpub);
// In a real app, the private key would be securely stored and managed by the context
// For now, just a placeholder to show connected state
}
}; };
const handleDisconnectNostr = async () => { const handleDisconnectNostr = async () => {
await disconnectNostr(); await disconnectNostr();
setCurrentNpub(null);
}; };
const appVersion = Constants.expoConfig?.version ?? "N/A"; const appVersion = Constants.expoConfig?.version || 'N/A';
const buildCommitHash = Constants.expoConfig?.extra?.["gitCommitHash"] ?? "N/A"; const buildCommitHash = Constants.expoConfig?.extra?.gitCommitHash || 'N/A';
const giteaRepoUrl = "http://143.198.27.163:3000/replit/timmy-tower"; const giteaRepoUrl = 'http://143.198.27.163:3000/replit/timmy-tower';
const openGiteaLink = () => {
Linking.openURL(giteaRepoUrl);
};
return ( return (
<View style={[styles.container, { backgroundColor: C.background }]}> <View style={styles.container}>
<Stack.Screen <Stack.Screen options={{ title: 'Settings', headerShown: true, headerStyle: { backgroundColor: C.surface }, headerTintColor: C.text }} />
options={{
title: "Settings",
headerShown: true,
headerStyle: { backgroundColor: C.surface },
headerTintColor: C.text,
}}
/>
<ScrollView contentContainerStyle={styles.scrollContent}> <ScrollView contentContainerStyle={styles.scrollContent}>
<Text style={styles.sectionHeader}>Connection</Text>
{/* ── Connection ──────────────────────────────────────────────── */}
<Text style={[styles.sectionHeader, { color: C.text }]}>Connection</Text>
<View style={styles.settingItem}> <View style={styles.settingItem}>
<Text style={[styles.settingLabel, { color: C.text }]}>Server URL</Text> <Text style={styles.settingLabel}>Server URL</Text>
<View style={styles.serverUrlContainer}> <View style={styles.serverUrlContainer}>
<TextInput <TextInput
style={[styles.input, { color: C.text, backgroundColor: C.field, borderColor: C.border }]} style={[styles.input, { color: C.text, backgroundColor: C.field }]} // Apply text and background color from Colors
value={serverUrl} value={serverUrl}
onChangeText={setServerUrl} onChangeText={handleServerUrlChange}
onBlur={handleServerUrlBlur}
placeholder="Enter server URL" placeholder="Enter server URL"
placeholderTextColor={C.textMuted} placeholderTextColor={C.textMuted}
autoCapitalize="none" autoCapitalize="none"
@@ -105,100 +118,61 @@ export default function SettingsScreen() {
</View> </View>
</View> </View>
{/* ── Notifications ────────────────────────────────────────────── */} <Text style={styles.sectionHeader}>Notifications</Text>
<Text style={[styles.sectionHeader, { color: C.text }]}>Notifications</Text> <View style={styles.settingItem}>
<View style={[styles.settingItem, { borderBottomColor: C.border }]}> <Text style={styles.settingLabel}>Job Completion Push Notifications</Text>
<Text style={[styles.settingLabel, { color: C.text }]}>Job Completion</Text>
<Switch <Switch
trackColor={{ false: C.surface, true: C.accentGlow }} trackColor={{ false: C.surface, true: C.accentGlow }}
thumbColor={Platform.OS === "android" ? C.text : ""} thumbColor={Platform.OS === 'android' ? C.text : ''}
ios_backgroundColor={C.field} ios_backgroundColor={C.field}
onValueChange={toggleJobCompletion} onValueChange={toggleJobCompletionNotifications}
value={jobCompletionNotifications} value={jobCompletionNotifications}
/> />
</View> </View>
<View style={[styles.settingItem, { borderBottomColor: C.border }]}> <View style={styles.settingItem}>
<Text style={[styles.settingLabel, { color: C.text }]}>Low Balance Warning</Text> <Text style={styles.settingLabel}>Low Balance Warning</Text>
<Switch <Switch
trackColor={{ false: C.surface, true: C.accentGlow }} trackColor={{ false: C.surface, true: C.accentGlow }}
thumbColor={Platform.OS === "android" ? C.text : ""} thumbColor={Platform.OS === 'android' ? C.text : ''}
ios_backgroundColor={C.field} ios_backgroundColor={C.field}
onValueChange={toggleLowBalance} onValueChange={toggleLowBalanceWarning}
value={lowBalanceWarning} value={lowBalanceWarning}
/> />
</View> </View>
{/* ── Nostr Identity ───────────────────────────────────────────── */} <Text style={styles.sectionHeader}>Identity</Text>
<Text style={[styles.sectionHeader, { color: C.text }]}>Identity</Text> <View style={styles.settingItem}>
<View style={[styles.settingItem, { borderBottomColor: C.border }]}> <Text style={styles.settingLabel}>Nostr Public Key</Text>
<Text style={[styles.settingLabel, { color: C.text }]}>Nostr Public Key</Text>
<Text style={[styles.settingValue, { color: C.textMuted }]}> <Text style={[styles.settingValue, { color: C.textMuted }]}>
{npub ? truncateNpub(npub) : "Not connected"} {currentNpub ? `${currentNpub.substring(0, 10)}...${currentNpub.substring(currentNpub.length - 5)}` : 'Not connected'}
</Text> </Text>
</View> </View>
{nostrConnected && signerType && (
<View style={[styles.settingItem, { borderBottomColor: C.border }]}>
<Text style={[styles.settingLabel, { color: C.text }]}>Signer</Text>
<Text style={[styles.settingValue, { color: C.textSecondary }]}>
{signerType === "amber" ? "Amber (NIP-55)" : "nsec key"}
</Text>
</View>
)}
<View style={styles.buttonContainer}> <View style={styles.buttonContainer}>
{!nostrConnected ? ( {!currentNpub ? (
<Pressable <Pressable onPress={handleConnectNostr} style={({ pressed }) => [styles.button, { backgroundColor: C.accent, opacity: pressed ? 0.8 : 1 }]}>
onPress={() => setNostrModalVisible(true)} <Text style={[styles.buttonText, { color: C.textInverted }]}>Connect Nostr</Text>
style={({ pressed }) => [
styles.button,
{ backgroundColor: C.accent, opacity: pressed ? 0.8 : 1 },
]}
>
<Text style={[styles.buttonText, { color: C.textInverted }]}>
Connect Nostr Identity
</Text>
</Pressable> </Pressable>
) : ( ) : (
<Pressable <Pressable onPress={handleDisconnectNostr} style={({ pressed }) => [styles.button, { backgroundColor: C.destructive, opacity: pressed ? 0.8 : 1 }]}>
onPress={handleDisconnectNostr} <Text style={[styles.buttonText, { color: C.textInverted }]}>Disconnect Nostr</Text>
style={({ pressed }) => [
styles.button,
{ backgroundColor: C.destructive, opacity: pressed ? 0.8 : 1 },
]}
>
<Text style={[styles.buttonText, { color: C.textInverted }]}>
Disconnect Nostr
</Text>
</Pressable> </Pressable>
)} )}
</View> </View>
{/* ── About ───────────────────────────────────────────────────── */} <Text style={styles.sectionHeader}>About</Text>
<Text style={[styles.sectionHeader, { color: C.text }]}>About</Text> <View style={styles.settingItem}>
<View style={[styles.settingItem, { borderBottomColor: C.border }]}> <Text style={styles.settingLabel}>App Version</Text>
<Text style={[styles.settingLabel, { color: C.text }]}>App Version</Text>
<Text style={[styles.settingValue, { color: C.text }]}>{appVersion}</Text> <Text style={[styles.settingValue, { color: C.text }]}>{appVersion}</Text>
</View> </View>
<View style={[styles.settingItem, { borderBottomColor: C.border }]}> <View style={styles.settingItem}>
<Text style={[styles.settingLabel, { color: C.text }]}>Build Commit</Text> <Text style={styles.settingLabel}>Build Commit Hash</Text>
<Text style={[styles.settingValue, { color: C.text }]}>{buildCommitHash}</Text> <Text style={[styles.settingValue, { color: C.text }]}>{buildCommitHash}</Text>
</View> </View>
<Pressable <Pressable onPress={openGiteaLink} style={({ pressed }) => [styles.linkButton, { opacity: pressed ? 0.8 : 1 }]}>
onPress={() => Linking.openURL(giteaRepoUrl)}
style={({ pressed }) => [styles.linkButton, { opacity: pressed ? 0.8 : 1 }]}
>
<Ionicons name="link" size={16} color={C.text} /> <Ionicons name="link" size={16} color={C.text} />
<Text style={[styles.linkButtonText, { color: C.link }]}> <Text style={[styles.linkButtonText, { color: C.link }]}>View project on Gitea</Text>
View project on Gitea
</Text>
</Pressable> </Pressable>
</ScrollView> </ScrollView>
<NostrConnectModal
visible={nostrModalVisible}
onClose={() => setNostrModalVisible(false)}
/>
</View> </View>
); );
} }
@@ -206,6 +180,7 @@ export default function SettingsScreen() {
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
flex: 1, flex: 1,
backgroundColor: Colors.dark.background, // Use background color from Colors
}, },
scrollContent: { scrollContent: {
padding: 20, padding: 20,
@@ -213,35 +188,36 @@ const styles = StyleSheet.create({
}, },
sectionHeader: { sectionHeader: {
fontSize: 18, fontSize: 18,
fontWeight: "bold", fontWeight: 'bold',
color: Colors.dark.text,
marginTop: 20, marginTop: 20,
marginBottom: 10, marginBottom: 10,
}, },
settingItem: { settingItem: {
flexDirection: "row", flexDirection: 'row',
justifyContent: "space-between", justifyContent: 'space-between',
alignItems: "center", alignItems: 'center',
paddingVertical: 12, paddingVertical: 12,
borderBottomWidth: 0.5, borderBottomWidth: 0.5,
borderBottomColor: Colors.dark.border,
}, },
settingLabel: { settingLabel: {
fontSize: 16, fontSize: 16,
color: Colors.dark.text,
flex: 1, flex: 1,
}, },
settingValue: { settingValue: {
fontSize: 14, fontSize: 16,
flexShrink: 1,
textAlign: "right",
marginLeft: 8,
}, },
serverUrlContainer: { serverUrlContainer: {
flexDirection: "row", flexDirection: 'row',
alignItems: "center", alignItems: 'center',
flex: 2, flex: 2,
}, },
input: { input: {
flex: 1, flex: 1,
borderWidth: 1, borderWidth: 1,
borderColor: Colors.dark.border,
borderRadius: 8, borderRadius: 8,
padding: 8, padding: 8,
fontSize: 14, fontSize: 14,
@@ -249,7 +225,7 @@ const styles = StyleSheet.create({
}, },
buttonContainer: { buttonContainer: {
marginTop: 20, marginTop: 20,
alignItems: "flex-start", alignItems: 'flex-start',
}, },
button: { button: {
paddingVertical: 10, paddingVertical: 10,
@@ -258,11 +234,11 @@ const styles = StyleSheet.create({
}, },
buttonText: { buttonText: {
fontSize: 16, fontSize: 16,
fontWeight: "bold", fontWeight: 'bold',
}, },
linkButton: { linkButton: {
flexDirection: "row", flexDirection: 'row',
alignItems: "center", alignItems: 'center',
marginTop: 15, marginTop: 15,
paddingVertical: 8, paddingVertical: 8,
}, },

View File

@@ -1,276 +0,0 @@
/**
* NostrConnectModal — UI for connecting a Nostr identity on mobile.
*
* Android: offers "Connect with Amber" (NIP-55) as the primary action,
* with manual nsec entry as a secondary option.
* iOS / other: manual nsec entry only.
*/
import React, { useCallback, useState } from "react";
import {
ActivityIndicator,
Modal,
Platform,
Pressable,
StyleSheet,
Text,
TextInput,
View,
} from "react-native";
import { Ionicons } from "@expo/vector-icons";
import { Colors } from "@/constants/colors";
import { useNostr } from "@/context/NostrContext";
// ─── Props ────────────────────────────────────────────────────────────────────
type Props = {
visible: boolean;
onClose: () => void;
};
// ─── Component ────────────────────────────────────────────────────────────────
export function NostrConnectModal({ visible, onClose }: Props) {
const C = Colors.dark;
const { connectWithAmber, connectWithNsec, canUseAmber } = useNostr();
const [showNsecForm, setShowNsecForm] = useState(!canUseAmber);
const [nsecInput, setNsecInput] = useState("");
const [error, setError] = useState<string | null>(null);
const [loading, setLoading] = useState(false);
const handleClose = useCallback(() => {
setNsecInput("");
setError(null);
setShowNsecForm(!canUseAmber);
onClose();
}, [canUseAmber, onClose]);
const handleAmberPress = useCallback(async () => {
setError(null);
setLoading(true);
try {
await connectWithAmber();
// Amber opens; the result arrives via deep-link callback.
// Close the modal — NostrContext handles the incoming URL.
handleClose();
} finally {
setLoading(false);
}
}, [connectWithAmber, handleClose]);
const handleNsecConnect = useCallback(async () => {
if (!nsecInput.trim()) {
setError("Please enter your nsec key");
return;
}
setError(null);
setLoading(true);
const result = await connectWithNsec(nsecInput.trim());
setLoading(false);
if (result.success) {
handleClose();
} else {
setError(result.error);
}
}, [nsecInput, connectWithNsec, handleClose]);
return (
<Modal
visible={visible}
animationType="slide"
transparent
onRequestClose={handleClose}
>
<View style={styles.overlay}>
<View style={[styles.sheet, { backgroundColor: C.surface, borderColor: C.border }]}>
{/* Header */}
<View style={styles.header}>
<Text style={[styles.title, { color: C.text }]}>Connect Nostr Identity</Text>
<Pressable onPress={handleClose} hitSlop={12}>
<Ionicons name="close" size={22} color={C.textSecondary} />
</Pressable>
</View>
{/* Android: Amber option */}
{canUseAmber && !showNsecForm && (
<View style={styles.body}>
<Text style={[styles.description, { color: C.textSecondary }]}>
Connect using{" "}
<Text style={{ color: C.text, fontWeight: "600" }}>Amber</Text>{" "}
your keys stay in Amber and are never exposed to this app.
</Text>
<Pressable
onPress={handleAmberPress}
disabled={loading}
style={({ pressed }) => [
styles.primaryButton,
{ backgroundColor: C.accent, opacity: pressed || loading ? 0.75 : 1 },
]}
>
{loading ? (
<ActivityIndicator color={C.textInverted} />
) : (
<>
<Ionicons name="shield-checkmark" size={18} color={C.textInverted} />
<Text style={[styles.buttonText, { color: C.textInverted }]}>
Connect with Amber
</Text>
</>
)}
</Pressable>
<Pressable
onPress={() => setShowNsecForm(true)}
style={styles.secondaryLink}
>
<Text style={[styles.secondaryLinkText, { color: C.link }]}>
Enter nsec manually instead
</Text>
</Pressable>
</View>
)}
{/* nsec form */}
{showNsecForm && (
<View style={styles.body}>
{canUseAmber && (
<Pressable
onPress={() => { setShowNsecForm(false); setError(null); }}
style={styles.backLink}
>
<Ionicons name="arrow-back" size={14} color={C.link} />
<Text style={[styles.secondaryLinkText, { color: C.link }]}>
Use Amber instead
</Text>
</Pressable>
)}
<Text style={[styles.description, { color: C.textSecondary }]}>
Paste your{" "}
<Text style={{ color: C.text, fontWeight: "600" }}>nsec1</Text>{" "}
private key. It will be stored only in the device secure keystore
and never logged or transmitted.
</Text>
<TextInput
style={[
styles.input,
{
backgroundColor: C.field,
color: C.text,
borderColor: error ? C.destructive : C.border,
},
]}
placeholder="nsec1…"
placeholderTextColor={C.textMuted}
value={nsecInput}
onChangeText={(t) => { setNsecInput(t); setError(null); }}
autoCapitalize="none"
autoCorrect={false}
secureTextEntry
editable={!loading}
/>
{error && (
<Text style={[styles.errorText, { color: C.destructive }]}>
{error}
</Text>
)}
<Pressable
onPress={handleNsecConnect}
disabled={loading}
style={({ pressed }) => [
styles.primaryButton,
{ backgroundColor: C.accent, opacity: pressed || loading ? 0.75 : 1 },
]}
>
{loading ? (
<ActivityIndicator color={C.textInverted} />
) : (
<Text style={[styles.buttonText, { color: C.textInverted }]}>
Connect
</Text>
)}
</Pressable>
</View>
)}
</View>
</View>
</Modal>
);
}
// ─── Styles ───────────────────────────────────────────────────────────────────
const styles = StyleSheet.create({
overlay: {
flex: 1,
justifyContent: "flex-end",
backgroundColor: "rgba(0,0,0,0.6)",
},
sheet: {
borderTopLeftRadius: 20,
borderTopRightRadius: 20,
borderWidth: 1,
borderBottomWidth: 0,
paddingHorizontal: 24,
paddingTop: 20,
paddingBottom: Platform.OS === "ios" ? 40 : 24,
},
header: {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
marginBottom: 16,
},
title: {
fontSize: 18,
fontWeight: "700",
},
body: {
gap: 14,
},
description: {
fontSize: 14,
lineHeight: 20,
},
primaryButton: {
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
gap: 8,
paddingVertical: 14,
borderRadius: 10,
},
buttonText: {
fontSize: 16,
fontWeight: "600",
},
secondaryLink: {
alignItems: "center",
paddingVertical: 4,
},
secondaryLinkText: {
fontSize: 14,
},
backLink: {
flexDirection: "row",
alignItems: "center",
gap: 4,
},
input: {
borderWidth: 1,
borderRadius: 10,
paddingHorizontal: 14,
paddingVertical: 12,
fontSize: 14,
fontFamily: Platform.OS === "ios" ? "Courier" : "monospace",
},
errorText: {
fontSize: 13,
},
});

View File

@@ -29,10 +29,6 @@ export const Colors = {
working: "#F59E0B", working: "#F59E0B",
idle: "#6B7280", idle: "#6B7280",
micActive: "#EF4444", micActive: "#EF4444",
field: "#1A1A2E",
textInverted: "#0A0A12",
destructive: "#EF4444",
link: "#A78BFA",
}, },
} as const; } as const;

View File

@@ -1,2 +1 @@
export const ONBOARDING_COMPLETED_KEY = "app.onboarding_completed"; export const ONBOARDING_COMPLETED_KEY = "app.onboarding_completed";
export const SERVER_URL_KEY = "settings.server_url";

View File

@@ -1,274 +0,0 @@
/**
* NostrContext — Nostr identity management for mobile.
*
* Android: NIP-55 Amber deep-link signing (com.greenart7c3.nostrsigner).
* Opens Amber via the `nostrsigner:` URI scheme to retrieve the user's
* public key; falls back to the Play Store install prompt when Amber is
* not installed.
*
* iOS / manual fallback: nsec paste-in stored exclusively in Expo SecureStore.
* The raw key is NEVER written to AsyncStorage, Redux state, or logs.
*/
import React, {
createContext,
useCallback,
useContext,
useEffect,
useMemo,
useState,
} from "react";
import { Linking, Platform } from "react-native";
import * as SecureStore from "expo-secure-store";
import { getPublicKey, nip19 } from "nostr-tools";
// ─── Types ────────────────────────────────────────────────────────────────────
export type NostrSignerType = "amber" | "nsec" | null;
export type NostrConnectResult =
| { success: true }
| { success: false; error: string };
type NostrContextValue = {
/** bech32 public key (npub1…), null when no identity is loaded */
npub: string | null;
/** Raw hex public key, null when no identity is loaded */
pubkeyHex: string | null;
/** How the key was connected */
signerType: NostrSignerType;
/** True when an identity is loaded */
nostrConnected: boolean;
/** True only on Android — Amber integration available */
canUseAmber: boolean;
/** Android only: launch Amber to retrieve the user's public key */
connectWithAmber: () => Promise<void>;
/** Both platforms: validate & store an nsec; derive and cache the npub */
connectWithNsec: (nsec: string) => Promise<NostrConnectResult>;
/** Wipe all Nostr credentials from SecureStore and reset state */
disconnect: () => Promise<void>;
};
// ─── Constants ────────────────────────────────────────────────────────────────
const SECURE_KEY_NSEC = "nostr.nsec";
const SECURE_KEY_NPUB = "nostr.npub";
const SECURE_KEY_SIGNER_TYPE = "nostr.signer_type";
/** The deep-link scheme declared in app.json */
const APP_SCHEME = "mobile";
/** Path Amber will call back to with the pubkey result */
const AMBER_CALLBACK_URL = `${APP_SCHEME}://nostr-callback`;
const AMBER_PACKAGE = "com.greenart7c3.nostrsigner";
const AMBER_PLAY_STORE_URL =
"https://play.google.com/store/apps/details?id=com.greenart7c3.nostrsigner";
// ─── Helpers ──────────────────────────────────────────────────────────────────
/** Truncate an npub for display: "npub1abcde…xyz12" */
export function truncateNpub(npub: string): string {
if (npub.length <= 20) return npub;
return `${npub.substring(0, 10)}${npub.substring(npub.length - 5)}`;
}
// ─── Context ──────────────────────────────────────────────────────────────────
const NostrContext = createContext<NostrContextValue | null>(null);
export function NostrProvider({ children }: { children: React.ReactNode }) {
const [npub, setNpub] = useState<string | null>(null);
const [pubkeyHex, setPubkeyHex] = useState<string | null>(null);
const [signerType, setSignerType] = useState<NostrSignerType>(null);
const canUseAmber = Platform.OS === "android";
// ── Load persisted identity on mount ──────────────────────────────────────
useEffect(() => {
async function loadIdentity() {
try {
const [storedNpub, storedSignerType] = await Promise.all([
SecureStore.getItemAsync(SECURE_KEY_NPUB),
SecureStore.getItemAsync(SECURE_KEY_SIGNER_TYPE),
]);
if (storedNpub && storedSignerType) {
setNpub(storedNpub);
setSignerType(storedSignerType as NostrSignerType);
try {
const decoded = nip19.decode(storedNpub);
if (decoded.type === "npub") {
setPubkeyHex(decoded.data as string);
}
} catch {
// npub decode failure — identity still "connected", pubkeyHex stays null
}
}
} catch {
// SecureStore unavailable (e.g. web build) — proceed without identity
}
}
loadIdentity();
}, []);
// ── Handle Amber callback deep link (Android) ─────────────────────────────
useEffect(() => {
if (!canUseAmber) return;
function handleUrl({ url }: { url: string }) {
if (!url.startsWith(`${APP_SCHEME}://nostr-callback`)) return;
try {
// React Native's URL parsing is not available in all environments;
// parse manually to avoid importing a polyfill.
const queryStart = url.indexOf("?");
if (queryStart === -1) return;
const params = new URLSearchParams(url.slice(queryStart + 1));
const result = params.get("result");
if (!result) return;
// Amber returns the hex pubkey in `result`
let hexKey = result;
if (result.startsWith("npub1")) {
const decoded = nip19.decode(result);
if (decoded.type === "npub") hexKey = decoded.data as string;
}
const derivedNpub = nip19.npubEncode(hexKey);
// Persist — no private key stored for Amber flow
SecureStore.setItemAsync(SECURE_KEY_NPUB, derivedNpub).catch(() => {});
SecureStore.setItemAsync(SECURE_KEY_SIGNER_TYPE, "amber").catch(() => {});
setNpub(derivedNpub);
setPubkeyHex(hexKey);
setSignerType("amber");
} catch {
// Malformed callback — silently ignore
}
}
const subscription = Linking.addEventListener("url", handleUrl);
return () => subscription.remove();
}, [canUseAmber]);
// ── Actions ───────────────────────────────────────────────────────────────
const connectWithAmber = useCallback(async () => {
// NIP-55: request the user's public key from Amber
const amberUri = `nostrsigner:?type=get_public_key&compressionType=none&returnType=signature&callbackUrl=${encodeURIComponent(AMBER_CALLBACK_URL)}`;
let canOpen = false;
try {
canOpen = await Linking.canOpenURL(`nostrsigner:`);
} catch {
canOpen = false;
}
if (canOpen) {
await Linking.openURL(amberUri);
} else {
// Amber not installed — direct user to Play Store
await Linking.openURL(AMBER_PLAY_STORE_URL);
}
}, []);
const connectWithNsec = useCallback(
async (nsec: string): Promise<NostrConnectResult> => {
const trimmed = nsec.trim();
if (!trimmed.startsWith("nsec1")) {
return { success: false, error: "Key must start with nsec1" };
}
let decoded: ReturnType<typeof nip19.decode>;
try {
decoded = nip19.decode(trimmed);
} catch {
return { success: false, error: "Invalid bech32 encoding" };
}
if (decoded.type !== "nsec") {
return { success: false, error: "Not a valid nsec key" };
}
let hexPubkey: string;
try {
const sk = decoded.data as Uint8Array;
hexPubkey = getPublicKey(sk);
} catch {
return { success: false, error: "Could not derive public key" };
}
const derivedNpub = nip19.npubEncode(hexPubkey);
try {
// Store only in SecureStore — never AsyncStorage, never logs
await SecureStore.setItemAsync(SECURE_KEY_NSEC, trimmed);
await SecureStore.setItemAsync(SECURE_KEY_NPUB, derivedNpub);
await SecureStore.setItemAsync(SECURE_KEY_SIGNER_TYPE, "nsec");
} catch {
return { success: false, error: "Failed to store key securely" };
}
setNpub(derivedNpub);
setPubkeyHex(hexPubkey);
setSignerType("nsec");
return { success: true };
},
[]
);
const disconnect = useCallback(async () => {
try {
await Promise.all([
SecureStore.deleteItemAsync(SECURE_KEY_NSEC),
SecureStore.deleteItemAsync(SECURE_KEY_NPUB),
SecureStore.deleteItemAsync(SECURE_KEY_SIGNER_TYPE),
]);
} catch {
// Best-effort cleanup; reset state regardless
}
setNpub(null);
setPubkeyHex(null);
setSignerType(null);
}, []);
// ── Context value ─────────────────────────────────────────────────────────
const value = useMemo<NostrContextValue>(
() => ({
npub,
pubkeyHex,
signerType,
nostrConnected: npub !== null,
canUseAmber,
connectWithAmber,
connectWithNsec,
disconnect,
}),
[
npub,
pubkeyHex,
signerType,
canUseAmber,
connectWithAmber,
connectWithNsec,
disconnect,
]
);
return (
<NostrContext.Provider value={value}>{children}</NostrContext.Provider>
);
}
export function useNostr(): NostrContextValue {
const ctx = useContext(NostrContext);
if (!ctx) throw new Error("useNostr must be used within NostrProvider");
return ctx;
}
export { AMBER_PACKAGE };

View File

@@ -8,9 +8,6 @@ import React, {
useState, useState,
} from "react"; } from "react";
import { AppState, Platform } from "react-native"; import { AppState, Platform } from "react-native";
import AsyncStorage from "@react-native-async-storage/async-storage";
import { SERVER_URL_KEY } from "@/constants/storage-keys";
export type TimmyMood = "idle" | "thinking" | "working" | "speaking"; export type TimmyMood = "idle" | "thinking" | "working" | "speaking";
@@ -25,42 +22,33 @@ export type WsEvent = {
count?: number; count?: number;
}; };
export type ConnectionStatus = export type ConnectionStatus = "connecting" | "connected" | "disconnected" | "reconnecting" | "error";
| "connecting"
| "connected"
| "disconnected"
| "reconnecting"
| "error";
type TimmyContextValue = { type TimmyContextValue = {
timmyMood: TimmyMood; timmyMood: TimmyMood;
connectionStatus: ConnectionStatus; connectionStatus: ConnectionStatus;
/** True when the WebSocket is fully open */
isConnected: boolean;
recentEvents: WsEvent[]; recentEvents: WsEvent[];
send: (msg: object) => void; send: (msg: object) => void;
sendVisitorMessage: (text: string) => void; sendVisitorMessage: (text: string) => void;
visitorId: string; visitorId: string;
/** Current API / WebSocket base domain */
apiBaseUrl: string;
/** Persist a new base URL and reconnect the WebSocket */
setApiBaseUrl: (url: string) => void;
}; };
const TimmyContext = createContext<TimmyContextValue | null>(null); const TimmyContext = createContext<TimmyContextValue | null>(null);
const MAX_EVENTS = 100; const MAX_EVENTS = 100;
const ENV_DOMAIN = process.env["EXPO_PUBLIC_DOMAIN"] ?? ""; const BASE_URL = process.env.EXPO_PUBLIC_DOMAIN ?? "";
const VISITOR_ID = const VISITOR_ID =
Date.now().toString() + Math.random().toString(36).substr(2, 9); Date.now().toString() + Math.random().toString(36).substr(2, 9);
function buildWsUrl(domain: string): string { function getWsUrl(): string {
let d = domain.trim(); let domain = BASE_URL;
if (!d) d = "localhost:8080"; if (!domain) {
d = d.replace(/^https?:\/\//, ""); domain = "localhost:8080";
d = d.replace(/\/$/, ""); }
const proto = d.startsWith("localhost") ? "ws" : "wss"; domain = domain.replace(/^https?:\/\//, "");
return `${proto}://${d}/api/ws`; domain = domain.replace(/\/$/, "");
const proto = domain.startsWith("localhost") ? "ws" : "wss";
return `${proto}://${domain}/api/ws`;
} }
function deriveMood(agentStates: Record<string, string>): TimmyMood { function deriveMood(agentStates: Record<string, string>): TimmyMood {
@@ -75,12 +63,10 @@ function deriveMood(agentStates: Record<string, string>): TimmyMood {
} }
export function TimmyProvider({ children }: { children: React.ReactNode }) { export function TimmyProvider({ children }: { children: React.ReactNode }) {
const [apiBaseUrl, setApiBaseUrlState] = useState(ENV_DOMAIN);
const [timmyMood, setTimmyMood] = useState<TimmyMood>("idle"); const [timmyMood, setTimmyMood] = useState<TimmyMood>("idle");
const [connectionStatus, setConnectionStatus] = const [connectionStatus, setConnectionStatus] =
useState<ConnectionStatus>("connecting"); useState<ConnectionStatus>("connecting");
const [recentEvents, setRecentEvents] = useState<WsEvent[]>([]); const [recentEvents, setRecentEvents] = useState<WsEvent[]>([]);
const wsRef = useRef<WebSocket | null>(null); const wsRef = useRef<WebSocket | null>(null);
const retryTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null); const retryTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
const retryCountRef = useRef(0); const retryCountRef = useRef(0);
@@ -91,32 +77,6 @@ export function TimmyProvider({ children }: { children: React.ReactNode }) {
delta: "idle", delta: "idle",
}); });
const speakingTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null); const speakingTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
// Stable ref so WebSocket callbacks always read the current URL
const apiBaseUrlRef = useRef(apiBaseUrl);
// Stable refs to break the connectWs ↔ scheduleRetry circular dependency
const connectWsRef = useRef<() => void>(() => {});
const scheduleRetryRef = useRef<() => void>(() => {});
// ── Load persisted URL on mount ────────────────────────────────────────
useEffect(() => {
AsyncStorage.getItem(SERVER_URL_KEY)
.then((stored) => {
if (stored) {
setApiBaseUrlState(stored);
apiBaseUrlRef.current = stored;
}
})
.catch(() => {});
}, []);
const setApiBaseUrl = useCallback((url: string) => {
setApiBaseUrlState(url);
apiBaseUrlRef.current = url;
AsyncStorage.setItem(SERVER_URL_KEY, url).catch(() => {});
}, []);
// ── WebSocket helpers ──────────────────────────────────────────────────
const addEvent = useCallback((evt: Omit<WsEvent, "id" | "timestamp">) => { const addEvent = useCallback((evt: Omit<WsEvent, "id" | "timestamp">) => {
const entry: WsEvent = { const entry: WsEvent = {
@@ -134,14 +94,14 @@ export function TimmyProvider({ children }: { children: React.ReactNode }) {
wsRef.current.close(); wsRef.current.close();
wsRef.current = null; wsRef.current = null;
} }
const url = buildWsUrl(apiBaseUrlRef.current); const url = getWsUrl();
setConnectionStatus("connecting"); setConnectionStatus("connecting");
let ws: WebSocket; let ws: WebSocket;
try { try {
ws = new WebSocket(url); ws = new WebSocket(url);
} catch { } catch {
setConnectionStatus("error"); setConnectionStatus("error");
scheduleRetryRef.current(); scheduleRetry();
return; return;
} }
wsRef.current = ws; wsRef.current = ws;
@@ -174,7 +134,10 @@ export function TimmyProvider({ children }: { children: React.ReactNode }) {
if (type === "world_state") { if (type === "world_state") {
const states = (msg.agentStates as Record<string, string>) ?? {}; const states = (msg.agentStates as Record<string, string>) ?? {};
agentStatesRef.current = { ...agentStatesRef.current, ...states }; agentStatesRef.current = {
...agentStatesRef.current,
...states,
};
setTimmyMood(deriveMood(agentStatesRef.current)); setTimmyMood(deriveMood(agentStatesRef.current));
return; return;
} }
@@ -224,7 +187,7 @@ export function TimmyProvider({ children }: { children: React.ReactNode }) {
ws.onclose = () => { ws.onclose = () => {
setConnectionStatus("disconnected"); setConnectionStatus("disconnected");
scheduleRetryRef.current(); scheduleRetry();
}; };
ws.onerror = () => { ws.onerror = () => {
@@ -237,15 +200,9 @@ export function TimmyProvider({ children }: { children: React.ReactNode }) {
const delay = Math.min(1000 * Math.pow(2, retryCountRef.current), 30000); const delay = Math.min(1000 * Math.pow(2, retryCountRef.current), 30000);
retryCountRef.current += 1; retryCountRef.current += 1;
retryTimerRef.current = setTimeout(() => { retryTimerRef.current = setTimeout(() => {
connectWsRef.current(); connectWs();
}, delay); }, delay);
}, []); }, [connectWs]);
// Keep the stable refs current after every render
connectWsRef.current = connectWs;
scheduleRetryRef.current = scheduleRetry;
// ── Initial connect ────────────────────────────────────────────────────
useEffect(() => { useEffect(() => {
connectWs(); connectWs();
@@ -259,19 +216,7 @@ export function TimmyProvider({ children }: { children: React.ReactNode }) {
}; };
}, [connectWs]); }, [connectWs]);
// Reconnect when apiBaseUrl changes (skip the very first render) // AppState-aware WebSocket reconnect on foreground
const isFirstRenderRef = useRef(true);
useEffect(() => {
if (isFirstRenderRef.current) {
isFirstRenderRef.current = false;
return;
}
retryCountRef.current = 0;
connectWs();
}, [apiBaseUrl, connectWs]);
// ── AppState-aware reconnect on foreground ─────────────────────────────
useEffect(() => { useEffect(() => {
if (Platform.OS === "web") return; if (Platform.OS === "web") return;
@@ -284,17 +229,20 @@ export function TimmyProvider({ children }: { children: React.ReactNode }) {
const isNowActive = nextAppState === "active"; const isNowActive = nextAppState === "active";
if (wasBackground && isNowActive) { if (wasBackground && isNowActive) {
// App returned to foreground — check if WS is still alive
const ws = wsRef.current; const ws = wsRef.current;
if (!ws || ws.readyState !== WebSocket.OPEN) { if (!ws || ws.readyState !== WebSocket.OPEN) {
// Cancel any pending retry so we don't create duplicates
if (retryTimerRef.current) { if (retryTimerRef.current) {
clearTimeout(retryTimerRef.current); clearTimeout(retryTimerRef.current);
retryTimerRef.current = null; retryTimerRef.current = null;
} }
retryCountRef.current = 0; retryCountRef.current = 0;
setConnectionStatus("reconnecting"); setConnectionStatus("reconnecting");
connectWsRef.current(); connectWs();
} }
} else if (nextAppState === "background") { } else if (nextAppState === "background") {
// Proactively close the WS to avoid OS killing it mid-frame
if (retryTimerRef.current) { if (retryTimerRef.current) {
clearTimeout(retryTimerRef.current); clearTimeout(retryTimerRef.current);
retryTimerRef.current = null; retryTimerRef.current = null;
@@ -314,9 +262,7 @@ export function TimmyProvider({ children }: { children: React.ReactNode }) {
return () => { return () => {
subscription.remove(); subscription.remove();
}; };
}, []); }, [connectWs]);
// ── Outbound messages ──────────────────────────────────────────────────
const send = useCallback((msg: object) => { const send = useCallback((msg: object) => {
if (wsRef.current && wsRef.current.readyState === WebSocket.OPEN) { if (wsRef.current && wsRef.current.readyState === WebSocket.OPEN) {
@@ -324,42 +270,28 @@ export function TimmyProvider({ children }: { children: React.ReactNode }) {
} }
}, []); }, []);
const sendVisitorMessage = useCallback((text: string) => { const sendVisitorMessage = useCallback(
if (wsRef.current && wsRef.current.readyState === WebSocket.OPEN) { (text: string) => {
wsRef.current.send( if (wsRef.current && wsRef.current.readyState === WebSocket.OPEN) {
JSON.stringify({ wsRef.current.send(
type: "visitor_message", JSON.stringify({ type: "visitor_message", visitorId: VISITOR_ID, text })
visitorId: VISITOR_ID, );
text, setTimmyMood("thinking");
}) }
); },
setTimmyMood("thinking"); []
} );
}, []);
// ── Context value ────────────────────────────────────────────────────── const value = useMemo(
const value = useMemo<TimmyContextValue>(
() => ({ () => ({
timmyMood, timmyMood,
connectionStatus, connectionStatus,
isConnected: connectionStatus === "connected",
recentEvents, recentEvents,
send, send,
sendVisitorMessage, sendVisitorMessage,
visitorId: VISITOR_ID, visitorId: VISITOR_ID,
apiBaseUrl,
setApiBaseUrl,
}), }),
[ [timmyMood, connectionStatus, recentEvents, send, sendVisitorMessage]
timmyMood,
connectionStatus,
recentEvents,
send,
sendVisitorMessage,
apiBaseUrl,
setApiBaseUrl,
]
); );
return ( return (

View File

@@ -57,9 +57,7 @@
}, },
"dependencies": { "dependencies": {
"@react-native-voice/voice": "^3.2.4", "@react-native-voice/voice": "^3.2.4",
"expo-secure-store": "~14.0.1",
"expo-speech": "^14.0.8", "expo-speech": "^14.0.8",
"nostr-tools": "^2.23.3",
"react-native-qrcode-svg": "^6.3.21", "react-native-qrcode-svg": "^6.3.21",
"react-native-webview": "^13.15.0" "react-native-webview": "^13.15.0"
} }

View File

@@ -0,0 +1,15 @@
-- Migration: Tower Log narrative event feed (#7)
-- Adds the tower_log table that stores prose narrative entries about
-- Workshop activity, generated by Haiku on key events.
CREATE TABLE IF NOT EXISTS tower_log (
id TEXT PRIMARY KEY,
narrative TEXT NOT NULL,
event_type TEXT NOT NULL,
agent_id TEXT,
job_id TEXT,
created_at TIMESTAMPTZ NOT NULL DEFAULT NOW()
);
CREATE INDEX IF NOT EXISTS idx_tower_log_created_at
ON tower_log(created_at DESC);

View File

@@ -14,3 +14,4 @@ export * from "./relay-accounts";
export * from "./relay-event-queue"; export * from "./relay-event-queue";
export * from "./job-debates"; export * from "./job-debates";
export * from "./session-messages"; export * from "./session-messages";
export * from "./tower-log";

View File

@@ -0,0 +1,10 @@
import { pgTable, text, timestamp } from "drizzle-orm/pg-core";
export const towerLog = pgTable("tower_log", {
id: text("id").primaryKey(),
narrative: text("narrative").notNull(),
eventType: text("event_type").notNull(),
agentId: text("agent_id"),
jobId: text("job_id"),
createdAt: timestamp("created_at").notNull().defaultNow(),
});

View File

@@ -702,6 +702,85 @@
padding: 12px; margin: 0; padding: 12px; margin: 0;
max-height: 400px; overflow-y: auto; max-height: 400px; overflow-y: auto;
} }
/* ── Tower Log button ────────────────────────────────────────────── */
#open-tower-log-btn {
font-family: 'Courier New', monospace; font-size: 11px; font-weight: bold;
color: #ccaaff; background: rgba(25, 10, 45, 0.85); border: 1px solid #663399;
padding: 7px 18px; cursor: pointer; letter-spacing: 2px;
box-shadow: 0 0 14px #44116622;
transition: background 0.15s, box-shadow 0.15s, color 0.15s;
border-radius: 2px;
min-height: 36px;
}
#open-tower-log-btn:hover, #open-tower-log-btn:active {
background: rgba(45, 18, 80, 0.95);
box-shadow: 0 0 20px #55228844;
color: #eeddff;
}
/* ── Tower Log panel (bottom sheet) ─────────────────────────────── */
#tower-log-panel {
position: fixed; bottom: -100%; left: 0; right: 0;
height: 65vh;
background: rgba(6, 3, 14, 0.97);
border-top: 1px solid #2a1040;
z-index: 100;
font-family: 'Courier New', monospace;
transition: bottom 0.35s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 -8px 32px rgba(80, 30, 130, 0.18);
display: flex; flex-direction: column;
}
#tower-log-panel.open { bottom: 60px; }
.tlog-header {
display: flex; align-items: center; gap: 8px;
padding: 14px 20px 10px;
border-bottom: 1px solid #2a1040;
font-size: 12px; letter-spacing: 3px; color: #9966cc;
flex-shrink: 0;
text-shadow: 0 0 8px #66228866;
}
.tlog-header span { flex: 1; }
#tower-log-close {
background: transparent; border: 1px solid #2a1040;
color: #664488; font-family: 'Courier New', monospace;
font-size: 14px; padding: 3px 8px; cursor: pointer;
transition: color 0.2s, border-color 0.2s; border-radius: 2px;
}
#tower-log-close:hover { color: #bb88ff; border-color: #8844bb; }
#tower-log-list {
flex: 1; overflow-y: auto; padding: 12px 20px;
overscroll-behavior: contain;
}
.tlog-empty {
color: #44224466; font-size: 11px; letter-spacing: 1px;
line-height: 1.8; text-align: center;
margin-top: 40px; padding: 0 20px;
}
.tlog-entry {
padding: 8px 0;
border-bottom: 1px solid #1a0a2a;
display: flex; gap: 10px; align-items: baseline;
animation: tlog-fade-in 0.4s ease-out;
}
.tlog-entry:last-child { border-bottom: none; }
@keyframes tlog-fade-in {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
.tlog-time {
font-size: 9px; color: #443355; letter-spacing: 0.5px;
white-space: nowrap; flex-shrink: 0; min-width: 48px;
}
.tlog-text {
font-size: 11px; color: #bb99dd; line-height: 1.5;
letter-spacing: 0.3px;
}
.tlog-new { color: #ddbbff; text-shadow: 0 0 6px #9944cc44; }
</style> </style>
</head> </head>
<body> <body>
@@ -744,6 +823,7 @@
<button id="open-panel-btn">⚡ SUBMIT JOB</button> <button id="open-panel-btn">⚡ SUBMIT JOB</button>
<button id="open-session-btn">⚡ FUND SESSION</button> <button id="open-session-btn">⚡ FUND SESSION</button>
<button id="open-history-btn">⏱ HISTORY</button> <button id="open-history-btn">⏱ HISTORY</button>
<button id="open-tower-log-btn">📜 TOWER LOG</button>
<a id="relay-admin-btn" href="/admin/relay">⚙ RELAY ADMIN</a> <a id="relay-admin-btn" href="/admin/relay">⚙ RELAY ADMIN</a>
</div> </div>
@@ -923,6 +1003,17 @@
<span class="recovery-text">GPU context lost — recovering...</span> <span class="recovery-text">GPU context lost — recovering...</span>
</div> </div>
<!-- ── Tower Log panel (bottom sheet) ────────────────────────────── -->
<div id="tower-log-panel">
<div class="tlog-header">
<span>📜 TOWER LOG</span>
<button id="tower-log-close"></button>
</div>
<div id="tower-log-list">
<div class="tlog-empty" id="tower-log-empty">The chronicle awaits… events will appear here as Timmy works his magic.</div>
</div>
</div>
<script> <script>
// Show Relay Admin button if admin token is stored in localStorage // Show Relay Admin button if admin token is stored in localStorage
(function() { (function() {

View File

@@ -5,27 +5,18 @@
* unused (x, z) position. No other file needs to be edited. * unused (x, z) position. No other file needs to be edited.
* *
* Fields: * Fields:
* id — unique string key used in WebSocket messages and state maps * id — unique string key used in WebSocket messages and state maps
* label — display name shown in the 3D HUD and chat panel * label — display name shown in the 3D HUD and chat panel
* color — hex integer (0xRRGGBB) used for Three.js materials and lights * color — hex integer (0xRRGGBB) used for Three.js materials and lights
* role — human-readable role string shown under the label sprite * role — human-readable role string shown under the label sprite
* specialization — optional capability description shown in agent inspect card * direction — cardinal facing direction (for future mesh orientation use)
* direction — cardinal facing direction (for future mesh orientation use) * x, z — world-space position on the horizontal plane (y is always 0)
* x, z — world-space position on the horizontal plane (y is always 0)
*/ */
export const AGENT_DEFS = [ export const AGENT_DEFS = [
{ id: 'alpha', label: 'ALPHA', color: 0x00ff88, role: 'orchestrator', direction: 'north', x: 0, z: -6 }, { id: 'alpha', label: 'ALPHA', color: 0x00ff88, role: 'orchestrator', direction: 'north', x: 0, z: -6 },
{ id: 'beta', label: 'BETA', color: 0x00aaff, role: 'worker', direction: 'east', x: 6, z: 0 }, { id: 'beta', label: 'BETA', color: 0x00aaff, role: 'worker', direction: 'east', x: 6, z: 0 },
{ id: 'gamma', label: 'GAMMA', color: 0xff6600, role: 'validator', direction: 'south', x: 0, z: 6 }, { id: 'gamma', label: 'GAMMA', color: 0xff6600, role: 'validator', direction: 'south', x: 0, z: 6 },
{ id: 'delta', label: 'DELTA', color: 0xaa00ff, role: 'monitor', direction: 'west', x: -6, z: 0 }, { id: 'delta', label: 'DELTA', color: 0xaa00ff, role: 'monitor', direction: 'west', x: -6, z: 0 },
{
id: 'kimi', label: 'KIMI', color: 0x00d4ff, role: 'analyst',
specialization: 'Long Context Analysis', direction: 'northwest', x: -10, z: -10,
},
{
id: 'perplexity', label: 'PERPLEXITY', color: 0xff6b9d, role: 'researcher',
specialization: 'Real-time Research', direction: 'northeast', x: 10, z: -10,
},
]; ];
/** /**

View File

@@ -7,13 +7,10 @@ const CRYSTAL_POS = new THREE.Vector3(0.6, 1.15, -4.1);
const agentStates = Object.fromEntries(AGENT_DEFS.map(d => [d.id, 'idle'])); const agentStates = Object.fromEntries(AGENT_DEFS.map(d => [d.id, 'idle']));
// Workshop agents that drive Timmy's mood (excludes external agents Kimi/Perplexity)
const WORKSHOP_AGENT_IDS = ['alpha', 'beta', 'gamma', 'delta'];
function deriveTimmyState() { function deriveTimmyState() {
if (agentStates.gamma === 'working') return 'working'; if (agentStates.gamma === 'working') return 'working';
if (agentStates.beta === 'thinking' || agentStates.alpha === 'thinking') return 'thinking'; if (agentStates.beta === 'thinking' || agentStates.alpha === 'thinking') return 'thinking';
if (WORKSHOP_AGENT_IDS.some(id => agentStates[id] !== 'idle')) return 'active'; if (Object.values(agentStates).some(s => s !== 'idle')) return 'active';
return 'idle'; return 'idle';
} }
@@ -100,108 +97,9 @@ function _pickMouthGeo(smileAmount) {
// ── Build Timmy ─────────────────────────────────────────────────────────────── // ── Build Timmy ───────────────────────────────────────────────────────────────
// ── External agent bodies (Kimi, Perplexity) ──────────────────────────────────
const _extBodies = {};
export function initAgents(sceneRef) { export function initAgents(sceneRef) {
scene = sceneRef; scene = sceneRef;
timmy = buildTimmy(scene); timmy = buildTimmy(scene);
_initKimiBody(scene);
_initPerplexityBody(scene);
}
function _initKimiBody(sc) {
const group = new THREE.Group();
group.position.set(-10, 1.2, -10);
const mat = new THREE.MeshStandardMaterial({
color: 0x00d4ff, emissive: 0x004466, emissiveIntensity: 0.4,
roughness: 0.15, metalness: 0.4,
});
const core = new THREE.Mesh(new THREE.OctahedronGeometry(0.38, 0), mat);
group.add(core);
const ringMat = new THREE.MeshStandardMaterial({
color: 0x00d4ff, emissive: 0x0088aa, emissiveIntensity: 0.6,
roughness: 0.1, metalness: 0.6, transparent: true, opacity: 0.7,
});
const ring1 = new THREE.Mesh(new THREE.TorusGeometry(0.60, 0.025, 6, 32), ringMat);
ring1.rotation.x = Math.PI / 3;
group.add(ring1);
const ring2 = new THREE.Mesh(new THREE.TorusGeometry(0.76, 0.018, 6, 32), ringMat.clone());
ring2.rotation.x = Math.PI / 2;
ring2.rotation.z = Math.PI / 4;
group.add(ring2);
const light = new THREE.PointLight(0x00d4ff, 0.5, 8);
group.add(light);
sc.add(group);
_extBodies.kimi = { group, core, ring1, ring2, light, mat, pulsePhase: Math.random() * Math.PI * 2 };
}
function _initPerplexityBody(sc) {
const group = new THREE.Group();
group.position.set(10, 1.2, -10);
const mat = new THREE.MeshStandardMaterial({
color: 0xff6b9d, emissive: 0x660033, emissiveIntensity: 0.4,
roughness: 0.2, metalness: 0.3,
});
const core = new THREE.Mesh(new THREE.IcosahedronGeometry(0.32, 0), mat);
group.add(core);
const scanMat = new THREE.MeshStandardMaterial({
color: 0xff6b9d, emissive: 0xaa2255, emissiveIntensity: 0.7,
roughness: 0.1, metalness: 0.5, transparent: true, opacity: 0.65,
});
const scanRings = [0, Math.PI / 3, -Math.PI / 3].map(angle => {
const r = new THREE.Mesh(new THREE.TorusGeometry(0.55, 0.022, 6, 28), scanMat.clone());
r.rotation.x = Math.PI / 2 + angle;
r.rotation.z = angle * 0.5;
group.add(r);
return r;
});
const light = new THREE.PointLight(0xff6b9d, 0.5, 8);
group.add(light);
sc.add(group);
_extBodies.perplexity = { group, core, scanRings, light, mat, pulsePhase: Math.random() * Math.PI * 2 };
}
function _updateExtBodies(t) {
_updateExtBody('kimi', t);
_updateExtBody('perplexity', t);
}
function _updateExtBody(id, t) {
const body = _extBodies[id];
if (!body) return;
const state = agentStates[id] || 'idle';
const isActive = state === 'working' || state === 'active';
const isThinking = state === 'thinking';
const speedMult = isActive ? 2.5 : isThinking ? 1.5 : 0.6;
const emissI = isActive ? 1.2 : isThinking ? 0.7 : 0.25;
const lightI = isActive ? 1.2 : isThinking ? 0.6 : 0.2;
const bobAmp = isActive ? 0.10 : 0.04;
body.group.position.y = 1.2 + Math.sin(t * 0.0008 + body.pulsePhase) * bobAmp;
body.mat.emissiveIntensity = emissI;
body.light.intensity = lightI;
if (id === 'kimi') {
body.core.rotation.y += 0.008 * speedMult;
body.core.rotation.x += 0.003 * speedMult;
body.ring1.rotation.z += 0.012 * speedMult;
body.ring2.rotation.x += 0.007 * speedMult;
} else {
body.core.rotation.y += 0.006 * speedMult;
body.core.rotation.z += 0.009 * speedMult;
body.scanRings.forEach((r, i) => { r.rotation.y += (0.015 + i * 0.008) * speedMult; });
}
} }
function buildTimmy(sc) { function buildTimmy(sc) {
@@ -519,7 +417,6 @@ export function updateAgents(time) {
const t = time * 0.001; const t = time * 0.001;
const dt = _lastFrameTime > 0 ? Math.min((time - _lastFrameTime) * 0.001, 0.05) : 0.016; const dt = _lastFrameTime > 0 ? Math.min((time - _lastFrameTime) * 0.001, 0.05) : 0.016;
_lastFrameTime = time; _lastFrameTime = time;
_updateExtBodies(time);
const vs = deriveTimmyState(); const vs = deriveTimmyState();
const pulse = Math.sin(t * 1.8 + timmy.pulsePhase); const pulse = Math.sin(t * 1.8 + timmy.pulsePhase);
@@ -992,19 +889,5 @@ export function disposeAgents() {
timmy.bubbleTex?.dispose(); timmy.bubbleTex?.dispose();
timmy.bubbleMat?.dispose(); timmy.bubbleMat?.dispose();
timmy = null; timmy = null;
// Dispose external agent bodies
for (const body of Object.values(_extBodies)) {
body.group.traverse(obj => {
if (obj.geometry) obj.geometry.dispose();
if (obj.material) {
const mats = Array.isArray(obj.material) ? obj.material : [obj.material];
mats.forEach(m => m.dispose());
}
});
if (scene) scene.remove(body.group);
}
for (const k of Object.keys(_extBodies)) delete _extBodies[k];
scene = null; scene = null;
} }

View File

@@ -12,12 +12,7 @@
*/ */
import * as THREE from 'three'; import * as THREE from 'three';
import { colorToCss, AGENT_DEFS } from './agent-defs.js'; import { colorToCss } from './agent-defs.js';
// Specialization lookup built once from AGENT_DEFS
const _specializations = Object.fromEntries(
AGENT_DEFS.filter(d => d.specialization).map(d => [d.id, d.specialization])
);
const _proj = new THREE.Vector3(); const _proj = new THREE.Vector3();
let _camera = null; let _camera = null;
@@ -25,7 +20,6 @@ let _labels = []; // { el, worldPos: THREE.Vector3, id }
// ── State cache (updated from WS) ──────────────────────────────────────────── // ── State cache (updated from WS) ────────────────────────────────────────────
const _states = {}; const _states = {};
const _lastTasks = {};
// ── Inspect popup ───────────────────────────────────────────────────────────── // ── Inspect popup ─────────────────────────────────────────────────────────────
let _inspectEl = null; let _inspectEl = null;
@@ -106,10 +100,6 @@ function _makeLabel(container, id, name, role, color, worldPos) {
return { el, worldPos, id, color }; return { el, worldPos, id, color };
} }
export function setLabelLastTask(id, summary) {
_lastTasks[id] = summary;
}
export function setLabelState(id, state) { export function setLabelState(id, state) {
_states[id] = state; _states[id] = state;
const entry = _labels.find(l => l.id === id); const entry = _labels.find(l => l.id === id);
@@ -128,17 +118,13 @@ export function showInspectPopup(id, screenX, screenY) {
const state = _states[id] || 'idle'; const state = _states[id] || 'idle';
const uptime = Math.floor(performance.now() / 1000); const uptime = Math.floor(performance.now() / 1000);
const spec = _specializations[id];
const lastTask = _lastTasks[id];
_inspectEl.innerHTML = ` _inspectEl.innerHTML = `
<div style="color:${entry.color};font-weight:bold;letter-spacing:2px;font-size:12px;margin-bottom:6px;"> <div style="color:${entry.color};font-weight:bold;letter-spacing:2px;font-size:12px;margin-bottom:6px;">
${id.toUpperCase()} ${id.toUpperCase()}
</div> </div>
${spec ? `<div style="color:${entry.color}99;margin-bottom:4px;font-size:10px;letter-spacing:1px;">⬡ ${spec}</div>` : ''}
<div style="color:#aaa;margin-bottom:2px;">state&nbsp;&nbsp;: <span style="color:${entry.color}">${state}</span></div> <div style="color:#aaa;margin-bottom:2px;">state&nbsp;&nbsp;: <span style="color:${entry.color}">${state}</span></div>
<div style="color:#aaa;margin-bottom:2px;">uptime : ${uptime}s</div> <div style="color:#aaa;margin-bottom:2px;">uptime : ${uptime}s</div>
<div style="color:#aaa;margin-bottom:2px;">network: <span style="color:#44ff88">connected</span></div> <div style="color:#aaa;">network: <span style="color:#44ff88">connected</span></div>
${lastTask ? `<div style="color:#888;font-size:9px;margin-top:4px;border-top:1px solid #333;padding-top:4px;">last: ${lastTask.slice(0, 60)}</div>` : ''}
`; `;
_inspectEl.style.left = `${screenX}px`; _inspectEl.style.left = `${screenX}px`;
_inspectEl.style.top = `${screenY}px`; _inspectEl.style.top = `${screenY}px`;

View File

@@ -8,7 +8,7 @@ import {
import { initEffects, updateEffects, disposeEffects, updateJobIndicators } from './effects.js'; import { initEffects, updateEffects, disposeEffects, updateJobIndicators } from './effects.js';
import { initUI, updateUI } from './ui.js'; import { initUI, updateUI } from './ui.js';
import { initInteraction, disposeInteraction, registerSlapTarget } from './interaction.js'; import { initInteraction, disposeInteraction, registerSlapTarget } from './interaction.js';
import { initWebSocket, getConnectionState, getJobCount } from './websocket.js'; import { initWebSocket, getConnectionState, getJobCount, initTowerLog } from './websocket.js';
import { initPaymentPanel } from './payment.js'; import { initPaymentPanel } from './payment.js';
import { initSessionPanel } from './session.js'; import { initSessionPanel } from './session.js';
import { initHistoryPanel } from './history.js'; import { initHistoryPanel } from './history.js';
@@ -45,6 +45,7 @@ function buildWorld(firstInit, stateSnapshot) {
if (firstInit) { if (firstInit) {
initUI(); initUI();
initWebSocket(scene); initWebSocket(scene);
initTowerLog();
initPaymentPanel(); initPaymentPanel();
initSessionPanel(); initSessionPanel();
initHistoryPanel(); initHistoryPanel();

View File

@@ -3,7 +3,7 @@ import { scene } from './world.js'; // Import the scene
import { setAgentState, setSpeechBubble, applyAgentStates, setMood, TIMMY_WORLD_POS } from './agents.js'; import { setAgentState, setSpeechBubble, applyAgentStates, setMood, TIMMY_WORLD_POS } from './agents.js';
import { appendSystemMessage, appendDebateMessage, showCostTicker, updateCostTicker } from './ui.js'; import { appendSystemMessage, appendDebateMessage, showCostTicker, updateCostTicker } from './ui.js';
import { sentiment } from './edge-worker-client.js'; import { sentiment } from './edge-worker-client.js';
import { setLabelState, setLabelLastTask } from './hud-labels.js'; import { setLabelState } from './hud-labels.js';
import { createJobIndicator, dissolveJobIndicator } from './effects.js'; import { createJobIndicator, dissolveJobIndicator } from './effects.js';
import { getPubkey } from './nostr-identity.js'; import { getPubkey } from './nostr-identity.js';
@@ -22,6 +22,7 @@ let jobCount = 0;
let reconnectTimer = null; let reconnectTimer = null;
let visitorId = null; let visitorId = null;
const RECONNECT_DELAY_MS = 5000; const RECONNECT_DELAY_MS = 5000;
let _towerLogHistory = [];
// Map to keep track of active job indicator positions for offsetting // Map to keep track of active job indicator positions for offsetting
const _jobIndicatorOffsets = new Map(); const _jobIndicatorOffsets = new Map();
@@ -122,19 +123,11 @@ function handleMessage(msg) {
break; break;
} }
case 'agent_task_summary': {
if (msg.agentId && msg.summary) {
setLabelLastTask(msg.agentId, msg.summary);
}
break;
}
case 'job_completed': { case 'job_completed': {
if (jobCount > 0) jobCount--; if (jobCount > 0) jobCount--;
if (msg.agentId) { if (msg.agentId) {
setAgentState(msg.agentId, 'idle'); setAgentState(msg.agentId, 'idle');
setLabelState(msg.agentId, 'idle'); setLabelState(msg.agentId, 'idle');
setLabelLastTask(msg.agentId, `job ${(msg.jobId || '').slice(0, 8)} completed`);
} }
appendSystemMessage(`job ${(msg.jobId || '').slice(0, 8)} complete`); appendSystemMessage(`job ${(msg.jobId || '').slice(0, 8)} complete`);
@@ -198,6 +191,23 @@ function handleMessage(msg) {
break; break;
} }
case 'tower_log_history': {
// Load history when panel opens
if (Array.isArray(msg.entries)) {
_towerLogHistory = msg.entries;
_renderTowerLog();
}
break;
}
case 'tower_log_entry': {
// New entry streamed in real time
_towerLogHistory.push(msg);
if (_towerLogHistory.length > 20) _towerLogHistory.shift();
_renderTowerLog(msg.id); // pass id to highlight new entry
break;
}
case 'agent_count': case 'agent_count':
case 'visitor_count': case 'visitor_count':
break; break;
@@ -213,3 +223,79 @@ export function sendVisitorMessage(text) {
export function getConnectionState() { return connectionState; } export function getConnectionState() { return connectionState; }
export function getJobCount() { return jobCount; } export function getJobCount() { return jobCount; }
// ── Tower Log panel ────────────────────────────────────────────────────────
function _renderTowerLog(newId) {
const list = document.getElementById('tower-log-list');
const empty = document.getElementById('tower-log-empty');
if (!list) return;
if (_towerLogHistory.length === 0) {
if (empty) empty.style.display = 'block';
return;
}
if (empty) empty.style.display = 'none';
// Remove old entries (keep only the empty placeholder and rebuild)
Array.from(list.querySelectorAll('.tlog-entry')).forEach(el => el.remove());
for (const entry of _towerLogHistory) {
const el = document.createElement('div');
el.className = 'tlog-entry' + (entry.id === newId ? ' tlog-new' : '');
el.dataset.id = entry.id;
const t = document.createElement('div');
t.className = 'tlog-time';
const d = new Date(entry.createdAt);
t.textContent = d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
const n = document.createElement('div');
n.className = 'tlog-text';
n.textContent = entry.narrative;
el.appendChild(t);
el.appendChild(n);
list.appendChild(el);
}
// Auto-scroll to bottom
list.scrollTop = list.scrollHeight;
// Fade new entry highlight after 3s
if (newId) {
setTimeout(() => {
const el = list.querySelector(`[data-id="${newId}"]`);
if (el) el.classList.remove('tlog-new');
}, 3000);
}
}
export function initTowerLog() {
const openBtn = document.getElementById('open-tower-log-btn');
const panel = document.getElementById('tower-log-panel');
const closeBtn = document.getElementById('tower-log-close');
if (!openBtn || !panel || !closeBtn) return;
openBtn.addEventListener('click', () => {
panel.classList.add('open');
// Fetch history if empty
if (_towerLogHistory.length === 0) {
fetch('/api/tower-log')
.then(r => r.json())
.then(data => {
if (Array.isArray(data.entries)) {
_towerLogHistory = data.entries;
_renderTowerLog();
}
})
.catch(() => {});
} else {
_renderTowerLog();
}
});
closeBtn.addEventListener('click', () => {
panel.classList.remove('open');
});
}