@backbay/glia-three 0.2.0-alpha.2

package/src/three/AgentConsole/AgentConsole.stories.tsx

@@ -0,0 +1,397 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { AgentConsole } from "./AgentConsole";
+import type { Message, FocusNode, QuickAction, AgentState, AgentMode } from "./types";
+
+const meta: Meta<typeof AgentConsole> = {
+  title: "Primitives/3D/Agent/AgentConsole",
+  component: AgentConsole,
+  parameters: {
+    layout: "fullscreen",
+    backgrounds: { default: "dark" },
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    agentState: {
+      control: "select",
+      options: ["idle", "listening", "thinking", "responding", "error"],
+    },
+    agentMode: {
+      control: "select",
+      options: ["conversational", "monitoring", "focused", "commanding"],
+    },
+    trustTier: {
+      control: "select",
+      options: ["bronze", "silver", "gold"],
+    },
+    isTyping: {
+      control: "boolean",
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof AgentConsole>;
+
+// Mock data
+const sampleMessages: Message[] = [
+  {
+    id: "1",
+    role: "user",
+    content: "What's the status of the current jobs?",
+    timestamp: new Date(Date.now() - 60000).toISOString(),
+  },
+  {
+    id: "2",
+    role: "agent",
+    content: "I can see 3 running jobs and 2 queued. The fab network is operating normally with all nodes online.",
+    timestamp: new Date(Date.now() - 45000).toISOString(),
+    thinking: "Checking job status across all clusters...",
+  },
+  {
+    id: "3",
+    role: "user",
+    content: "Can you prioritize job-42?",
+    timestamp: new Date(Date.now() - 30000).toISOString(),
+  },
+  {
+    id: "4",
+    role: "agent",
+    content: "Done! Job-42 has been moved to high priority. It should start processing within the next few seconds.",
+    timestamp: new Date(Date.now() - 15000).toISOString(),
+    toolCalls: [
+      {
+        id: "tc-1",
+        name: "prioritize_job",
+        arguments: { job_id: "job-42", priority: "high" },
+        result: { success: true },
+        status: "completed",
+      },
+    ],
+  },
+];
+
+const sampleFocusNodes: FocusNode[] = [
+  {
+    id: "focus-1",
+    label: "Job 42",
+    kind: "job",
+    importance: 0.9,
+    hasUnread: true,
+    entityRef: { type: "job", id: "job-42" },
+    description: "High priority render task",
+  },
+  {
+    id: "focus-2",
+    label: "Node Alpha",
+    kind: "node",
+    importance: 0.7,
+    entityRef: { type: "node", id: "node-alpha" },
+    description: "Primary compute node",
+  },
+  {
+    id: "focus-3",
+    label: "Warning",
+    kind: "warning",
+    importance: 0.8,
+    description: "Node Beta is degraded",
+  },
+  {
+    id: "focus-4",
+    label: "Context",
+    kind: "context",
+    importance: 0.5,
+    description: "Current workspace context",
+  },
+];
+
+const sampleQuickActions: QuickAction[] = [
+  {
+    id: "action-1",
+    label: "New Job",
+    icon: "plus",
+    shortcut: "N",
+    enabled: true,
+    category: "primary",
+  },
+  {
+    id: "action-2",
+    label: "Pause All",
+    icon: "pause",
+    shortcut: "P",
+    enabled: true,
+    category: "secondary",
+  },
+  {
+    id: "action-3",
+    label: "Emergency Stop",
+    icon: "alert",
+    shortcut: "Esc",
+    enabled: true,
+    category: "danger",
+  },
+];
+
+const handlePromptSubmit = (text: string) => {
+  console.log("Prompt submitted:", text);
+};
+
+export const Idle: Story = {
+  args: {
+    agentState: "idle",
+    agentMode: "conversational",
+    trustTier: "silver",
+    isTyping: false,
+    messages: sampleMessages,
+    focusNodes: sampleFocusNodes,
+    quickActions: sampleQuickActions,
+    onPromptSubmit: handlePromptSubmit,
+    onQuickAction: (id) => console.log("Quick action:", id),
+    onFocusNodeClick: (id) => console.log("Focus node clicked:", id),
+    style: { width: "100%", height: "600px" },
+  },
+};
+
+export const Listening: Story = {
+  args: {
+    agentState: "listening",
+    agentMode: "conversational",
+    trustTier: "silver",
+    isTyping: false,
+    messages: sampleMessages,
+    focusNodes: sampleFocusNodes,
+    quickActions: sampleQuickActions,
+    onPromptSubmit: handlePromptSubmit,
+    onQuickAction: (id) => console.log("Quick action:", id),
+    style: { width: "100%", height: "600px" },
+  },
+};
+
+export const Thinking: Story = {
+  args: {
+    agentState: "thinking",
+    agentMode: "conversational",
+    trustTier: "silver",
+    isTyping: true,
+    messages: sampleMessages,
+    focusNodes: sampleFocusNodes,
+    quickActions: sampleQuickActions,
+    onPromptSubmit: handlePromptSubmit,
+    onQuickAction: (id) => console.log("Quick action:", id),
+    style: { width: "100%", height: "600px" },
+  },
+};
+
+export const Responding: Story = {
+  args: {
+    agentState: "responding",
+    agentMode: "conversational",
+    trustTier: "silver",
+    isTyping: true,
+    messages: sampleMessages,
+    focusNodes: sampleFocusNodes,
+    quickActions: sampleQuickActions,
+    onPromptSubmit: handlePromptSubmit,
+    onQuickAction: (id) => console.log("Quick action:", id),
+    style: { width: "100%", height: "600px" },
+  },
+};
+
+export const Error: Story = {
+  args: {
+    agentState: "error",
+    agentMode: "conversational",
+    trustTier: "silver",
+    isTyping: false,
+    messages: [
+      ...sampleMessages,
+      {
+        id: "error-1",
+        role: "system" as const,
+        content: "Connection to fab network lost. Attempting to reconnect...",
+        timestamp: new Date().toISOString(),
+      },
+    ],
+    focusNodes: sampleFocusNodes,
+    quickActions: sampleQuickActions,
+    onPromptSubmit: handlePromptSubmit,
+    onQuickAction: (id) => console.log("Quick action:", id),
+    style: { width: "100%", height: "600px" },
+  },
+};
+
+export const MonitoringMode: Story = {
+  args: {
+    agentState: "idle",
+    agentMode: "monitoring",
+    trustTier: "gold",
+    isTyping: false,
+    messages: [
+      {
+        id: "m-1",
+        role: "agent",
+        content: "Monitoring mode active. I'll alert you to any significant changes.",
+        timestamp: new Date().toISOString(),
+      },
+    ],
+    focusNodes: [
+      { id: "f-1", label: "CPU Usage", kind: "context", importance: 0.6 },
+      { id: "f-2", label: "Active Jobs", kind: "job", importance: 0.8 },
+      { id: "f-3", label: "Network", kind: "node", importance: 0.5 },
+    ],
+    quickActions: sampleQuickActions,
+    onPromptSubmit: handlePromptSubmit,
+    onQuickAction: (id) => console.log("Quick action:", id),
+    style: { width: "100%", height: "600px" },
+  },
+};
+
+export const FocusedMode: Story = {
+  args: {
+    agentState: "thinking",
+    agentMode: "focused",
+    trustTier: "silver",
+    isTyping: true,
+    messages: [
+      {
+        id: "m-1",
+        role: "user",
+        content: "Analyze job-42 in detail",
+        timestamp: new Date(Date.now() - 10000).toISOString(),
+      },
+      {
+        id: "m-2",
+        role: "agent",
+        content: "Focusing on job-42. Analyzing execution history, dependencies, and performance metrics...",
+        timestamp: new Date().toISOString(),
+        thinking: "Gathering detailed metrics from job execution logs...",
+      },
+    ],
+    focusNodes: sampleFocusNodes,
+    focusedNodeId: "focus-1",
+    quickActions: sampleQuickActions,
+    onPromptSubmit: handlePromptSubmit,
+    onQuickAction: (id) => console.log("Quick action:", id),
+    onFocusNodeClick: (id) => console.log("Focus node clicked:", id),
+    style: { width: "100%", height: "600px" },
+  },
+};
+
+export const CommandingMode: Story = {
+  args: {
+    agentState: "responding",
+    agentMode: "commanding",
+    trustTier: "gold",
+    isTyping: true,
+    messages: [
+      {
+        id: "m-1",
+        role: "user",
+        content: "Execute emergency failover",
+        timestamp: new Date(Date.now() - 5000).toISOString(),
+      },
+      {
+        id: "m-2",
+        role: "agent",
+        content: "Initiating emergency failover sequence...",
+        timestamp: new Date().toISOString(),
+        toolCalls: [
+          {
+            id: "tc-1",
+            name: "emergency_failover",
+            arguments: { confirm: true },
+            status: "running",
+          },
+        ],
+      },
+    ],
+    focusNodes: [
+      { id: "f-1", label: "Failover", kind: "action", importance: 1.0 },
+      { id: "f-2", label: "Warning", kind: "warning", importance: 0.9 },
+    ],
+    quickActions: [
+      { id: "cancel", label: "Cancel", category: "danger", enabled: true },
+    ],
+    onPromptSubmit: handlePromptSubmit,
+    onQuickAction: (id) => console.log("Quick action:", id),
+    style: { width: "100%", height: "600px" },
+  },
+};
+
+export const BronzeTier: Story = {
+  args: {
+    agentState: "idle",
+    agentMode: "conversational",
+    trustTier: "bronze",
+    isTyping: false,
+    messages: sampleMessages.slice(0, 2),
+    focusNodes: sampleFocusNodes.slice(0, 2),
+    quickActions: sampleQuickActions.slice(0, 2),
+    onPromptSubmit: handlePromptSubmit,
+    onQuickAction: (id) => console.log("Quick action:", id),
+    style: { width: "100%", height: "600px" },
+  },
+};
+
+export const GoldTier: Story = {
+  args: {
+    agentState: "idle",
+    agentMode: "conversational",
+    trustTier: "gold",
+    isTyping: false,
+    messages: sampleMessages,
+    focusNodes: sampleFocusNodes,
+    quickActions: sampleQuickActions,
+    onPromptSubmit: handlePromptSubmit,
+    onQuickAction: (id) => console.log("Quick action:", id),
+    style: { width: "100%", height: "600px" },
+  },
+};
+
+export const MinimalUI: Story = {
+  args: {
+    agentState: "idle",
+    agentMode: "conversational",
+    trustTier: "silver",
+    isTyping: false,
+    messages: [],
+    focusNodes: [],
+    quickActions: [],
+    onPromptSubmit: handlePromptSubmit,
+    style: { width: "100%", height: "600px" },
+  },
+};
+
+export const LongConversation: Story = {
+  args: {
+    agentState: "idle",
+    agentMode: "conversational",
+    trustTier: "silver",
+    isTyping: false,
+    messages: [
+      ...sampleMessages,
+      {
+        id: "5",
+        role: "user" as const,
+        content: "What about the node performance?",
+        timestamp: new Date(Date.now() - 10000).toISOString(),
+      },
+      {
+        id: "6",
+        role: "agent" as const,
+        content: "All nodes are performing within normal parameters. Node Alpha is at 72% capacity, Node Beta at 45%.",
+        timestamp: new Date(Date.now() - 5000).toISOString(),
+      },
+      {
+        id: "7",
+        role: "user" as const,
+        content: "Scale up Node Beta",
+        timestamp: new Date().toISOString(),
+      },
+    ],
+    focusNodes: sampleFocusNodes,
+    quickActions: sampleQuickActions,
+    onPromptSubmit: handlePromptSubmit,
+    onQuickAction: (id) => console.log("Quick action:", id),
+    style: { width: "100%", height: "600px" },
+  },
+};

package/src/three/AgentConsole/AgentConsole.tsx

@@ -0,0 +1,195 @@
+"use client";
+
+/**
+ * AgentConsole - Main conversational agent interface
+ *
+ * Integrates GlyphAvatar, ConsoleChat, QuickActions, and FocusConstellation
+ * into a unified agent interface experience.
+ */
+
+import { Canvas } from "@react-three/fiber";
+import { OrbitControls } from "@react-three/drei";
+import { GlyphAvatar } from "./GlyphAvatar";
+import { ConsoleChat } from "./ConsoleChat";
+import { QuickActions } from "./QuickActions";
+import { FocusConstellation } from "./FocusConstellation";
+import type { AgentConsoleProps, Message, FocusNode, QuickAction } from "./types";
+
+// -----------------------------------------------------------------------------
+// Console Scene (inside Canvas)
+// -----------------------------------------------------------------------------
+
+interface ConsoleSceneProps {
+  agentState: AgentConsoleProps["agentState"];
+  agentMode: AgentConsoleProps["agentMode"];
+  trustTier: AgentConsoleProps["trustTier"];
+  isTyping: boolean;
+  messages: Message[];
+  focusNodes: FocusNode[];
+  quickActions: QuickAction[];
+  focusedNodeId: string | null;
+  onPromptSubmit: (text: string) => void;
+  onFocusNodeClick?: (id: string) => void;
+  onQuickAction?: (actionId: string) => void;
+  onEntityClick?: AgentConsoleProps["onEntityClick"];
+  onAvatarClick?: () => void;
+}
+
+function ConsoleScene({
+  agentState,
+  agentMode,
+  trustTier,
+  isTyping,
+  messages,
+  focusNodes,
+  quickActions,
+  focusedNodeId,
+  onPromptSubmit,
+  onFocusNodeClick,
+  onQuickAction,
+  onEntityClick,
+  onAvatarClick,
+}: ConsoleSceneProps) {
+  return (
+    <>
+      {/* Camera controls */}
+      <OrbitControls
+        enablePan={false}
+        enableZoom={true}
+        minDistance={2}
+        maxDistance={8}
+        maxPolarAngle={Math.PI / 2 + 0.3}
+        autoRotate={false}
+      />
+
+      {/* Lighting */}
+      <ambientLight intensity={0.4} />
+      <directionalLight position={[5, 5, 5]} intensity={0.6} />
+      <directionalLight position={[-5, -5, -5]} intensity={0.2} />
+
+      {/* Central agent avatar */}
+      <GlyphAvatar
+        state={agentState}
+        mode={agentMode}
+        trustTier={trustTier}
+        position={[0, 0, 0]}
+        scale={1}
+        onClick={onAvatarClick}
+      />
+
+      {/* Focus constellation around avatar */}
+      {focusNodes.length > 0 && (
+        <FocusConstellation
+          nodes={focusNodes}
+          focusedId={focusedNodeId}
+          onNodeClick={onFocusNodeClick}
+          radius={1.5}
+          position={[0, 0, 0]}
+        />
+      )}
+
+      {/* Quick actions above avatar */}
+      {quickActions.length > 0 && onQuickAction && (
+        <QuickActions
+          actions={quickActions}
+          onAction={onQuickAction}
+          direction="horizontal"
+          position={[0, 1.2, 0]}
+        />
+      )}
+
+      {/* Chat interface below avatar */}
+      <ConsoleChat
+        messages={messages}
+        isTyping={isTyping}
+        onSubmit={onPromptSubmit}
+        onEntityClick={onEntityClick}
+        position={[0, -1.5, 0]}
+        maxVisibleMessages={8}
+      />
+
+      {/* Subtle grid for grounding */}
+      <gridHelper args={[10, 20, "#1a1a2e", "#1a1a2e"]} position={[0, -2, 0]} />
+    </>
+  );
+}
+
+// -----------------------------------------------------------------------------
+// Agent Console Container
+// -----------------------------------------------------------------------------
+
+export function AgentConsole({
+  agentState,
+  agentMode = "conversational",
+  trustTier = "bronze",
+  isTyping = false,
+  messages = [],
+  focusNodes = [],
+  quickActions = [],
+  focusedNodeId = null,
+  onPromptSubmit,
+  onFocusNodeClick,
+  onQuickAction,
+  onEntityClick,
+  onAvatarClick,
+  className,
+  style,
+}: AgentConsoleProps) {
+  return (
+    <div
+      className={className}
+      style={{
+        position: "relative",
+        width: "100%",
+        height: "100%",
+        background: "linear-gradient(to bottom, #0a0a15, #050510)",
+        ...style,
+      }}
+    >
+      <Canvas
+        camera={{
+          position: [0, 1, 4],
+          fov: 50,
+          near: 0.1,
+          far: 100,
+        }}
+        dpr={[1, 2]}
+      >
+        <ConsoleScene
+          agentState={agentState}
+          agentMode={agentMode}
+          trustTier={trustTier}
+          isTyping={isTyping}
+          messages={messages}
+          focusNodes={focusNodes}
+          quickActions={quickActions}
+          focusedNodeId={focusedNodeId}
+          onPromptSubmit={onPromptSubmit}
+          onFocusNodeClick={onFocusNodeClick}
+          onQuickAction={onQuickAction}
+          onEntityClick={onEntityClick}
+          onAvatarClick={onAvatarClick}
+        />
+      </Canvas>
+
+      {/* State indicator overlay */}
+      <div className="absolute top-4 right-4 bg-black/60 text-white/60 text-xs font-mono p-2 rounded">
+        <div className="flex items-center gap-2">
+          <span
+            className="w-2 h-2 rounded-full"
+            style={{
+              backgroundColor:
+                agentState === "idle" ? "#6366f1" :
+                agentState === "listening" ? "#22c55e" :
+                agentState === "thinking" ? "#eab308" :
+                agentState === "responding" ? "#3b82f6" :
+                "#ef4444",
+            }}
+          />
+          <span>{agentState.toUpperCase()}</span>
+        </div>
+        <div className="text-white/40 mt-1">{agentMode}</div>
+      </div>
+    </div>
+  );
+}