@jungjaehoon/mama-os 0.18.2 → 0.19.0

package/public/viewer/src/utils/api.ts

@@ -156,9 +156,10 @@ export interface ApiAgentToolsConfig {
 }
 
 export type EffortLevel = 'low' | 'medium' | 'high' | 'max';
+export type ApiValidationTriggerType = 'agent_test' | 'delegate_run' | 'system_run' | 'audit';
 
 export interface ApiAgentConfig {
-  backend?: 'claude' | 'codex-mcp';
+  backend?: 'claude' | 'codex' | 'codex-mcp' | 'gemini';
   model?: string;
   effort?: EffortLevel;
   tools?: ApiAgentToolsConfig;
@@ -216,7 +217,7 @@ export interface MultiAgentAgent {
   status?: string;
   model?: string;
   effort?: EffortLevel;
-  backend?: 'claude' | 'codex-mcp';
+  backend?: 'claude' | 'codex' | 'codex-mcp' | 'gemini';
   bot_token?: string;
   slack_bot_token?: string | null;
   slack_app_token?: string | null;
@@ -883,6 +884,159 @@ export class API {
     return this.post(`/api/multi-agent/agents/${encodeURIComponent(agentId)}/stop`, {});
   }
 
+  // =============================================
+  // Agent Management API (Managed Agents pattern)
+  // =============================================
+
+  static async getAgents(): Promise<{ agents: MultiAgentAgent[] }> {
+    return this.get('/api/agents');
+  }
+
+  static async getAgent(
+    agentId: string
+  ): Promise<MultiAgentAgent & { system?: string; version?: number }> {
+    return this.get(`/api/agents/${encodeURIComponent(agentId)}`);
+  }
+
+  static async createAgent(body: {
+    id: string;
+    name: string;
+    model: string;
+    tier: number;
+    system?: string;
+  }): Promise<JsonRecord> {
+    return this.post('/api/agents', body);
+  }
+
+  static async updateAgent(
+    agentId: string,
+    body: { version?: number; changes: Record<string, unknown>; change_note?: string }
+  ): Promise<JsonRecord> {
+    return this.post(`/api/agents/${encodeURIComponent(agentId)}`, body);
+  }
+
+  static async archiveAgent(agentId: string): Promise<JsonRecord> {
+    return this.post(`/api/agents/${encodeURIComponent(agentId)}/archive`, {});
+  }
+
+  static async getAgentVersions(agentId: string): Promise<{ versions: JsonRecord[] }> {
+    return this.get(`/api/agents/${encodeURIComponent(agentId)}/versions`);
+  }
+
+  static async compareAgentVersions(agentId: string, v1: number, v2: number): Promise<JsonRecord> {
+    return this.get(`/api/agents/${encodeURIComponent(agentId)}/versions/${v1}/compare/${v2}`);
+  }
+
+  static async getAgentMetrics(
+    agentId: string,
+    from: string,
+    to: string
+  ): Promise<{ metrics: JsonRecord[] }> {
+    return this.get(`/api/agents/${encodeURIComponent(agentId)}/metrics`, { from, to });
+  }
+
+  static async getAgentActivity(
+    agentId: string,
+    limit = 20
+  ): Promise<{ activity: Array<Record<string, unknown>> }> {
+    return this.get(`/api/agents/${encodeURIComponent(agentId)}/activity?limit=${limit}`);
+  }
+
+  static async getActivitySummary(
+    since: string
+  ): Promise<{ summary: Array<Record<string, unknown>>; alerts: string[] }> {
+    return this.get(`/api/agents/activity-summary?since=${encodeURIComponent(since)}`);
+  }
+
+  // =============================================
+  // Validation API
+  // =============================================
+
+  static async getValidationSummary(
+    agentId: string,
+    triggerType: ApiValidationTriggerType = 'agent_test'
+  ): Promise<{ summary: Record<string, unknown> | null }> {
+    return this.get(
+      `/api/agents/${encodeURIComponent(agentId)}/validation/summary?trigger_type=${encodeURIComponent(triggerType)}`
+    );
+  }
+
+  static async getValidationHistory(
+    agentId: string,
+    limit = 50,
+    triggerType: ApiValidationTriggerType = 'agent_test'
+  ): Promise<{ history: Array<Record<string, unknown>> }> {
+    return this.get(
+      `/api/agents/${encodeURIComponent(agentId)}/validation/history?limit=${limit}&trigger_type=${encodeURIComponent(triggerType)}`
+    );
+  }
+
+  static async getValidationSessionDetail(
+    sessionId: string
+  ): Promise<{ session: Record<string, unknown>; metrics: Array<Record<string, unknown>> }> {
+    return this.get(`/api/validation-sessions/${encodeURIComponent(sessionId)}`);
+  }
+
+  static async approveValidationSession(
+    agentId: string,
+    sessionId: string
+  ): Promise<{ success: boolean }> {
+    return this.post(
+      `/api/agents/${encodeURIComponent(agentId)}/validation/approve?session_id=${encodeURIComponent(sessionId)}`,
+      {}
+    );
+  }
+
+  static async getValidationCompare(
+    agentId: string,
+    sessionId: string,
+    baseline = 'approved'
+  ): Promise<{
+    current: { session: Record<string, unknown>; metrics: Array<Record<string, unknown>> };
+    baseline: { session: Record<string, unknown>; metrics: Array<Record<string, unknown>> } | null;
+    deltas: Array<{
+      name: string;
+      current: number;
+      baseline: number | null;
+      delta: number | null;
+      direction: string;
+    }>;
+  }> {
+    return this.get(
+      `/api/agents/${encodeURIComponent(agentId)}/validation/compare?session=${encodeURIComponent(sessionId)}&baseline=${encodeURIComponent(baseline)}`
+    );
+  }
+
+  // =============================================
+  // UI Command API (SmartStore pattern)
+  // =============================================
+
+  static async getUICommands(): Promise<{
+    commands: Array<{ id?: string; type: string; payload: Record<string, unknown> }>;
+  }> {
+    return this.get('/api/ui/commands');
+  }
+
+  static async ackUICommands(commandIds: string[]): Promise<JsonRecord> {
+    return this.post('/api/ui/commands/ack', {
+      command_ids: commandIds,
+    });
+  }
+
+  static async pushPageContext(
+    route: string,
+    data: Record<string, unknown>,
+    selectedItem?: { type: string; id: string },
+    channelId?: string
+  ): Promise<JsonRecord> {
+    return this.post('/api/ui/page-context', {
+      currentRoute: route,
+      pageData: data,
+      ...(selectedItem ? { selectedItem } : {}),
+      ...(channelId ? { channelId } : {}),
+    });
+  }
+
   // =============================================
   // Metrics / Health API
   // =============================================

package/public/viewer/src/utils/dom.ts

@@ -123,7 +123,12 @@ export function scrollToBottom(container: HTMLElement): void {
  * @param {HTMLTextAreaElement} textarea - Textarea element
  * @param {number} maxRows - Maximum number of rows (default: 5)
  */
-export function autoResizeTextarea(textarea: HTMLTextAreaElement, maxRows = 5): void {
+export function autoResizeTextarea(
+  textarea: HTMLTextAreaElement | HTMLInputElement | null,
+  maxRows = 5
+): void {
+  // Skip for non-textarea elements (e.g. input[type=text] in SmartStore-style panel)
+  if (!textarea || textarea.tagName !== 'TEXTAREA') return;
   // Use requestAnimationFrame to defer resize to the next frame, avoiding layout thrash from rapid input events
   requestAnimationFrame(() => {
     textarea.style.height = 'auto'; // Reset height before measuring

package/public/viewer/src/utils/ui-commands.ts

@@ -0,0 +1,118 @@
+/**
+ * UI Command Polling + Page Context Reporting
+ *
+ * Ported from SmartStore's NavigationContext + Layout command polling pattern.
+ * - startUICommandPolling(): 1s interval, drains commands, executes navigate/notify
+ * - reportPageContext(): sends current page state to agent
+ */
+
+import { API } from './api.js';
+import { showToast } from './dom.js';
+
+type SwitchTabFn = (tab: string, params?: Record<string, string>) => void | Promise<void>;
+
+let polling = false;
+let pollingInterval: ReturnType<typeof setInterval> | null = null;
+let pollInFlight = false;
+const VIEWER_FRONTDOOR_CHANNEL_ID = 'mama_os_main';
+const PAGE_CONTEXT_REPUBLISH_MS = 5000;
+
+type StoredPageContext = {
+  route: string;
+  data: Record<string, unknown>;
+  selectedItem?: { type: string; id: string };
+};
+
+let lastReportedPageContext: StoredPageContext | null = null;
+let lastPageContextPublishAt = 0;
+
+function getViewerChannelId(): string {
+  try {
+    const sessionId = window.localStorage.getItem('mama_chat_session_id');
+    if (sessionId && !sessionId.startsWith('session_')) {
+      return sessionId;
+    }
+  } catch {
+    /* ignore */
+  }
+  return VIEWER_FRONTDOOR_CHANNEL_ID;
+}
+
+export function startUICommandPolling(switchTab: SwitchTabFn): () => void {
+  if (polling) {
+    return () => {};
+  }
+  polling = true;
+
+  pollingInterval = setInterval(async () => {
+    if (pollInFlight) {
+      return;
+    }
+    pollInFlight = true;
+    try {
+      const { commands } = await API.getUICommands();
+      const acknowledgedCommandIds: string[] = [];
+      for (const cmd of commands) {
+        if (cmd.type === 'navigate') {
+          const p = cmd.payload as { route?: string; params?: Record<string, string> };
+          if (p.route) {
+            await switchTab(p.route, p.params);
+            if (cmd.id) {
+              acknowledgedCommandIds.push(cmd.id);
+            }
+          }
+        } else if (cmd.type === 'notify') {
+          const p = cmd.payload as { message?: string };
+          if (p.message) {
+            showToast(p.message);
+            if (cmd.id) {
+              acknowledgedCommandIds.push(cmd.id);
+            }
+          }
+        }
+      }
+
+      if (acknowledgedCommandIds.length > 0) {
+        await API.ackUICommands(acknowledgedCommandIds);
+      }
+
+      if (
+        lastReportedPageContext &&
+        Date.now() - lastPageContextPublishAt >= PAGE_CONTEXT_REPUBLISH_MS
+      ) {
+        lastPageContextPublishAt = Date.now();
+        await API.pushPageContext(
+          lastReportedPageContext.route,
+          lastReportedPageContext.data,
+          lastReportedPageContext.selectedItem,
+          getViewerChannelId()
+        );
+      }
+    } catch {
+      // Silently ignore polling errors (server may be restarting)
+    } finally {
+      pollInFlight = false;
+    }
+  }, 1000);
+
+  return () => {
+    if (pollingInterval) {
+      clearInterval(pollingInterval);
+      pollingInterval = null;
+    }
+    pollInFlight = false;
+    polling = false;
+  };
+}
+
+export function reportPageContext(
+  route: string,
+  data: Record<string, unknown>,
+  selectedItem?: { type: string; id: string }
+): void {
+  lastReportedPageContext = { route, data, selectedItem };
+  lastPageContextPublishAt = Date.now();
+  API.pushPageContext(route, data, selectedItem, getViewerChannelId()).catch(() => {
+    /* ignore */
+  });
+}

package/public/viewer/viewer.css

@@ -1,7 +1,8 @@
 /* ============================================================================
    MAMA Viewer - Brand-Aligned CSS
    Color Palette: Yellow #FFCE00, Lavender #EDDBF7, Black #131313, Blush #FF9999
-   Typography: Fredoka (display) + Nunito (body)
+   Typography: Inter (UI) + Fredoka (markdown headings) + Nunito (chat)
+   CJK Fallback: Noto Sans KR, Noto Sans JP
    ============================================================================ */
 
 /* ============================================================================
@@ -15,7 +16,7 @@ header {
 }
 
 main {
-  min-height: calc(100vh - 56px);
+  min-height: calc(100dvh - 56px);
 }
 
 [data-tab] {
@@ -67,9 +68,13 @@ h4 { font-size: 0.8125rem; font-weight: 500; line-height: 1.4; }
   border-radius: var(--radius-card, 12px);
 }
 
-/* Button touch targets — minimum 32px height (44px recommended for mobile) */
+/* Button touch targets — 44px minimum on mobile per WCAG 2.5.8 */
 button { min-height: 32px; }
 button:not([class*="p-"]):not([class*="px-"]):not([class*="py-"]) { padding: 6px 12px; }
+@media (max-width: 768px) {
+  button { min-height: 44px; }
+  [data-tab] { min-height: 44px; }
+}
 
 /* Floating Chat */
 .animate-slide-up {
@@ -111,11 +116,37 @@ button:not([class*="p-"]):not([class*="px-"]):not([class*="py-"]) { padding: 6px
   will-change: opacity;
 }
 
+/* Right panel mode (SmartStore pattern) — override floating panel sizing */
+#chat-panel-wrapper {
+  transition: width 0.15s ease;
+  height: 100%;
+  overflow: hidden;
+  min-width: 280px;
+}
+#chat-panel-wrapper #chat-panel {
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  max-width: none;
+  max-height: none;
+  resize: none;
+  overflow: hidden;
+  transform: none;
+  will-change: auto;
+}
+#chat-resize-handle-bar {
+  display: none;
+}
+#chat-resize-handle-bar.chat-resize-visible {
+  display: block;
+}
+
+/* Legacy bubble styles (kept for backward compat) */
 #chat-panel.chat-panel-closed {
   opacity: 0;
   pointer-events: none;
 }
-
 #chat-panel.chat-panel-open {
   opacity: 1;
   pointer-events: auto;
@@ -162,6 +193,57 @@ button:not([class*="p-"]):not([class*="px-"]):not([class*="py-"]) { padding: 6px
   background: #D4C4E0;
 }
 
+/* Mobile chat panel overrides — fix height:100% and overflow:hidden from desktop */
+@media (max-width: 767px) {
+  #chat-panel-wrapper {
+    height: auto;
+  }
+  #chat-panel-wrapper #chat-panel {
+    overflow: visible;
+  }
+  /* Mobile chat header — compact + brand aligned */
+  #chat-panel-wrapper.mobile-chat-active #chat-header {
+    padding: 12px 16px;
+    background: linear-gradient(180deg, #fff 0%, #FAFAF8 100%);
+    border-bottom: 1px solid #EDE9E1;
+  }
+  /* Mobile chat input — larger targets, brand colors */
+  #chat-panel-wrapper.mobile-chat-active .p-3 {
+    padding: 12px 16px;
+    background: #FAFAF8;
+    border-top: 1px solid #EDE9E1;
+  }
+  #chat-panel-wrapper.mobile-chat-active #chat-input {
+    background: #fff;
+    border: 1.5px solid #D4C4E0;
+    border-radius: 20px;
+    padding: 10px 16px;
+    font-size: 15px;
+    min-height: 44px;
+  }
+  #chat-panel-wrapper.mobile-chat-active #chat-input:focus {
+    border-color: #FFCE00;
+    box-shadow: 0 0 0 3px rgba(255, 206, 0, 0.15);
+  }
+  /* Mobile action buttons — 44px touch targets */
+  #chat-panel-wrapper.mobile-chat-active #chat-attach,
+  #chat-panel-wrapper.mobile-chat-active #chat-mic,
+  #chat-panel-wrapper.mobile-chat-active #chat-send {
+    width: 44px;
+    height: 44px;
+    border-radius: 50%;
+  }
+  #chat-panel-wrapper.mobile-chat-active #chat-send {
+    background: #FFCE00;
+    box-shadow: 0 2px 8px rgba(255, 206, 0, 0.3);
+  }
+  /* Mobile message bubbles — slightly larger text */
+  #chat-panel-wrapper.mobile-chat-active .chat-message .message-content {
+    font-size: 15px;
+    line-height: 1.5;
+  }
+}
+
 /* Memory viewer mobile layout */
 @media (max-width: 768px) {
   #tab-memory .flex-1.flex.min-h-0.relative {
@@ -372,7 +454,7 @@ button:not([class*="p-"]):not([class*="px-"]):not([class*="py-"]) { padding: 6px
 .chat-message {
   display: flex;
   flex-direction: column;
-  max-width: 80%;
+  max-width: 100%;
   animation: message-appear 0.2s ease-out;
 }
 
@@ -393,22 +475,22 @@ button:not([class*="p-"]):not([class*="px-"]):not([class*="py-"]) { padding: 6px
   box-shadow: 0 4px 12px rgba(255, 206, 0, 0.3);
 }
 
-/* Assistant messages - left aligned, lavender bubble */
+/* Assistant messages - left aligned, white bubble */
 .chat-message.assistant {
   align-self: flex-start;
   align-items: flex-start;
 }
 
 .chat-message.assistant .message-content {
-  background: #F5EBF9;
+  background: #FFFFFF;
   color: #131313;
   padding: 12px 16px;
   border-radius: 20px 20px 20px 4px;
   font-size: 15px;
   line-height: 1.5;
   word-break: break-word;
-  box-shadow: 0 2px 8px rgba(19, 19, 19, 0.08);
-  border: 1px solid #D4C4E0;
+  box-shadow: 0 1px 4px rgba(19, 19, 19, 0.06);
+  border: 1px solid #EDE9E1;
 }
 
 /* System messages - centered, subtle */
@@ -796,7 +878,7 @@ body,
   font-weight: 700;
   border-radius: 9999px;
   box-shadow: 0 4px 20px rgba(255, 206, 0, 0.4);
-  transition: all 0.2s ease;
+  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
   border: none;
   cursor: pointer;
 }
@@ -827,6 +909,19 @@ body,
   box-shadow: 0 8px 32px rgba(19, 19, 19, 0.12);
 }
 
+/* Agent card hover (replaces inline JS handlers) */
+.agent-card:hover {
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  transform: translateY(-1px);
+}
+
+/* Agent form inputs — focus matches chat input style */
+.agent-input:focus {
+  outline: none;
+  border-color: #FFCE00;
+  box-shadow: 0 0 0 3px rgba(255, 206, 0, 0.2);
+}
+
 /* ============================================================================
    INPUT STYLES - Brand aligned
    ============================================================================ */