@elizaos/app-core 2.0.0-alpha.10

package/src/chat/index.ts

@@ -0,0 +1,250 @@
+/**
+ * Chat command utilities — slash command parsing, saved command management,
+ * and the typed command registry.
+ *
+ * Migrated from apps/app/src/chat-commands.ts and command-registry.ts.
+ */
+
+import type { Tab } from "../navigation";
+
+const ROUTINE_CODING_AGENT_RE =
+  /^\[.+?\] (?:Approved:|Responded:|Sent keys:|Turn done, continuing:|Idle for \d+[smh])/;
+
+// ── Saved custom commands ────────────────────────────────────────────────
+
+export const CUSTOM_COMMANDS_STORAGE_KEY = "milady:custom-commands";
+
+export interface SavedCustomCommand {
+  name: string;
+  text: string;
+  createdAt: number;
+}
+
+function isSavedCustomCommand(value: unknown): value is SavedCustomCommand {
+  if (!value || typeof value !== "object") return false;
+  const candidate = value as Record<string, unknown>;
+  return (
+    typeof candidate.name === "string" &&
+    typeof candidate.text === "string" &&
+    typeof candidate.createdAt === "number"
+  );
+}
+
+export function loadSavedCustomCommands(): SavedCustomCommand[] {
+  try {
+    const raw = localStorage.getItem(CUSTOM_COMMANDS_STORAGE_KEY);
+    if (!raw) return [];
+    const parsed = JSON.parse(raw);
+    if (!Array.isArray(parsed)) return [];
+    return parsed.filter(isSavedCustomCommand);
+  } catch {
+    return [];
+  }
+}
+
+export function saveSavedCustomCommands(commands: SavedCustomCommand[]): void {
+  localStorage.setItem(CUSTOM_COMMANDS_STORAGE_KEY, JSON.stringify(commands));
+}
+
+export function appendSavedCustomCommand(command: SavedCustomCommand): void {
+  const existing = loadSavedCustomCommands();
+  existing.push(command);
+  saveSavedCustomCommands(existing);
+}
+
+export function normalizeSlashCommandName(value: string): string {
+  const trimmed = value.trim();
+  if (!trimmed) return "";
+  const withoutSlash = trimmed.startsWith("/") ? trimmed.slice(1) : trimmed;
+  return withoutSlash.trim().toLowerCase();
+}
+
+export function expandSavedCustomCommand(
+  template: string,
+  argsRaw: string,
+): string {
+  const args = argsRaw.trim();
+  if (!args) {
+    return template;
+  }
+  if (template.includes("{{args}}")) {
+    return template.replaceAll("{{args}}", args);
+  }
+  return `${template}\n${args}`;
+}
+
+export function splitCommandArgs(raw: string): string[] {
+  const tokens: string[] = [];
+  const re = /"([^"]*)"|'([^']*)'|(\S+)/g;
+  let match: RegExpExecArray | null = re.exec(raw);
+  while (match) {
+    tokens.push(match[1] ?? match[2] ?? match[3] ?? "");
+    match = re.exec(raw);
+  }
+  return tokens;
+}
+
+export function isRoutineCodingAgentMessage(message: {
+  source?: string;
+  text: string;
+}): boolean {
+  return (
+    message.source === "coding-agent" &&
+    ROUTINE_CODING_AGENT_RE.test(message.text)
+  );
+}
+
+// ── Typed command registry ───────────────────────────────────────────────
+
+export type CommandCategory = "agent" | "navigation" | "refresh" | "utility";
+
+export interface CommandDef {
+  id: string;
+  label: string;
+  category: CommandCategory;
+  /** Keyboard shortcut hint shown in palette / tooltips. */
+  shortcut?: string;
+  /** Extra hint text (e.g., current state). */
+  hint?: string;
+}
+
+export interface CommandItem extends CommandDef {
+  action: () => void;
+}
+
+// Static navigation commands — always present; palette builder binds setTab.
+export const NAV_COMMANDS: readonly { id: string; label: string; tab: Tab }[] =
+  [
+    { id: "nav-chat", label: "Open Chat", tab: "chat" },
+    { id: "nav-apps", label: "Open Apps", tab: "apps" },
+    { id: "nav-character", label: "Open Character", tab: "character" },
+    { id: "nav-triggers", label: "Open Heartbeats", tab: "triggers" },
+    { id: "nav-wallets", label: "Open Wallets", tab: "wallets" },
+    { id: "nav-knowledge", label: "Open Knowledge", tab: "knowledge" },
+    { id: "nav-connectors", label: "Open Connectors", tab: "connectors" },
+    { id: "nav-plugins", label: "Open Plugins", tab: "plugins" },
+    { id: "nav-settings", label: "Open Settings", tab: "settings" },
+    { id: "nav-database", label: "Open Database", tab: "database" },
+    { id: "nav-logs", label: "Open Logs", tab: "logs" },
+    { id: "nav-security", label: "Open Security", tab: "security" },
+  ] as const;
+
+export interface BuildCommandsArgs {
+  agentState: string;
+  activeGameViewerUrl: string;
+  handleStart: () => void;
+
+  handleRestart: () => void;
+  setTab: (tab: Tab) => void;
+  setAppsSubTab: () => void;
+  loadPlugins: () => void;
+  loadSkills: () => void;
+  loadLogs: () => void;
+  loadWorkbench: () => void;
+  handleChatClear: () => void;
+  openBugReport: () => void;
+}
+
+export function buildCommands(args: BuildCommandsArgs): CommandItem[] {
+  const {
+    agentState,
+    activeGameViewerUrl,
+    handleStart,
+
+    handleRestart,
+    setTab,
+    setAppsSubTab,
+    loadPlugins,
+    loadSkills,
+    loadLogs,
+    loadWorkbench,
+    handleChatClear,
+    openBugReport,
+  } = args;
+
+  const commands: CommandItem[] = [];
+  // Agent control
+  if (agentState === "stopped" || agentState === "not_started") {
+    commands.push({
+      id: "start-agent",
+      label: "Start Agent",
+      category: "agent",
+      action: handleStart,
+    });
+  }
+  commands.push({
+    id: "restart-agent",
+    label: "Restart Agent",
+    category: "agent",
+    shortcut: "Ctrl+R",
+    action: handleRestart,
+  });
+
+  // Navigation
+  for (const nav of NAV_COMMANDS) {
+    commands.push({
+      id: nav.id,
+      label: nav.label,
+      category: "navigation",
+      action: () => setTab(nav.tab),
+    });
+  }
+
+  if (activeGameViewerUrl.trim()) {
+    commands.push({
+      id: "nav-current-game",
+      label: "Open Current Game",
+      category: "navigation",
+      action: () => {
+        setTab("apps");
+        setAppsSubTab();
+      },
+    });
+  }
+
+  // Refresh
+  commands.push(
+    {
+      id: "refresh-plugins",
+      label: "Refresh Features",
+      category: "refresh",
+      action: loadPlugins,
+    },
+    {
+      id: "refresh-skills",
+      label: "Refresh Skills",
+      category: "refresh",
+      action: loadSkills,
+    },
+    {
+      id: "refresh-logs",
+      label: "Refresh Logs",
+      category: "refresh",
+      action: loadLogs,
+    },
+    {
+      id: "refresh-workbench",
+      label: "Refresh Workbench",
+      category: "refresh",
+      action: loadWorkbench,
+    },
+  );
+
+  // Utility
+  commands.push(
+    {
+      id: "chat-clear",
+      label: "Clear Chat",
+      category: "utility",
+      action: handleChatClear,
+    },
+    {
+      id: "report-bug",
+      label: "Report Bug",
+      category: "utility",
+      action: openBugReport,
+    },
+  );
+
+  return commands;
+}

package/src/coding/index.ts

@@ -0,0 +1,43 @@
+/**
+ * PTY session hydration — maps server task data to CodingAgentSession objects.
+ *
+ * Migrated from apps/app/src/pty-session-hydrate.ts.
+ */
+
+import type { CodingAgentSession } from "../api/client";
+
+/** Statuses that represent a finished session — excluded from hydration. */
+export const TERMINAL_STATUSES = new Set(["completed", "stopped", "error"]);
+
+/** Shape of a task object returned by the /api/coding-agents/status endpoint. */
+export interface ServerTask {
+  sessionId: string;
+  agentType?: string;
+  label?: string;
+  originalTask?: string;
+  workdir?: string;
+  status?: string;
+  decisionCount?: number;
+  autoResolvedCount?: number;
+}
+
+/**
+ * Filters out terminal sessions and maps server task data to CodingAgentSession objects.
+ * Extracted from AppContext so it can be tested independently.
+ */
+export function mapServerTasksToSessions(
+  tasks: ServerTask[],
+): CodingAgentSession[] {
+  return tasks
+    .filter((t) => !TERMINAL_STATUSES.has(t.status ?? ""))
+    .map((t) => ({
+      sessionId: t.sessionId,
+      agentType: t.agentType ?? "claude",
+      label: t.label ?? t.sessionId,
+      originalTask: t.originalTask ?? "",
+      workdir: t.workdir ?? "",
+      status: (t.status ?? "active") as CodingAgentSession["status"],
+      decisionCount: t.decisionCount ?? 0,
+      autoResolvedCount: t.autoResolvedCount ?? 0,
+    }));
+}

package/src/components/AdvancedPageView.tsx

@@ -0,0 +1,362 @@
+/**
+ * AdvancedPageView — container for advanced configuration sub-tabs.
+ *
+ * Sub-tabs:
+ *   - Plugins: Feature/connector plugin management
+ *   - Skills: Custom agent skills
+ *   - Fine-Tuning: Dataset and model training workflows
+ *   - Trajectories: LLM call viewer and analysis
+ *   - Runtime: Runtime object inspection
+ *   - Databases: Tables/media/vector browser
+ *   - Lifo: Browser-native terminal sandbox
+ *   - Logs: Runtime log viewer
+ */
+
+import {
+  DatabasePageView,
+  LogsPageView,
+  PluginsPageView,
+  RuntimeView,
+  SkillsView,
+} from "@elizaos/app-core/components";
+import type { Tab } from "@elizaos/app-core/navigation";
+import { useApp } from "@elizaos/app-core/state";
+import React, { type ReactNode, useState } from "react";
+import { CustomActionsView } from "./CustomActionsView";
+import { FineTuningView } from "./FineTuningView";
+import { LifoSandboxView } from "./LifoSandboxView";
+import { TrajectoriesView } from "./TrajectoriesView";
+import { TrajectoryDetailView } from "./TrajectoryDetailView";
+
+type SubTab =
+  | "plugins"
+  | "skills"
+  | "fine-tuning"
+  | "trajectories"
+  | "runtime"
+  | "database"
+  | "lifo"
+  | "logs"
+  | "security";
+
+const SUB_TABS: Array<{ id: SubTab; label: string; description: string }> = [
+  { id: "plugins", label: "Plugins", description: "Features and connectors" },
+  { id: "skills", label: "Skills", description: "Custom agent skills" },
+  // {
+  //   id: "fine-tuning",
+  //   label: "Fine-Tuning",
+  //   description: "Dataset and model training workflows",
+  // },
+  {
+    id: "trajectories",
+    label: "Trajectories",
+    description: "LLM call history and analysis",
+  },
+  {
+    id: "runtime",
+    label: "Runtime",
+    description: "Deep runtime object introspection and load order",
+  },
+  {
+    id: "database",
+    label: "Database",
+    description: "Tables, media, and vector browser",
+  },
+  // {
+  //   id: "lifo",
+  //   label: "Lifo",
+  //   description: "Browser-native shell sandbox and file explorer",
+  // },
+  { id: "logs", label: "Logs", description: "Runtime and service logs" },
+];
+
+const MODAL_SUB_TABS = SUB_TABS.filter(
+  (t) => t.id !== "plugins" && t.id !== "skills",
+);
+
+const SUBTAB_ICONS: Record<string, ReactNode> = {
+  actions: (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" />
+    </svg>
+  ),
+  "fine-tuning": (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <line x1="4" y1="21" x2="4" y2="14" />
+      <line x1="4" y1="10" x2="4" y2="3" />
+      <line x1="12" y1="21" x2="12" y2="12" />
+      <line x1="12" y1="8" x2="12" y2="3" />
+      <line x1="20" y1="21" x2="20" y2="16" />
+      <line x1="20" y1="12" x2="20" y2="3" />
+      <line x1="1" y1="14" x2="7" y2="14" />
+      <line x1="9" y1="8" x2="15" y2="8" />
+      <line x1="17" y1="16" x2="23" y2="16" />
+    </svg>
+  ),
+  trajectories: (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <circle cx="6" cy="19" r="3" />
+      <path d="M9 19h8.5a3.5 3.5 0 0 0 0-7h-11a3.5 3.5 0 0 1 0-7H15" />
+      <circle cx="18" cy="5" r="3" />
+    </svg>
+  ),
+  runtime: (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <polyline points="4 17 10 11 4 5" />
+      <line x1="12" y1="19" x2="20" y2="19" />
+    </svg>
+  ),
+  database: (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <ellipse cx="12" cy="5" rx="9" ry="3" />
+      <path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3" />
+      <path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5" />
+    </svg>
+  ),
+  lifo: (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <rect x="2" y="3" width="20" height="14" rx="2" ry="2" />
+      <line x1="8" y1="21" x2="16" y2="21" />
+      <line x1="12" y1="17" x2="12" y2="21" />
+    </svg>
+  ),
+  logs: (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+      <polyline points="14 2 14 8 20 8" />
+      <line x1="16" y1="13" x2="8" y2="13" />
+      <line x1="16" y1="17" x2="8" y2="17" />
+      <polyline points="10 9 9 9 8 9" />
+    </svg>
+  ),
+  security: (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
+    </svg>
+  ),
+};
+
+function mapTabToSubTab(tab: Tab): SubTab {
+  switch (tab) {
+    case "plugins":
+      return "plugins";
+    case "skills":
+      return "skills";
+    case "fine-tuning":
+      return "fine-tuning";
+    case "trajectories":
+      return "trajectories";
+    case "runtime":
+      return "runtime";
+    case "database":
+      return "database";
+    case "lifo":
+      return "lifo";
+    case "logs":
+      return "logs";
+    default:
+      return "plugins";
+  }
+}
+
+export function AdvancedPageView({ inModal }: { inModal?: boolean } = {}) {
+  const { tab, setTab } = useApp();
+  const [selectedTrajectoryId, setSelectedTrajectoryId] = useState<
+    string | null
+  >(null);
+
+  const currentSubTab = mapTabToSubTab(tab);
+  const tabs = inModal ? MODAL_SUB_TABS : SUB_TABS;
+
+  const handleSubTabChange = (subTab: SubTab) => {
+    setSelectedTrajectoryId(null);
+    setTab(subTab as Tab);
+  };
+
+  const renderContent = () => {
+    switch (currentSubTab) {
+      case "plugins":
+        return <PluginsPageView />;
+      case "skills":
+        return <SkillsView />;
+      case "fine-tuning":
+        return <FineTuningView />;
+      case "trajectories":
+        if (selectedTrajectoryId) {
+          return (
+            <TrajectoryDetailView
+              trajectoryId={selectedTrajectoryId}
+              onBack={() => setSelectedTrajectoryId(null)}
+            />
+          );
+        }
+        return (
+          <TrajectoriesView onSelectTrajectory={setSelectedTrajectoryId} />
+        );
+      case "runtime":
+        return <RuntimeView />;
+      case "database":
+        return <DatabasePageView />;
+      case "lifo":
+        return <LifoSandboxView />;
+      case "logs":
+        return <LogsPageView />;
+      default:
+        return inModal ? <CustomActionsView /> : <PluginsPageView />;
+    }
+  };
+
+  return (
+    <div
+      className={
+        inModal ? "settings-modal-layout" : "flex flex-col h-full min-h-0"
+      }
+    >
+      {inModal ? (
+        <nav className="settings-icon-sidebar">
+          {tabs.map((subTab) => (
+            <button
+              key={subTab.id}
+              type="button"
+              className={`advanced-subtab-btn settings-icon-btn ${currentSubTab === subTab.id ? "is-active" : ""}`}
+              onClick={() => handleSubTabChange(subTab.id)}
+              title={subTab.description}
+            >
+              {SUBTAB_ICONS[subTab.id]}
+              <span className="settings-icon-label">{subTab.label}</span>
+            </button>
+          ))}
+        </nav>
+      ) : (
+        <div className="mb-4 shrink-0">
+          <div className="flex gap-1 border-b border-border">
+            {tabs.map((subTab) => {
+              const isActive = currentSubTab === subTab.id;
+              return (
+                <button
+                  type="button"
+                  key={subTab.id}
+                  className={`advanced-subtab-btn px-4 py-2 text-xs font-medium border-b-2 -mb-px transition-colors ${
+                    isActive
+                      ? "border-accent text-txt"
+                      : "border-transparent text-muted hover:text-txt hover:border-border"
+                  }`}
+                  onClick={() => handleSubTabChange(subTab.id)}
+                  title={subTab.description}
+                >
+                  {subTab.label}
+                </button>
+              );
+            })}
+          </div>
+        </div>
+      )}
+
+      <div
+        className={
+          inModal ? "settings-content-area" : "flex-1 min-h-0 overflow-y-auto"
+        }
+        style={
+          inModal
+            ? ({
+                "--accent": "#7b8fb5",
+                "--surface": "rgba(255, 255, 255, 0.06)",
+                "--s-accent": "#7b8fb5",
+                "--s-text-txt": "#7b8fb5",
+                "--s-accent-glow": "rgba(123, 143, 181, 0.35)",
+                "--s-accent-subtle": "rgba(123, 143, 181, 0.12)",
+                "--s-grid-line": "rgba(123, 143, 181, 0.02)",
+                "--s-glow-edge": "rgba(123, 143, 181, 0.08)",
+              } as React.CSSProperties)
+            : undefined
+        }
+      >
+        {inModal ? (
+          <div className="settings-section-pane pt-4">{renderContent()}</div>
+        ) : (
+          renderContent()
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/AgentActivityBox.tsx

@@ -0,0 +1,49 @@
+import type { CodingAgentSession } from "@elizaos/app-core/api";
+
+/** Status dot color classes for coding-agent activity. */
+const STATUS_DOT: Record<string, string> = {
+  active: "bg-ok",
+  tool_running: "bg-accent",
+  blocked: "bg-warn",
+  error: "bg-danger",
+};
+
+const PULSE_STATUSES = new Set(["active", "tool_running"]);
+
+/** Derive activity text for sessions hydrated from the server (no lastActivity yet). */
+function deriveActivity(s: CodingAgentSession): string {
+  if (s.status === "tool_running" && s.toolDescription) {
+    return `Running ${s.toolDescription}`.slice(0, 60);
+  }
+  if (s.status === "blocked") return "Waiting for input";
+  if (s.status === "error") return "Error";
+  return "Running";
+}
+
+interface AgentActivityBoxProps {
+  sessions: CodingAgentSession[];
+}
+
+export function AgentActivityBox({ sessions }: AgentActivityBoxProps) {
+  if (!sessions || sessions.length === 0) return null;
+
+  return (
+    <div className="border-t border-border px-3 py-1.5 space-y-0.5 z-[1]">
+      {sessions.map((s) => (
+        <div key={s.sessionId} className="flex items-center gap-1.5 min-w-0">
+          <span
+            className={`inline-block w-1.5 h-1.5 rounded-full shrink-0 ${
+              STATUS_DOT[s.status] ?? "bg-muted"
+            }${PULSE_STATUSES.has(s.status) ? " animate-pulse" : ""}`}
+          />
+          <span className="text-[11px] font-medium text-txt max-w-[120px] truncate shrink-0">
+            {s.label}
+          </span>
+          <span className="text-[11px] text-muted truncate min-w-0">
+            {s.lastActivity ?? deriveActivity(s)}
+          </span>
+        </div>
+      ))}
+    </div>
+  );
+}