@burdenoff/microfe-vibecontrols 2026.623.1 → 2026.623.3

package/dist/components/actions/ActionCard.js

@@ -52,7 +52,7 @@ function b({ action: b, onExecute: x, onEdit: S, onDuplicate: C, onDelete: w, on
 								e.stopPropagation(), x(b.id);
 							},
 							disabled: A,
-							className: "p-1.5 rounded-md hover:bg-status-success-bg/20 text-status-success-text transition-colors disabled:opacity-50",
+							className: "p-1.5 rounded-md hover:bg-status-success-bg-subtle text-status-success-text transition-colors disabled:opacity-50",
 							title: P("vibecontrols.actions.card.execute", "Execute"),
 							children: /* @__PURE__ */ v(m, { size: 14 })
 						}),
@@ -106,7 +106,7 @@ function b({ action: b, onExecute: x, onEdit: S, onDuplicate: C, onDelete: w, on
 							onClick: (e) => {
 								e.stopPropagation(), w(b.id);
 							},
-							className: "p-1.5 rounded-md hover:bg-status-error-bg/20 text-status-error-text transition-colors",
+							className: "p-1.5 rounded-md hover:bg-status-error-bg-subtle text-status-error-text transition-colors",
 							title: P("vibecontrols.actions.card.delete", "Delete"),
 							children: /* @__PURE__ */ v(h, { size: 14 })
 						})

package/dist/components/actions/ActionCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionCard.js","names":[],"sources":["../../../src/components/actions/ActionCard.tsx"],"sourcesContent":["import { Play, Pencil, Copy, Trash2, Clock, Hash, CalendarClock, AlarmClock } from 'lucide-react';\nimport { motion, useReducedMotion } from 'framer-motion';\nimport { ActionTypeBadge, TriggerTypeBadge, SourceTypeBadge } from './ActionTypeBadge';\nimport { SelectionCheckbox } from '../shared/SelectionCheckbox';\nimport { EntityVibeLinkControl } from '../shared/EntityVibeLinkControl';\nimport { EntityShareButton } from '../sharing';\nimport { useTr } from '../../shared/hooks/useTr';\nimport { VibeEntityType, VibeVisibility } from '@/generated/wspace-types';\n\ninterface ActionCardAction {\n  id: string;\n  name: string;\n  displayName?: string | null;\n  description?: string | null;\n  actionType: string;\n  sourceType?: string | null;\n  triggerType: string;\n  category?: string | null;\n  tags?: string[] | null;\n  executionCount?: number | null;\n  lastExecutedAt?: string | null;\n  confirmationRequired?: boolean;\n  vibeId?: string | null;\n  visibility?: VibeVisibility | null;\n}\n\ninterface ActionCardProps {\n  action: ActionCardAction;\n  onExecute: (id: string) => void;\n  onEdit: (id: string) => void;\n  onDuplicate: (id: string) => void;\n  onDelete: (id: string) => void;\n  onSchedule?: (id: string) => void;\n  onAddToCalendar?: (id: string) => void;\n  canUpdate: boolean;\n  canDelete: boolean;\n  canExecute: boolean;\n  isExecuting?: boolean;\n  selected?: boolean;\n  onToggleSelect?: (checked: boolean) => void;\n}\n\nexport function ActionCard({\n  action,\n  onExecute,\n  onEdit,\n  onDuplicate,\n  onDelete,\n  onSchedule,\n  onAddToCalendar,\n  canUpdate,\n  canDelete,\n  canExecute,\n  isExecuting = false,\n  selected = false,\n  onToggleSelect,\n}: ActionCardProps) {\n  const shouldReduceMotion = useReducedMotion();\n  const tr = useTr();\n\n  const formatDate = (dateStr: string | null | undefined) => {\n    if (!dateStr) return tr('vibecontrols.actions.card.never', 'Never');\n    const date = new Date(dateStr);\n    const now = new Date();\n    const diffMs = now.getTime() - date.getTime();\n    const diffMin = Math.floor(diffMs / 60000);\n    if (diffMin < 1) return tr('vibecontrols.actions.card.justNow', 'Just now');\n    if (diffMin < 60)\n      return tr('vibecontrols.actions.card.minutesAgo', '{{count}}m ago', { count: diffMin });\n    const diffHr = Math.floor(diffMin / 60);\n    if (diffHr < 24)\n      return tr('vibecontrols.actions.card.hoursAgo', '{{count}}h ago', { count: diffHr });\n    const diffDays = Math.floor(diffHr / 24);\n    if (diffDays < 7) return `${diffDays}d ago`;\n    return date.toLocaleDateString();\n  };\n\n  return (\n    <motion.div\n      className={`bg-bg-surface border rounded-lg p-4 hover:border-border-strong transition-colors group ${\n        selected\n          ? 'border-action-primary-bg ring-1 ring-action-primary-bg/25'\n          : 'border-border-default'\n      }`}\n      whileHover={\n        shouldReduceMotion\n          ? undefined\n          : { y: -2, boxShadow: '0 4px 12px var(--color-border-default)' }\n      }\n      transition={{ duration: 0.15 }}\n      layout\n      role=\"group\"\n      aria-label={`Action: ${action.displayName || action.name}`}\n    >\n      {/* Header */}\n      <div className=\"flex items-start justify-between gap-3 mb-3\">\n        <div className=\"flex items-start gap-3 min-w-0 flex-1\">\n          {onToggleSelect && (\n            <div onClick={(event) => event.stopPropagation()}>\n              <SelectionCheckbox\n                checked={selected}\n                onChange={onToggleSelect}\n                ariaLabel={`Select action ${action.displayName || action.name}`}\n              />\n            </div>\n          )}\n          <div className=\"min-w-0 flex-1\">\n            <h3 className=\"font-semibold text-text-primary truncate\">\n              {action.displayName || action.name}\n            </h3>\n            {action.description && (\n              <p className=\"text-sm text-text-secondary mt-0.5 line-clamp-2\">\n                {action.description}\n              </p>\n            )}\n          </div>\n        </div>\n        {/* Action buttons */}\n        <div className=\"flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity flex-shrink-0\">\n          {canExecute && (\n            <button\n              type=\"button\"\n              onClick={(event) => {\n                event.stopPropagation();\n                onExecute(action.id);\n              }}\n              disabled={isExecuting}\n              className=\"p-1.5 rounded-md hover:bg-status-success-bg/20 text-status-success-text transition-colors disabled:opacity-50\"\n              title={tr('vibecontrols.actions.card.execute', 'Execute')}\n            >\n              <Play size={14} />\n            </button>\n          )}\n          {canUpdate && (\n            <button\n              type=\"button\"\n              onClick={(event) => {\n                event.stopPropagation();\n                onEdit(action.id);\n              }}\n              className=\"p-1.5 rounded-md hover:bg-bg-elevated text-text-secondary transition-colors\"\n              title={tr('vibecontrols.actions.card.edit', 'Edit')}\n            >\n              <Pencil size={14} />\n            </button>\n          )}\n          {onSchedule && (\n            <button\n              type=\"button\"\n              onClick={(event) => {\n                event.stopPropagation();\n                onSchedule(action.id);\n              }}\n              className=\"p-1.5 rounded-md hover:bg-bg-elevated text-text-secondary transition-colors\"\n              title={tr('vibecontrols.actions.card.schedule', 'Schedule this action')}\n            >\n              <AlarmClock size={14} />\n            </button>\n          )}\n          {onAddToCalendar && (\n            <button\n              type=\"button\"\n              onClick={(event) => {\n                event.stopPropagation();\n                onAddToCalendar(action.id);\n              }}\n              className=\"p-1.5 rounded-md hover:bg-bg-elevated text-text-secondary transition-colors\"\n              title={tr('vibecontrols.actions.card.addToCalendar', 'Add to calendar')}\n            >\n              <CalendarClock size={14} />\n            </button>\n          )}\n          <button\n            type=\"button\"\n            onClick={(event) => {\n              event.stopPropagation();\n              onDuplicate(action.id);\n            }}\n            className=\"p-1.5 rounded-md hover:bg-bg-elevated text-text-secondary transition-colors\"\n            title={tr('vibecontrols.actions.card.duplicate', 'Duplicate')}\n          >\n            <Copy size={14} />\n          </button>\n          <EntityShareButton\n            entity=\"action\"\n            resource={{\n              id: action.id,\n              name: action.displayName || action.name,\n              vibeId: action.vibeId ?? null,\n            }}\n            label={tr('vibecontrols.actions.card.share', 'Share')}\n          />\n          {canDelete && (\n            <button\n              type=\"button\"\n              onClick={(event) => {\n                event.stopPropagation();\n                onDelete(action.id);\n              }}\n              className=\"p-1.5 rounded-md hover:bg-status-error-bg/20 text-status-error-text transition-colors\"\n              title={tr('vibecontrols.actions.card.delete', 'Delete')}\n            >\n              <Trash2 size={14} />\n            </button>\n          )}\n        </div>\n      </div>\n\n      {/* Badges */}\n      <div className=\"flex flex-wrap items-center gap-1.5 mb-3\">\n        <ActionTypeBadge type={action.actionType} />\n        <TriggerTypeBadge type={action.triggerType} />\n        {action.sourceType && <SourceTypeBadge type={action.sourceType} />}\n      </div>\n\n      {/* Linked vibe — map / unmap this action to a vibe */}\n      <div className=\"mb-3\" onClick={(event) => event.stopPropagation()}>\n        <EntityVibeLinkControl\n          entityType={VibeEntityType.Action}\n          entityId={action.id}\n          currentVibeId={action.vibeId ?? null}\n          currentVisibility={action.visibility ?? null}\n          refetchQueries={['ListActions']}\n        />\n      </div>\n\n      {/* Category and Tags */}\n      {(action.category || (action.tags && action.tags.length > 0)) && (\n        <div className=\"flex flex-wrap items-center gap-1.5 mb-3\">\n          {action.category && (\n            <span className=\"text-xs px-1.5 py-0.5 rounded bg-bg-sunken text-text-secondary\">\n              {action.category}\n            </span>\n          )}\n          {action.tags?.map((tag) => (\n            <span\n              key={tag}\n              className=\"text-xs px-1.5 py-0.5 rounded bg-bg-sunken text-text-placeholder\"\n            >\n              #{tag}\n            </span>\n          ))}\n        </div>\n      )}\n\n      {/* Stats */}\n      <div className=\"flex items-center gap-4 text-xs text-text-placeholder\">\n        <span className=\"inline-flex items-center gap-1\">\n          <Hash size={12} />\n          {tr('vibecontrols.actions.card.executionRuns', '{{count}} runs', {\n            count: action.executionCount ?? 0,\n          })}\n        </span>\n        <span className=\"inline-flex items-center gap-1\">\n          <Clock size={12} />\n          {formatDate(action.lastExecutedAt)}\n        </span>\n      </div>\n    </motion.div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"ActionCard.js","names":[],"sources":["../../../src/components/actions/ActionCard.tsx"],"sourcesContent":["import { Play, Pencil, Copy, Trash2, Clock, Hash, CalendarClock, AlarmClock } from 'lucide-react';\nimport { motion, useReducedMotion } from 'framer-motion';\nimport { ActionTypeBadge, TriggerTypeBadge, SourceTypeBadge } from './ActionTypeBadge';\nimport { SelectionCheckbox } from '../shared/SelectionCheckbox';\nimport { EntityVibeLinkControl } from '../shared/EntityVibeLinkControl';\nimport { EntityShareButton } from '../sharing';\nimport { useTr } from '../../shared/hooks/useTr';\nimport { VibeEntityType, VibeVisibility } from '@/generated/wspace-types';\n\ninterface ActionCardAction {\n  id: string;\n  name: string;\n  displayName?: string | null;\n  description?: string | null;\n  actionType: string;\n  sourceType?: string | null;\n  triggerType: string;\n  category?: string | null;\n  tags?: string[] | null;\n  executionCount?: number | null;\n  lastExecutedAt?: string | null;\n  confirmationRequired?: boolean;\n  vibeId?: string | null;\n  visibility?: VibeVisibility | null;\n}\n\ninterface ActionCardProps {\n  action: ActionCardAction;\n  onExecute: (id: string) => void;\n  onEdit: (id: string) => void;\n  onDuplicate: (id: string) => void;\n  onDelete: (id: string) => void;\n  onSchedule?: (id: string) => void;\n  onAddToCalendar?: (id: string) => void;\n  canUpdate: boolean;\n  canDelete: boolean;\n  canExecute: boolean;\n  isExecuting?: boolean;\n  selected?: boolean;\n  onToggleSelect?: (checked: boolean) => void;\n}\n\nexport function ActionCard({\n  action,\n  onExecute,\n  onEdit,\n  onDuplicate,\n  onDelete,\n  onSchedule,\n  onAddToCalendar,\n  canUpdate,\n  canDelete,\n  canExecute,\n  isExecuting = false,\n  selected = false,\n  onToggleSelect,\n}: ActionCardProps) {\n  const shouldReduceMotion = useReducedMotion();\n  const tr = useTr();\n\n  const formatDate = (dateStr: string | null | undefined) => {\n    if (!dateStr) return tr('vibecontrols.actions.card.never', 'Never');\n    const date = new Date(dateStr);\n    const now = new Date();\n    const diffMs = now.getTime() - date.getTime();\n    const diffMin = Math.floor(diffMs / 60000);\n    if (diffMin < 1) return tr('vibecontrols.actions.card.justNow', 'Just now');\n    if (diffMin < 60)\n      return tr('vibecontrols.actions.card.minutesAgo', '{{count}}m ago', { count: diffMin });\n    const diffHr = Math.floor(diffMin / 60);\n    if (diffHr < 24)\n      return tr('vibecontrols.actions.card.hoursAgo', '{{count}}h ago', { count: diffHr });\n    const diffDays = Math.floor(diffHr / 24);\n    if (diffDays < 7) return `${diffDays}d ago`;\n    return date.toLocaleDateString();\n  };\n\n  return (\n    <motion.div\n      className={`bg-bg-surface border rounded-lg p-4 hover:border-border-strong transition-colors group ${\n        selected\n          ? 'border-action-primary-bg ring-1 ring-action-primary-bg/25'\n          : 'border-border-default'\n      }`}\n      whileHover={\n        shouldReduceMotion\n          ? undefined\n          : { y: -2, boxShadow: '0 4px 12px var(--color-border-default)' }\n      }\n      transition={{ duration: 0.15 }}\n      layout\n      role=\"group\"\n      aria-label={`Action: ${action.displayName || action.name}`}\n    >\n      {/* Header */}\n      <div className=\"flex items-start justify-between gap-3 mb-3\">\n        <div className=\"flex items-start gap-3 min-w-0 flex-1\">\n          {onToggleSelect && (\n            <div onClick={(event) => event.stopPropagation()}>\n              <SelectionCheckbox\n                checked={selected}\n                onChange={onToggleSelect}\n                ariaLabel={`Select action ${action.displayName || action.name}`}\n              />\n            </div>\n          )}\n          <div className=\"min-w-0 flex-1\">\n            <h3 className=\"font-semibold text-text-primary truncate\">\n              {action.displayName || action.name}\n            </h3>\n            {action.description && (\n              <p className=\"text-sm text-text-secondary mt-0.5 line-clamp-2\">\n                {action.description}\n              </p>\n            )}\n          </div>\n        </div>\n        {/* Action buttons */}\n        <div className=\"flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity flex-shrink-0\">\n          {canExecute && (\n            <button\n              type=\"button\"\n              onClick={(event) => {\n                event.stopPropagation();\n                onExecute(action.id);\n              }}\n              disabled={isExecuting}\n              className=\"p-1.5 rounded-md hover:bg-status-success-bg-subtle text-status-success-text transition-colors disabled:opacity-50\"\n              title={tr('vibecontrols.actions.card.execute', 'Execute')}\n            >\n              <Play size={14} />\n            </button>\n          )}\n          {canUpdate && (\n            <button\n              type=\"button\"\n              onClick={(event) => {\n                event.stopPropagation();\n                onEdit(action.id);\n              }}\n              className=\"p-1.5 rounded-md hover:bg-bg-elevated text-text-secondary transition-colors\"\n              title={tr('vibecontrols.actions.card.edit', 'Edit')}\n            >\n              <Pencil size={14} />\n            </button>\n          )}\n          {onSchedule && (\n            <button\n              type=\"button\"\n              onClick={(event) => {\n                event.stopPropagation();\n                onSchedule(action.id);\n              }}\n              className=\"p-1.5 rounded-md hover:bg-bg-elevated text-text-secondary transition-colors\"\n              title={tr('vibecontrols.actions.card.schedule', 'Schedule this action')}\n            >\n              <AlarmClock size={14} />\n            </button>\n          )}\n          {onAddToCalendar && (\n            <button\n              type=\"button\"\n              onClick={(event) => {\n                event.stopPropagation();\n                onAddToCalendar(action.id);\n              }}\n              className=\"p-1.5 rounded-md hover:bg-bg-elevated text-text-secondary transition-colors\"\n              title={tr('vibecontrols.actions.card.addToCalendar', 'Add to calendar')}\n            >\n              <CalendarClock size={14} />\n            </button>\n          )}\n          <button\n            type=\"button\"\n            onClick={(event) => {\n              event.stopPropagation();\n              onDuplicate(action.id);\n            }}\n            className=\"p-1.5 rounded-md hover:bg-bg-elevated text-text-secondary transition-colors\"\n            title={tr('vibecontrols.actions.card.duplicate', 'Duplicate')}\n          >\n            <Copy size={14} />\n          </button>\n          <EntityShareButton\n            entity=\"action\"\n            resource={{\n              id: action.id,\n              name: action.displayName || action.name,\n              vibeId: action.vibeId ?? null,\n            }}\n            label={tr('vibecontrols.actions.card.share', 'Share')}\n          />\n          {canDelete && (\n            <button\n              type=\"button\"\n              onClick={(event) => {\n                event.stopPropagation();\n                onDelete(action.id);\n              }}\n              className=\"p-1.5 rounded-md hover:bg-status-error-bg-subtle text-status-error-text transition-colors\"\n              title={tr('vibecontrols.actions.card.delete', 'Delete')}\n            >\n              <Trash2 size={14} />\n            </button>\n          )}\n        </div>\n      </div>\n\n      {/* Badges */}\n      <div className=\"flex flex-wrap items-center gap-1.5 mb-3\">\n        <ActionTypeBadge type={action.actionType} />\n        <TriggerTypeBadge type={action.triggerType} />\n        {action.sourceType && <SourceTypeBadge type={action.sourceType} />}\n      </div>\n\n      {/* Linked vibe — map / unmap this action to a vibe */}\n      <div className=\"mb-3\" onClick={(event) => event.stopPropagation()}>\n        <EntityVibeLinkControl\n          entityType={VibeEntityType.Action}\n          entityId={action.id}\n          currentVibeId={action.vibeId ?? null}\n          currentVisibility={action.visibility ?? null}\n          refetchQueries={['ListActions']}\n        />\n      </div>\n\n      {/* Category and Tags */}\n      {(action.category || (action.tags && action.tags.length > 0)) && (\n        <div className=\"flex flex-wrap items-center gap-1.5 mb-3\">\n          {action.category && (\n            <span className=\"text-xs px-1.5 py-0.5 rounded bg-bg-sunken text-text-secondary\">\n              {action.category}\n            </span>\n          )}\n          {action.tags?.map((tag) => (\n            <span\n              key={tag}\n              className=\"text-xs px-1.5 py-0.5 rounded bg-bg-sunken text-text-placeholder\"\n            >\n              #{tag}\n            </span>\n          ))}\n        </div>\n      )}\n\n      {/* Stats */}\n      <div className=\"flex items-center gap-4 text-xs text-text-placeholder\">\n        <span className=\"inline-flex items-center gap-1\">\n          <Hash size={12} />\n          {tr('vibecontrols.actions.card.executionRuns', '{{count}} runs', {\n            count: action.executionCount ?? 0,\n          })}\n        </span>\n        <span className=\"inline-flex items-center gap-1\">\n          <Clock size={12} />\n          {formatDate(action.lastExecutedAt)}\n        </span>\n      </div>\n    </motion.div>\n  );\n}\n"],"mappings":"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"}

package/dist/components/actions/ActionTypeBadge.js

@@ -10,7 +10,7 @@ var s = {
 	},
 	SCRIPT: {
 		label: "Script",
-		color: "bg-accent-purple-subtle text-accent-purple border-accent-purple/20",
+		color: "bg-accent-purple-subtle text-text-primary border-accent-purple/20",
 		icon: t
 	},
 	WEBHOOK: {

package/dist/components/actions/ActionTypeBadge.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionTypeBadge.js","names":[],"sources":["../../../src/components/actions/ActionTypeBadge.tsx"],"sourcesContent":["import { Terminal, FileCode, Globe, GitBranch } from 'lucide-react';\nimport { useTr } from '../../shared/hooks/useTr';\n\nconst ACTION_TYPE_CONFIG: Record<string, { label: string; color: string; icon: typeof Terminal }> =\n  {\n    COMMAND: {\n      label: 'Command',\n      color: 'bg-accent-blue-subtle text-accent-blue border-accent-blue/20',\n      icon: Terminal,\n    },\n    SCRIPT: {\n      label: 'Script',\n      color: 'bg-accent-purple-subtle text-accent-purple border-accent-purple/20',\n      icon: FileCode,\n    },\n    WEBHOOK: {\n      label: 'Webhook',\n      color: 'bg-status-success-bg-subtle text-status-success-text border-status-success-border/20',\n      icon: Globe,\n    },\n    WORKFLOW: {\n      label: 'Workflow',\n      color: 'bg-bg-sunken text-text-secondary border-border-default',\n      icon: GitBranch,\n    },\n  };\n\nconst SOURCE_TYPE_CONFIG: Record<string, { label: string; color: string }> = {\n  USER_CREATED: { label: 'Custom', color: 'bg-bg-sunken text-text-secondary' },\n  STORE_INSTALLED: {\n    label: 'Store',\n    color: 'bg-status-warning-bg-subtle text-status-warning-text',\n  },\n};\n\nconst TRIGGER_TYPE_CONFIG: Record<string, { label: string; color: string }> = {\n  MANUAL: { label: 'Manual', color: 'bg-bg-sunken text-text-secondary' },\n  SCHEDULED: { label: 'Scheduled', color: 'bg-status-info-bg-subtle text-status-info-text' },\n  EVENT: { label: 'Event', color: 'bg-status-warning-bg-subtle text-status-warning-text' },\n  ON_DEMAND: { label: 'On Demand', color: 'bg-bg-sunken text-text-secondary' },\n};\n\ninterface BadgeProps {\n  type: string;\n  size?: 'sm' | 'md';\n}\n\nexport function ActionTypeBadge({ type, size = 'sm' }: BadgeProps) {\n  const tr = useTr();\n  const config = ACTION_TYPE_CONFIG[type] || ACTION_TYPE_CONFIG.COMMAND;\n  const Icon = config.icon;\n  const sizeClass = size === 'sm' ? 'text-xs px-1.5 py-0.5' : 'text-sm px-2 py-1';\n  const labelKey = `vibecontrols.actions.typeBadge.${type.toLowerCase()}`;\n  return (\n    <span\n      className={`inline-flex items-center gap-1 font-medium rounded-md border ${config.color} ${sizeClass}`}\n    >\n      <Icon size={size === 'sm' ? 12 : 14} />\n      {tr(labelKey, config.label)}\n    </span>\n  );\n}\n\nexport function SourceTypeBadge({ type, size = 'sm' }: BadgeProps) {\n  const tr = useTr();\n  const config = SOURCE_TYPE_CONFIG[type] || SOURCE_TYPE_CONFIG.USER_CREATED;\n  const sizeClass = size === 'sm' ? 'text-xs px-1.5 py-0.5' : 'text-sm px-2 py-1';\n  const labelKey = `vibecontrols.actions.sourceBadge.${type.toLowerCase()}`;\n  return (\n    <span\n      className={`inline-flex items-center font-medium rounded-md ${config.color} ${sizeClass}`}\n    >\n      {tr(labelKey, config.label)}\n    </span>\n  );\n}\n\nexport function TriggerTypeBadge({ type, size = 'sm' }: BadgeProps) {\n  const tr = useTr();\n  const config = TRIGGER_TYPE_CONFIG[type] || TRIGGER_TYPE_CONFIG.MANUAL;\n  const sizeClass = size === 'sm' ? 'text-xs px-1.5 py-0.5' : 'text-sm px-2 py-1';\n  const labelKey = `vibecontrols.actions.triggerBadge.${type.toLowerCase()}`;\n  return (\n    <span\n      className={`inline-flex items-center font-medium rounded-md ${config.color} ${sizeClass}`}\n    >\n      {tr(labelKey, config.label)}\n    </span>\n  );\n}\n"],"mappings":";;;;AAGA,IAAM,IACJ;CACE,SAAS;EACP,OAAO;EACP,OAAO;EACP,MAAM;EACP;CACD,QAAQ;EACN,OAAO;EACP,OAAO;EACP,MAAM;EACP;CACD,SAAS;EACP,OAAO;EACP,OAAO;EACP,MAAM;EACP;CACD,UAAU;EACR,OAAO;EACP,OAAO;EACP,MAAM;EACP;CACF,EAEG,IAAuE;CAC3E,cAAc;EAAE,OAAO;EAAU,OAAO;EAAoC;CAC5E,iBAAiB;EACf,OAAO;EACP,OAAO;EACR;CACF,EAEK,IAAwE;CAC5E,QAAQ;EAAE,OAAO;EAAU,OAAO;EAAoC;CACtE,WAAW;EAAE,OAAO;EAAa,OAAO;EAAkD;CAC1F,OAAO;EAAE,OAAO;EAAS,OAAO;EAAwD;CACxF,WAAW;EAAE,OAAO;EAAa,OAAO;EAAoC;CAC7E;AAOD,SAAgB,EAAgB,EAAE,SAAM,UAAO,QAAoB;CACjE,IAAM,IAAK,GAAO,EACZ,IAAS,EAAmB,MAAS,EAAmB,SACxD,IAAO,EAAO,MACd,IAAY,MAAS,OAAO,0BAA0B,qBACtD,IAAW,kCAAkC,EAAK,aAAa;AACrE,QACE,kBAAC,QAAD;EACE,WAAW,gEAAgE,EAAO,MAAM,GAAG;YAD7F,CAGE,kBAAC,GAAD,EAAM,MAAM,MAAS,OAAO,KAAK,IAAM,CAAA,EACtC,EAAG,GAAU,EAAO,MAAM,CACtB;;;AAIX,SAAgB,EAAgB,EAAE,SAAM,UAAO,QAAoB;CACjE,IAAM,IAAK,GAAO,EACZ,IAAS,EAAmB,MAAS,EAAmB,cACxD,IAAY,MAAS,OAAO,0BAA0B,qBACtD,IAAW,oCAAoC,EAAK,aAAa;AACvE,QACE,kBAAC,QAAD;EACE,WAAW,mDAAmD,EAAO,MAAM,GAAG;YAE7E,EAAG,GAAU,EAAO,MAAM;EACtB,CAAA;;AAIX,SAAgB,EAAiB,EAAE,SAAM,UAAO,QAAoB;CAClE,IAAM,IAAK,GAAO,EACZ,IAAS,EAAoB,MAAS,EAAoB,QAC1D,IAAY,MAAS,OAAO,0BAA0B,qBACtD,IAAW,qCAAqC,EAAK,aAAa;AACxE,QACE,kBAAC,QAAD;EACE,WAAW,mDAAmD,EAAO,MAAM,GAAG;YAE7E,EAAG,GAAU,EAAO,MAAM;EACtB,CAAA"}
+{"version":3,"file":"ActionTypeBadge.js","names":[],"sources":["../../../src/components/actions/ActionTypeBadge.tsx"],"sourcesContent":["import { Terminal, FileCode, Globe, GitBranch } from 'lucide-react';\nimport { useTr } from '../../shared/hooks/useTr';\n\nconst ACTION_TYPE_CONFIG: Record<string, { label: string; color: string; icon: typeof Terminal }> =\n  {\n    COMMAND: {\n      label: 'Command',\n      color: 'bg-accent-blue-subtle text-accent-blue border-accent-blue/20',\n      icon: Terminal,\n    },\n    SCRIPT: {\n      label: 'Script',\n      color: 'bg-accent-purple-subtle text-text-primary border-accent-purple/20',\n      icon: FileCode,\n    },\n    WEBHOOK: {\n      label: 'Webhook',\n      color: 'bg-status-success-bg-subtle text-status-success-text border-status-success-border/20',\n      icon: Globe,\n    },\n    WORKFLOW: {\n      label: 'Workflow',\n      color: 'bg-bg-sunken text-text-secondary border-border-default',\n      icon: GitBranch,\n    },\n  };\n\nconst SOURCE_TYPE_CONFIG: Record<string, { label: string; color: string }> = {\n  USER_CREATED: { label: 'Custom', color: 'bg-bg-sunken text-text-secondary' },\n  STORE_INSTALLED: {\n    label: 'Store',\n    color: 'bg-status-warning-bg-subtle text-status-warning-text',\n  },\n};\n\nconst TRIGGER_TYPE_CONFIG: Record<string, { label: string; color: string }> = {\n  MANUAL: { label: 'Manual', color: 'bg-bg-sunken text-text-secondary' },\n  SCHEDULED: { label: 'Scheduled', color: 'bg-status-info-bg-subtle text-status-info-text' },\n  EVENT: { label: 'Event', color: 'bg-status-warning-bg-subtle text-status-warning-text' },\n  ON_DEMAND: { label: 'On Demand', color: 'bg-bg-sunken text-text-secondary' },\n};\n\ninterface BadgeProps {\n  type: string;\n  size?: 'sm' | 'md';\n}\n\nexport function ActionTypeBadge({ type, size = 'sm' }: BadgeProps) {\n  const tr = useTr();\n  const config = ACTION_TYPE_CONFIG[type] || ACTION_TYPE_CONFIG.COMMAND;\n  const Icon = config.icon;\n  const sizeClass = size === 'sm' ? 'text-xs px-1.5 py-0.5' : 'text-sm px-2 py-1';\n  const labelKey = `vibecontrols.actions.typeBadge.${type.toLowerCase()}`;\n  return (\n    <span\n      className={`inline-flex items-center gap-1 font-medium rounded-md border ${config.color} ${sizeClass}`}\n    >\n      <Icon size={size === 'sm' ? 12 : 14} />\n      {tr(labelKey, config.label)}\n    </span>\n  );\n}\n\nexport function SourceTypeBadge({ type, size = 'sm' }: BadgeProps) {\n  const tr = useTr();\n  const config = SOURCE_TYPE_CONFIG[type] || SOURCE_TYPE_CONFIG.USER_CREATED;\n  const sizeClass = size === 'sm' ? 'text-xs px-1.5 py-0.5' : 'text-sm px-2 py-1';\n  const labelKey = `vibecontrols.actions.sourceBadge.${type.toLowerCase()}`;\n  return (\n    <span\n      className={`inline-flex items-center font-medium rounded-md ${config.color} ${sizeClass}`}\n    >\n      {tr(labelKey, config.label)}\n    </span>\n  );\n}\n\nexport function TriggerTypeBadge({ type, size = 'sm' }: BadgeProps) {\n  const tr = useTr();\n  const config = TRIGGER_TYPE_CONFIG[type] || TRIGGER_TYPE_CONFIG.MANUAL;\n  const sizeClass = size === 'sm' ? 'text-xs px-1.5 py-0.5' : 'text-sm px-2 py-1';\n  const labelKey = `vibecontrols.actions.triggerBadge.${type.toLowerCase()}`;\n  return (\n    <span\n      className={`inline-flex items-center font-medium rounded-md ${config.color} ${sizeClass}`}\n    >\n      {tr(labelKey, config.label)}\n    </span>\n  );\n}\n"],"mappings":";;;;AAGA,IAAM,IACJ;CACE,SAAS;EACP,OAAO;EACP,OAAO;EACP,MAAM;EACP;CACD,QAAQ;EACN,OAAO;EACP,OAAO;EACP,MAAM;EACP;CACD,SAAS;EACP,OAAO;EACP,OAAO;EACP,MAAM;EACP;CACD,UAAU;EACR,OAAO;EACP,OAAO;EACP,MAAM;EACP;CACF,EAEG,IAAuE;CAC3E,cAAc;EAAE,OAAO;EAAU,OAAO;EAAoC;CAC5E,iBAAiB;EACf,OAAO;EACP,OAAO;EACR;CACF,EAEK,IAAwE;CAC5E,QAAQ;EAAE,OAAO;EAAU,OAAO;EAAoC;CACtE,WAAW;EAAE,OAAO;EAAa,OAAO;EAAkD;CAC1F,OAAO;EAAE,OAAO;EAAS,OAAO;EAAwD;CACxF,WAAW;EAAE,OAAO;EAAa,OAAO;EAAoC;CAC7E;AAOD,SAAgB,EAAgB,EAAE,SAAM,UAAO,QAAoB;CACjE,IAAM,IAAK,GAAO,EACZ,IAAS,EAAmB,MAAS,EAAmB,SACxD,IAAO,EAAO,MACd,IAAY,MAAS,OAAO,0BAA0B,qBACtD,IAAW,kCAAkC,EAAK,aAAa;AACrE,QACE,kBAAC,QAAD;EACE,WAAW,gEAAgE,EAAO,MAAM,GAAG;YAD7F,CAGE,kBAAC,GAAD,EAAM,MAAM,MAAS,OAAO,KAAK,IAAM,CAAA,EACtC,EAAG,GAAU,EAAO,MAAM,CACtB;;;AAIX,SAAgB,EAAgB,EAAE,SAAM,UAAO,QAAoB;CACjE,IAAM,IAAK,GAAO,EACZ,IAAS,EAAmB,MAAS,EAAmB,cACxD,IAAY,MAAS,OAAO,0BAA0B,qBACtD,IAAW,oCAAoC,EAAK,aAAa;AACvE,QACE,kBAAC,QAAD;EACE,WAAW,mDAAmD,EAAO,MAAM,GAAG;YAE7E,EAAG,GAAU,EAAO,MAAM;EACtB,CAAA;;AAIX,SAAgB,EAAiB,EAAE,SAAM,UAAO,QAAoB;CAClE,IAAM,IAAK,GAAO,EACZ,IAAS,EAAoB,MAAS,EAAoB,QAC1D,IAAY,MAAS,OAAO,0BAA0B,qBACtD,IAAW,qCAAqC,EAAK,aAAa;AACxE,QACE,kBAAC,QAAD;EACE,WAAW,mDAAmD,EAAO,MAAM,GAAG;YAE7E,EAAG,GAAU,EAAO,MAAM;EACtB,CAAA"}

package/dist/components/actions/ExecutionHistory.js

@@ -89,7 +89,7 @@ function u({ executions: t, onClose: r, actionName: i }) {
 							children: e.output
 						}),
 						e.errorMessage && /* @__PURE__ */ o("pre", {
-							className: "text-xs font-mono text-status-error-text bg-status-error-bg/10 rounded p-2 max-h-20 overflow-y-auto whitespace-pre-wrap",
+							className: "text-xs font-mono text-status-error-text bg-status-error-bg-subtle rounded p-2 max-h-20 overflow-y-auto whitespace-pre-wrap",
 							children: e.errorMessage
 						})
 					]

package/dist/components/actions/ExecutionHistory.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExecutionHistory.js","names":[],"sources":["../../../src/components/actions/ExecutionHistory.tsx"],"sourcesContent":["import { CheckCircle, XCircle, Clock, Loader } from 'lucide-react';\nimport { motion } from 'framer-motion';\nimport { useTr } from '../../shared/hooks/useTr';\n\ninterface Execution {\n  id: string;\n  status: string;\n  triggerType?: string | null;\n  triggerSource?: string | null;\n  command?: string | null;\n  script?: string | null;\n  output?: string | null;\n  exitCode?: number | null;\n  webhookStatusCode?: number | null;\n  errorMessage?: string | null;\n  durationMs?: number | null;\n  startedAt?: string | null;\n  completedAt?: string | null;\n}\n\ninterface ExecutionHistoryProps {\n  executions: Execution[];\n  onClose: () => void;\n  actionName: string;\n}\n\nconst STATUS_ICON: Record<string, typeof CheckCircle> = {\n  SUCCESS: CheckCircle,\n  COMPLETED: CheckCircle,\n  FAILED: XCircle,\n  ERROR: XCircle,\n  RUNNING: Loader,\n  PENDING: Clock,\n};\n\nconst STATUS_COLOR: Record<string, string> = {\n  SUCCESS: 'text-status-success-text',\n  COMPLETED: 'text-status-success-text',\n  FAILED: 'text-status-error-text',\n  ERROR: 'text-status-error-text',\n  RUNNING: 'text-status-info-text',\n  PENDING: 'text-text-secondary',\n};\n\nexport function ExecutionHistory({ executions, onClose, actionName }: ExecutionHistoryProps) {\n  const tr = useTr();\n\n  const formatDuration = (ms: number | null | undefined) => {\n    if (!ms) return '-';\n    if (ms < 1000) return `${ms}ms`;\n    if (ms < 60000) return `${(ms / 1000).toFixed(1)}s`;\n    return `${(ms / 60000).toFixed(1)}m`;\n  };\n\n  const formatTime = (dateStr: string | null | undefined) => {\n    if (!dateStr) return '-';\n    return new Date(dateStr).toLocaleString();\n  };\n\n  return (\n    <motion.div\n      className=\"bg-bg-surface border border-border-default rounded-lg overflow-hidden\"\n      initial={{ opacity: 0, height: 0 }}\n      animate={{ opacity: 1, height: 'auto' }}\n      exit={{ opacity: 0, height: 0 }}\n      transition={{ duration: 0.2 }}\n    >\n      <div className=\"flex items-center justify-between px-4 py-3 border-b border-border-default bg-bg-sunken/50\">\n        <h3 className=\"text-sm font-semibold text-text-primary\">\n          {tr('vibecontrols.actions.executionHistory.recentExecutions', 'Recent Executions')} -{' '}\n          {actionName}\n        </h3>\n        <button\n          type=\"button\"\n          onClick={onClose}\n          className=\"text-xs text-text-secondary hover:text-text-primary transition-colors\"\n        >\n          {tr('vibecontrols.actions.executionHistory.close', 'Close')}\n        </button>\n      </div>\n\n      {executions.length === 0 ? (\n        <div className=\"px-4 py-6 text-center text-sm text-text-secondary\">\n          {tr('vibecontrols.actions.executionHistory.noExecutions', 'No executions yet')}\n        </div>\n      ) : (\n        <div className=\"divide-y divide-border-default\">\n          {executions.map((exec) => {\n            const Icon = STATUS_ICON[exec.status] || Clock;\n            const color = STATUS_COLOR[exec.status] || 'text-text-secondary';\n            return (\n              <div key={exec.id} className=\"px-4 py-3 space-y-1\">\n                <div className=\"flex items-center justify-between\">\n                  <div className=\"flex items-center gap-2\">\n                    <Icon\n                      size={14}\n                      className={`${color} ${exec.status === 'RUNNING' ? 'animate-spin' : ''}`}\n                    />\n                    <span className={`text-sm font-medium capitalize ${color}`}>\n                      {exec.status.toLowerCase()}\n                    </span>\n                    {exec.triggerType && (\n                      <span className=\"text-xs text-text-placeholder\">\n                        via {exec.triggerType.toLowerCase()}\n                      </span>\n                    )}\n                  </div>\n                  <div className=\"flex items-center gap-3 text-xs text-text-placeholder\">\n                    <span>{formatDuration(exec.durationMs)}</span>\n                    <span>{formatTime(exec.startedAt)}</span>\n                  </div>\n                </div>\n                {exec.output && (\n                  <pre className=\"text-xs font-mono text-text-secondary bg-bg-sunken rounded p-2 max-h-20 overflow-y-auto whitespace-pre-wrap\">\n                    {exec.output}\n                  </pre>\n                )}\n                {exec.errorMessage && (\n                  <pre className=\"text-xs font-mono text-status-error-text bg-status-error-bg/10 rounded p-2 max-h-20 overflow-y-auto whitespace-pre-wrap\">\n                    {exec.errorMessage}\n                  </pre>\n                )}\n              </div>\n            );\n          })}\n        </div>\n      )}\n    </motion.div>\n  );\n}\n"],"mappings":";;;;;AA0BA,IAAM,IAAkD;CACtD,SAAS;CACT,WAAW;CACX,QAAQ;CACR,OAAO;CACP,SAAS;CACT,SAAS;CACV,EAEK,IAAuC;CAC3C,SAAS;CACT,WAAW;CACX,QAAQ;CACR,OAAO;CACP,SAAS;CACT,SAAS;CACV;AAED,SAAgB,EAAiB,EAAE,eAAY,YAAS,iBAAqC;CAC3F,IAAM,IAAK,GAAO,EAEZ,KAAkB,MACjB,IACD,IAAK,MAAa,GAAG,EAAG,MACxB,IAAK,MAAc,IAAI,IAAK,KAAM,QAAQ,EAAE,CAAC,KAC1C,IAAI,IAAK,KAAO,QAAQ,EAAE,CAAC,KAHlB,KAMZ,KAAc,MACb,IACE,IAAI,KAAK,EAAQ,CAAC,gBAAgB,GADpB;AAIvB,QACE,kBAAC,EAAO,KAAR;EACE,WAAU;EACV,SAAS;GAAE,SAAS;GAAG,QAAQ;GAAG;EAClC,SAAS;GAAE,SAAS;GAAG,QAAQ;GAAQ;EACvC,MAAM;GAAE,SAAS;GAAG,QAAQ;GAAG;EAC/B,YAAY,EAAE,UAAU,IAAK;YAL/B,CAOE,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,MAAD;IAAI,WAAU;cAAd;KACG,EAAG,0DAA0D,oBAAoB;KAAC;KAAG;KACrF;KACE;OACL,kBAAC,UAAD;IACE,MAAK;IACL,SAAS;IACT,WAAU;cAET,EAAG,+CAA+C,QAAQ;IACpD,CAAA,CACL;MAEL,EAAW,WAAW,IACrB,kBAAC,OAAD;GAAK,WAAU;aACZ,EAAG,sDAAsD,oBAAoB;GAC1E,CAAA,GAEN,kBAAC,OAAD;GAAK,WAAU;aACZ,EAAW,KAAK,MAAS;IACxB,IAAM,IAAO,EAAY,EAAK,WAAW,GACnC,IAAQ,EAAa,EAAK,WAAW;AAC3C,WACE,kBAAC,OAAD;KAAmB,WAAU;eAA7B;MACE,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,OAAD;QAAK,WAAU;kBAAf;SACE,kBAAC,GAAD;UACE,MAAM;UACN,WAAW,GAAG,EAAM,GAAG,EAAK,WAAW,YAAY,iBAAiB;UACpE,CAAA;SACF,kBAAC,QAAD;UAAM,WAAW,kCAAkC;oBAChD,EAAK,OAAO,aAAa;UACrB,CAAA;SACN,EAAK,eACJ,kBAAC,QAAD;UAAM,WAAU;oBAAhB,CAAgD,QACzC,EAAK,YAAY,aAAa,CAC9B;;SAEL;WACN,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,QAAD,EAAA,UAAO,EAAe,EAAK,WAAW,EAAQ,CAAA,EAC9C,kBAAC,QAAD,EAAA,UAAO,EAAW,EAAK,UAAU,EAAQ,CAAA,CACrC;UACF;;MACL,EAAK,UACJ,kBAAC,OAAD;OAAK,WAAU;iBACZ,EAAK;OACF,CAAA;MAEP,EAAK,gBACJ,kBAAC,OAAD;OAAK,WAAU;iBACZ,EAAK;OACF,CAAA;MAEJ;OA/BI,EAAK,GA+BT;KAER;GACE,CAAA,CAEG"}
+{"version":3,"file":"ExecutionHistory.js","names":[],"sources":["../../../src/components/actions/ExecutionHistory.tsx"],"sourcesContent":["import { CheckCircle, XCircle, Clock, Loader } from 'lucide-react';\nimport { motion } from 'framer-motion';\nimport { useTr } from '../../shared/hooks/useTr';\n\ninterface Execution {\n  id: string;\n  status: string;\n  triggerType?: string | null;\n  triggerSource?: string | null;\n  command?: string | null;\n  script?: string | null;\n  output?: string | null;\n  exitCode?: number | null;\n  webhookStatusCode?: number | null;\n  errorMessage?: string | null;\n  durationMs?: number | null;\n  startedAt?: string | null;\n  completedAt?: string | null;\n}\n\ninterface ExecutionHistoryProps {\n  executions: Execution[];\n  onClose: () => void;\n  actionName: string;\n}\n\nconst STATUS_ICON: Record<string, typeof CheckCircle> = {\n  SUCCESS: CheckCircle,\n  COMPLETED: CheckCircle,\n  FAILED: XCircle,\n  ERROR: XCircle,\n  RUNNING: Loader,\n  PENDING: Clock,\n};\n\nconst STATUS_COLOR: Record<string, string> = {\n  SUCCESS: 'text-status-success-text',\n  COMPLETED: 'text-status-success-text',\n  FAILED: 'text-status-error-text',\n  ERROR: 'text-status-error-text',\n  RUNNING: 'text-status-info-text',\n  PENDING: 'text-text-secondary',\n};\n\nexport function ExecutionHistory({ executions, onClose, actionName }: ExecutionHistoryProps) {\n  const tr = useTr();\n\n  const formatDuration = (ms: number | null | undefined) => {\n    if (!ms) return '-';\n    if (ms < 1000) return `${ms}ms`;\n    if (ms < 60000) return `${(ms / 1000).toFixed(1)}s`;\n    return `${(ms / 60000).toFixed(1)}m`;\n  };\n\n  const formatTime = (dateStr: string | null | undefined) => {\n    if (!dateStr) return '-';\n    return new Date(dateStr).toLocaleString();\n  };\n\n  return (\n    <motion.div\n      className=\"bg-bg-surface border border-border-default rounded-lg overflow-hidden\"\n      initial={{ opacity: 0, height: 0 }}\n      animate={{ opacity: 1, height: 'auto' }}\n      exit={{ opacity: 0, height: 0 }}\n      transition={{ duration: 0.2 }}\n    >\n      <div className=\"flex items-center justify-between px-4 py-3 border-b border-border-default bg-bg-sunken/50\">\n        <h3 className=\"text-sm font-semibold text-text-primary\">\n          {tr('vibecontrols.actions.executionHistory.recentExecutions', 'Recent Executions')} -{' '}\n          {actionName}\n        </h3>\n        <button\n          type=\"button\"\n          onClick={onClose}\n          className=\"text-xs text-text-secondary hover:text-text-primary transition-colors\"\n        >\n          {tr('vibecontrols.actions.executionHistory.close', 'Close')}\n        </button>\n      </div>\n\n      {executions.length === 0 ? (\n        <div className=\"px-4 py-6 text-center text-sm text-text-secondary\">\n          {tr('vibecontrols.actions.executionHistory.noExecutions', 'No executions yet')}\n        </div>\n      ) : (\n        <div className=\"divide-y divide-border-default\">\n          {executions.map((exec) => {\n            const Icon = STATUS_ICON[exec.status] || Clock;\n            const color = STATUS_COLOR[exec.status] || 'text-text-secondary';\n            return (\n              <div key={exec.id} className=\"px-4 py-3 space-y-1\">\n                <div className=\"flex items-center justify-between\">\n                  <div className=\"flex items-center gap-2\">\n                    <Icon\n                      size={14}\n                      className={`${color} ${exec.status === 'RUNNING' ? 'animate-spin' : ''}`}\n                    />\n                    <span className={`text-sm font-medium capitalize ${color}`}>\n                      {exec.status.toLowerCase()}\n                    </span>\n                    {exec.triggerType && (\n                      <span className=\"text-xs text-text-placeholder\">\n                        via {exec.triggerType.toLowerCase()}\n                      </span>\n                    )}\n                  </div>\n                  <div className=\"flex items-center gap-3 text-xs text-text-placeholder\">\n                    <span>{formatDuration(exec.durationMs)}</span>\n                    <span>{formatTime(exec.startedAt)}</span>\n                  </div>\n                </div>\n                {exec.output && (\n                  <pre className=\"text-xs font-mono text-text-secondary bg-bg-sunken rounded p-2 max-h-20 overflow-y-auto whitespace-pre-wrap\">\n                    {exec.output}\n                  </pre>\n                )}\n                {exec.errorMessage && (\n                  <pre className=\"text-xs font-mono text-status-error-text bg-status-error-bg-subtle rounded p-2 max-h-20 overflow-y-auto whitespace-pre-wrap\">\n                    {exec.errorMessage}\n                  </pre>\n                )}\n              </div>\n            );\n          })}\n        </div>\n      )}\n    </motion.div>\n  );\n}\n"],"mappings":";;;;;AA0BA,IAAM,IAAkD;CACtD,SAAS;CACT,WAAW;CACX,QAAQ;CACR,OAAO;CACP,SAAS;CACT,SAAS;CACV,EAEK,IAAuC;CAC3C,SAAS;CACT,WAAW;CACX,QAAQ;CACR,OAAO;CACP,SAAS;CACT,SAAS;CACV;AAED,SAAgB,EAAiB,EAAE,eAAY,YAAS,iBAAqC;CAC3F,IAAM,IAAK,GAAO,EAEZ,KAAkB,MACjB,IACD,IAAK,MAAa,GAAG,EAAG,MACxB,IAAK,MAAc,IAAI,IAAK,KAAM,QAAQ,EAAE,CAAC,KAC1C,IAAI,IAAK,KAAO,QAAQ,EAAE,CAAC,KAHlB,KAMZ,KAAc,MACb,IACE,IAAI,KAAK,EAAQ,CAAC,gBAAgB,GADpB;AAIvB,QACE,kBAAC,EAAO,KAAR;EACE,WAAU;EACV,SAAS;GAAE,SAAS;GAAG,QAAQ;GAAG;EAClC,SAAS;GAAE,SAAS;GAAG,QAAQ;GAAQ;EACvC,MAAM;GAAE,SAAS;GAAG,QAAQ;GAAG;EAC/B,YAAY,EAAE,UAAU,IAAK;YAL/B,CAOE,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,MAAD;IAAI,WAAU;cAAd;KACG,EAAG,0DAA0D,oBAAoB;KAAC;KAAG;KACrF;KACE;OACL,kBAAC,UAAD;IACE,MAAK;IACL,SAAS;IACT,WAAU;cAET,EAAG,+CAA+C,QAAQ;IACpD,CAAA,CACL;MAEL,EAAW,WAAW,IACrB,kBAAC,OAAD;GAAK,WAAU;aACZ,EAAG,sDAAsD,oBAAoB;GAC1E,CAAA,GAEN,kBAAC,OAAD;GAAK,WAAU;aACZ,EAAW,KAAK,MAAS;IACxB,IAAM,IAAO,EAAY,EAAK,WAAW,GACnC,IAAQ,EAAa,EAAK,WAAW;AAC3C,WACE,kBAAC,OAAD;KAAmB,WAAU;eAA7B;MACE,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,OAAD;QAAK,WAAU;kBAAf;SACE,kBAAC,GAAD;UACE,MAAM;UACN,WAAW,GAAG,EAAM,GAAG,EAAK,WAAW,YAAY,iBAAiB;UACpE,CAAA;SACF,kBAAC,QAAD;UAAM,WAAW,kCAAkC;oBAChD,EAAK,OAAO,aAAa;UACrB,CAAA;SACN,EAAK,eACJ,kBAAC,QAAD;UAAM,WAAU;oBAAhB,CAAgD,QACzC,EAAK,YAAY,aAAa,CAC9B;;SAEL;WACN,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,QAAD,EAAA,UAAO,EAAe,EAAK,WAAW,EAAQ,CAAA,EAC9C,kBAAC,QAAD,EAAA,UAAO,EAAW,EAAK,UAAU,EAAQ,CAAA,CACrC;UACF;;MACL,EAAK,UACJ,kBAAC,OAAD;OAAK,WAAU;iBACZ,EAAK;OACF,CAAA;MAEP,EAAK,gBACJ,kBAAC,OAAD;OAAK,WAAU;iBACZ,EAAK;OACF,CAAA;MAEJ;OA/BI,EAAK,GA+BT;KAER;GACE,CAAA,CAEG"}

package/dist/components/agent-manager/AgentManagerAdminBar.js

@@ -147,7 +147,7 @@ function O({ agent: f }) {
 			return /* @__PURE__ */ E("button", {
 				type: "button",
 				onClick: () => k(e.key),
-				className: `flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium rounded transition-colors whitespace-nowrap ${g && p === e.key ? "bg-action-primary-bg/10 text-action-primary-text" : "text-text-tertiary hover:text-text-secondary hover:bg-bg-elevated"}`,
+				className: `flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium rounded transition-colors whitespace-nowrap ${g && p === e.key ? "bg-[var(--color-accent-soft)] text-text-primary" : "text-text-tertiary hover:text-text-secondary hover:bg-bg-elevated"}`,
 				children: [/* @__PURE__ */ T(t, { className: "size-3.5" }), /* @__PURE__ */ T("span", { children: e.label })]
 			}, e.key);
 		})

package/dist/components/agent-manager/AgentManagerAdminBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"AgentManagerAdminBar.js","names":[],"sources":["../../../src/components/agent-manager/AgentManagerAdminBar.tsx"],"sourcesContent":["/**\n * Admin bar for the Agent Manager.\n *\n * Horizontal tab strip rendered at the bottom of the layout. Each tab\n * opens an overlay panel with the corresponding AI management component\n * (Templates, Contexts, Prompts, Tasks, Stats, Playground).\n */\n\nimport { useState } from 'react';\nimport {\n  X,\n  FileText,\n  BookOpen,\n  MessageSquare,\n  ListChecks,\n  BarChart3,\n  Play,\n  Settings,\n  ExternalLink,\n} from 'lucide-react';\nimport { motion, AnimatePresence, useReducedMotion } from 'framer-motion';\nimport { useAgentManagerStore } from '@/store/agentManagerStore';\nimport { useVibeNavigate } from '@/providers/VibeControlsProvider';\nimport type { AdminTab } from '@/types/agentManager';\nimport { AITemplatesTab } from '@/components/ai/AITemplatesTab';\nimport { AIContextsTab } from '@/components/ai/AIContextsTab';\nimport { AIPromptsTab } from '@/components/ai/AIPromptsTab';\nimport { AITasksTab } from '@/components/ai/AITasksTab';\nimport { AIStatsTab } from '@/components/ai/AIStatsTab';\nimport { AIPlaygroundTab } from '@/components/ai/AIPlaygroundTab';\nimport { BridleConfigPanel } from './BridleConfigPanel';\nimport { AIProviderCredentialsCard } from '@/components/ai/AIProviderCredentialsCard';\nimport { useTr } from '../../shared/hooks/useTr';\nimport type { AgentRef } from '@/services/aiApi';\n\ninterface AgentManagerAdminBarProps {\n  agent: AgentRef;\n}\n\nconst ADMIN_TABS: Array<{ key: AdminTab; label: string; icon: typeof FileText }> = [\n  { key: 'templates', label: 'Templates', icon: FileText },\n  { key: 'contexts', label: 'Contexts', icon: BookOpen },\n  { key: 'prompts', label: 'Prompts', icon: MessageSquare },\n  { key: 'tasks', label: 'Tasks', icon: ListChecks },\n  { key: 'stats', label: 'Stats', icon: BarChart3 },\n  { key: 'playground', label: 'Playground', icon: Play },\n  // Split: AI provider API keys (Anthropic, OpenAI, Gemini, …) live here;\n  // Bridle owns the harness-config files (~/.claude/, ~/.config/opencode/).\n  { key: 'aiKeys', label: 'AI Keys', icon: Settings },\n  { key: 'bridle', label: 'Bridle', icon: Settings },\n];\n\nexport function AgentManagerAdminBar({ agent }: AgentManagerAdminBarProps) {\n  const adminTab = useAgentManagerStore((s) => s.adminTab);\n  const setAdminTab = useAgentManagerStore((s) => s.setAdminTab);\n  const [overlayOpen, setOverlayOpen] = useState(false);\n  const shouldReduceMotion = useReducedMotion();\n  const handleNavigate = useVibeNavigate();\n  const tr = useTr();\n\n  function handleTabClick(tab: AdminTab) {\n    if (overlayOpen && adminTab === tab) {\n      setOverlayOpen(false);\n    } else {\n      setAdminTab(tab);\n      setOverlayOpen(true);\n    }\n  }\n\n  function renderTabContent() {\n    switch (adminTab) {\n      case 'templates':\n        return <AITemplatesTab agentId={agent.id} />;\n      case 'contexts':\n        return <AIContextsTab agent={agent} />;\n      case 'prompts':\n        return <AIPromptsTab agent={agent} />;\n      case 'tasks':\n        return <AITasksTab />;\n      case 'stats':\n        return <AIStatsTab agent={agent} />;\n      case 'playground':\n        return <AIPlaygroundTab agent={agent} />;\n      // 'aiKeys' is the SDK-credentials surface: every AI provider plugin\n      // that reads from the agent's config bag (POST /api/config) gets a\n      // row here. Distinct from Bridle below, which writes harness config\n      // files on disk under ~/.claude/, ~/.config/opencode/, etc.\n      case 'aiKeys':\n      case 'config': // back-compat alias for old saved adminTab='config'\n        return <AIProviderCredentialsCard agent={agent} />;\n      case 'bridle':\n        return <BridleConfigPanel agent={agent} />;\n      default:\n        return null;\n    }\n  }\n\n  return (\n    <>\n      {/* Admin overlay */}\n      <AnimatePresence>\n        {overlayOpen && (\n          <motion.div\n            className=\"fixed inset-0 z-40 flex items-center justify-center\"\n            initial={shouldReduceMotion ? undefined : { opacity: 0 }}\n            animate={{ opacity: 1 }}\n            exit={{ opacity: 0 }}\n            transition={{ duration: 0.2 }}\n          >\n            {/* Backdrop */}\n            <div\n              role=\"button\"\n              tabIndex={0}\n              onKeyDown={(e) => {\n                if (e.key === 'Enter' || e.key === ' ') {\n                  e.preventDefault();\n                  (() => setOverlayOpen(false))();\n                }\n              }}\n              className=\"absolute inset-0 bg-bg-overlay\"\n              onClick={() => setOverlayOpen(false)}\n            />\n\n            {/* Content card */}\n            <motion.div\n              className=\"relative w-full max-w-4xl max-h-[80vh] mx-4 rounded-lg border border-border-default bg-bg-surface shadow-xl overflow-hidden flex flex-col\"\n              initial={shouldReduceMotion ? undefined : { opacity: 0, scale: 0.96, y: 16 }}\n              animate={{ opacity: 1, scale: 1, y: 0 }}\n              exit={{ opacity: 0, scale: 0.96, y: 16 }}\n              transition={{ duration: 0.2, ease: [0.2, 0, 0, 1] }}\n            >\n              {/* Header */}\n              <div className=\"flex items-center justify-between px-4 py-3 border-b border-border-default\">\n                <h2 className=\"text-sm font-semibold text-text-primary capitalize\">{adminTab}</h2>\n                <div className=\"flex items-center gap-1\">\n                  <button\n                    type=\"button\"\n                    onClick={() => handleNavigate('/ai-tools/' + adminTab)}\n                    className=\"p-1 rounded hover:bg-bg-elevated transition-colors text-text-tertiary hover:text-text-secondary\"\n                    title={tr('vibecontrols.agentManager.adminBar.openFullPage', 'Open full page')}\n                  >\n                    <ExternalLink className=\"size-4\" />\n                  </button>\n                  <button\n                    type=\"button\"\n                    onClick={() => setOverlayOpen(false)}\n                    className=\"p-1 rounded hover:bg-bg-elevated transition-colors text-text-tertiary hover:text-text-secondary\"\n                  >\n                    <X className=\"size-4\" />\n                  </button>\n                </div>\n              </div>\n\n              {/* Tab content */}\n              <div className=\"flex-1 overflow-y-auto p-4\">{renderTabContent()}</div>\n            </motion.div>\n          </motion.div>\n        )}\n      </AnimatePresence>\n\n      {/* Bottom bar */}\n      <div className=\"flex items-center gap-0.5 px-2 py-1 border-t border-border-default bg-bg-surface overflow-x-auto\">\n        {ADMIN_TABS.map((tab) => {\n          const Icon = tab.icon;\n          const isActive = overlayOpen && adminTab === tab.key;\n          return (\n            <button\n              key={tab.key}\n              type=\"button\"\n              onClick={() => handleTabClick(tab.key)}\n              className={`flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium rounded transition-colors whitespace-nowrap ${\n                isActive\n                  ? 'bg-action-primary-bg/10 text-action-primary-text'\n                  : 'text-text-tertiary hover:text-text-secondary hover:bg-bg-elevated'\n              }`}\n            >\n              <Icon className=\"size-3.5\" />\n              <span>{tab.label}</span>\n            </button>\n          );\n        })}\n      </div>\n    </>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"AgentManagerAdminBar.js","names":[],"sources":["../../../src/components/agent-manager/AgentManagerAdminBar.tsx"],"sourcesContent":["/**\n * Admin bar for the Agent Manager.\n *\n * Horizontal tab strip rendered at the bottom of the layout. Each tab\n * opens an overlay panel with the corresponding AI management component\n * (Templates, Contexts, Prompts, Tasks, Stats, Playground).\n */\n\nimport { useState } from 'react';\nimport {\n  X,\n  FileText,\n  BookOpen,\n  MessageSquare,\n  ListChecks,\n  BarChart3,\n  Play,\n  Settings,\n  ExternalLink,\n} from 'lucide-react';\nimport { motion, AnimatePresence, useReducedMotion } from 'framer-motion';\nimport { useAgentManagerStore } from '@/store/agentManagerStore';\nimport { useVibeNavigate } from '@/providers/VibeControlsProvider';\nimport type { AdminTab } from '@/types/agentManager';\nimport { AITemplatesTab } from '@/components/ai/AITemplatesTab';\nimport { AIContextsTab } from '@/components/ai/AIContextsTab';\nimport { AIPromptsTab } from '@/components/ai/AIPromptsTab';\nimport { AITasksTab } from '@/components/ai/AITasksTab';\nimport { AIStatsTab } from '@/components/ai/AIStatsTab';\nimport { AIPlaygroundTab } from '@/components/ai/AIPlaygroundTab';\nimport { BridleConfigPanel } from './BridleConfigPanel';\nimport { AIProviderCredentialsCard } from '@/components/ai/AIProviderCredentialsCard';\nimport { useTr } from '../../shared/hooks/useTr';\nimport type { AgentRef } from '@/services/aiApi';\n\ninterface AgentManagerAdminBarProps {\n  agent: AgentRef;\n}\n\nconst ADMIN_TABS: Array<{ key: AdminTab; label: string; icon: typeof FileText }> = [\n  { key: 'templates', label: 'Templates', icon: FileText },\n  { key: 'contexts', label: 'Contexts', icon: BookOpen },\n  { key: 'prompts', label: 'Prompts', icon: MessageSquare },\n  { key: 'tasks', label: 'Tasks', icon: ListChecks },\n  { key: 'stats', label: 'Stats', icon: BarChart3 },\n  { key: 'playground', label: 'Playground', icon: Play },\n  // Split: AI provider API keys (Anthropic, OpenAI, Gemini, …) live here;\n  // Bridle owns the harness-config files (~/.claude/, ~/.config/opencode/).\n  { key: 'aiKeys', label: 'AI Keys', icon: Settings },\n  { key: 'bridle', label: 'Bridle', icon: Settings },\n];\n\nexport function AgentManagerAdminBar({ agent }: AgentManagerAdminBarProps) {\n  const adminTab = useAgentManagerStore((s) => s.adminTab);\n  const setAdminTab = useAgentManagerStore((s) => s.setAdminTab);\n  const [overlayOpen, setOverlayOpen] = useState(false);\n  const shouldReduceMotion = useReducedMotion();\n  const handleNavigate = useVibeNavigate();\n  const tr = useTr();\n\n  function handleTabClick(tab: AdminTab) {\n    if (overlayOpen && adminTab === tab) {\n      setOverlayOpen(false);\n    } else {\n      setAdminTab(tab);\n      setOverlayOpen(true);\n    }\n  }\n\n  function renderTabContent() {\n    switch (adminTab) {\n      case 'templates':\n        return <AITemplatesTab agentId={agent.id} />;\n      case 'contexts':\n        return <AIContextsTab agent={agent} />;\n      case 'prompts':\n        return <AIPromptsTab agent={agent} />;\n      case 'tasks':\n        return <AITasksTab />;\n      case 'stats':\n        return <AIStatsTab agent={agent} />;\n      case 'playground':\n        return <AIPlaygroundTab agent={agent} />;\n      // 'aiKeys' is the SDK-credentials surface: every AI provider plugin\n      // that reads from the agent's config bag (POST /api/config) gets a\n      // row here. Distinct from Bridle below, which writes harness config\n      // files on disk under ~/.claude/, ~/.config/opencode/, etc.\n      case 'aiKeys':\n      case 'config': // back-compat alias for old saved adminTab='config'\n        return <AIProviderCredentialsCard agent={agent} />;\n      case 'bridle':\n        return <BridleConfigPanel agent={agent} />;\n      default:\n        return null;\n    }\n  }\n\n  return (\n    <>\n      {/* Admin overlay */}\n      <AnimatePresence>\n        {overlayOpen && (\n          <motion.div\n            className=\"fixed inset-0 z-40 flex items-center justify-center\"\n            initial={shouldReduceMotion ? undefined : { opacity: 0 }}\n            animate={{ opacity: 1 }}\n            exit={{ opacity: 0 }}\n            transition={{ duration: 0.2 }}\n          >\n            {/* Backdrop */}\n            <div\n              role=\"button\"\n              tabIndex={0}\n              onKeyDown={(e) => {\n                if (e.key === 'Enter' || e.key === ' ') {\n                  e.preventDefault();\n                  (() => setOverlayOpen(false))();\n                }\n              }}\n              className=\"absolute inset-0 bg-bg-overlay\"\n              onClick={() => setOverlayOpen(false)}\n            />\n\n            {/* Content card */}\n            <motion.div\n              className=\"relative w-full max-w-4xl max-h-[80vh] mx-4 rounded-lg border border-border-default bg-bg-surface shadow-xl overflow-hidden flex flex-col\"\n              initial={shouldReduceMotion ? undefined : { opacity: 0, scale: 0.96, y: 16 }}\n              animate={{ opacity: 1, scale: 1, y: 0 }}\n              exit={{ opacity: 0, scale: 0.96, y: 16 }}\n              transition={{ duration: 0.2, ease: [0.2, 0, 0, 1] }}\n            >\n              {/* Header */}\n              <div className=\"flex items-center justify-between px-4 py-3 border-b border-border-default\">\n                <h2 className=\"text-sm font-semibold text-text-primary capitalize\">{adminTab}</h2>\n                <div className=\"flex items-center gap-1\">\n                  <button\n                    type=\"button\"\n                    onClick={() => handleNavigate('/ai-tools/' + adminTab)}\n                    className=\"p-1 rounded hover:bg-bg-elevated transition-colors text-text-tertiary hover:text-text-secondary\"\n                    title={tr('vibecontrols.agentManager.adminBar.openFullPage', 'Open full page')}\n                  >\n                    <ExternalLink className=\"size-4\" />\n                  </button>\n                  <button\n                    type=\"button\"\n                    onClick={() => setOverlayOpen(false)}\n                    className=\"p-1 rounded hover:bg-bg-elevated transition-colors text-text-tertiary hover:text-text-secondary\"\n                  >\n                    <X className=\"size-4\" />\n                  </button>\n                </div>\n              </div>\n\n              {/* Tab content */}\n              <div className=\"flex-1 overflow-y-auto p-4\">{renderTabContent()}</div>\n            </motion.div>\n          </motion.div>\n        )}\n      </AnimatePresence>\n\n      {/* Bottom bar */}\n      <div className=\"flex items-center gap-0.5 px-2 py-1 border-t border-border-default bg-bg-surface overflow-x-auto\">\n        {ADMIN_TABS.map((tab) => {\n          const Icon = tab.icon;\n          const isActive = overlayOpen && adminTab === tab.key;\n          return (\n            <button\n              key={tab.key}\n              type=\"button\"\n              onClick={() => handleTabClick(tab.key)}\n              className={`flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium rounded transition-colors whitespace-nowrap ${\n                isActive\n                  ? 'bg-[var(--color-accent-soft)] text-text-primary'\n                  : 'text-text-tertiary hover:text-text-secondary hover:bg-bg-elevated'\n              }`}\n            >\n              <Icon className=\"size-3.5\" />\n              <span>{tab.label}</span>\n            </button>\n          );\n        })}\n      </div>\n    </>\n  );\n}\n"],"mappings":"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"}

package/dist/components/agent-manager/AgentManagerChatPane.js

@@ -102,7 +102,7 @@ var C = ({ sessionId: d, agentId: C }) => {
 						children: [/* @__PURE__ */ x("button", {
 							type: "button",
 							onClick: re,
-							className: `p-1 rounded transition-colors shrink-0 ${D ? "bg-action-primary-bg/10 text-action-primary-text" : "text-text-tertiary hover:text-text-secondary hover:bg-bg-elevated"}`,
+							className: `p-1 rounded transition-colors shrink-0 ${D ? "bg-[var(--color-accent-soft)] text-text-primary" : "text-text-tertiary hover:text-text-secondary hover:bg-bg-elevated"}`,
 							title: B("vibecontrols.agentManager.chatPane.searchInSession", "Search in session (Ctrl+F)"),
 							"aria-label": B("vibecontrols.agentManager.chatPane.searchInSession", "Search in session"),
 							children: /* @__PURE__ */ x(ee, { className: "size-3.5" })
@@ -135,7 +135,7 @@ var C = ({ sessionId: d, agentId: C }) => {
 					/* @__PURE__ */ S("button", {
 						type: "button",
 						onClick: () => M(!0),
-						className: "shrink-0 inline-flex items-center gap-1.5 rounded-md border border-border-default bg-bg-elevated px-2 py-1 text-xs font-medium text-text-primary transition-colors hover:bg-bg-sunken hover:border-action-primary-bg/40",
+						className: "shrink-0 inline-flex items-center gap-1.5 rounded-md border border-border-default bg-bg-elevated px-2 py-1 text-xs font-medium text-text-primary transition-colors hover:bg-bg-sunken hover:border-[var(--color-accent-soft)]",
 						title: B("vibecontrols.agentManager.chatPane.manageProvidersTooltip", "Install or remove AI providers (Claude, Codex, Gemini, OpenCode)"),
 						"aria-label": B("vibecontrols.agentManager.chatPane.manageProviders", "Manage AI providers"),
 						"data-testid": "agent-manager-manage-providers",

package/dist/components/agent-manager/AgentManagerChatPane.js.map

@@ -1 +1 @@
-{"version":3,"file":"AgentManagerChatPane.js","names":[],"sources":["../../../src/components/agent-manager/AgentManagerChatPane.tsx"],"sourcesContent":["/**\n * Main chat interface for a single Agent Manager session.\n *\n * Renders message list + input area, manages the send/receive flow,\n * fetches existing conversation logs on mount, and provides\n * auto-scroll, cancel, and in-session search support.\n */\n\nimport { useEffect, useRef, useState, useCallback, useMemo, type FC } from 'react';\nimport { useSearchParams } from 'react-router-dom';\nimport { Bookmark, PackagePlus, Search, X } from 'lucide-react';\nimport { useAgentManagerStore } from '@/store/agentManagerStore';\nimport { useAgentManagerStreaming } from '@/hooks/useAgentManagerStreaming';\nimport { useCachedInitialData } from '@/hooks/useCachedInitialData';\nimport { fetchSessionLogs } from '@/services/aiApi';\nimport { useActiveAgentProfile } from '@/hooks/useActiveAgentProfile';\nimport { useToggleAgentBookmark } from '@/hooks/useToggleAgentBookmark';\nimport { AgentManagerMessageList } from './AgentManagerMessageList';\nimport { AgentManagerInputArea } from './AgentManagerInputArea';\nimport { AgentManagerBookmarksDrawer } from './AgentManagerBookmarksDrawer';\nimport { PluginInstallModal } from './PluginInstallModal';\nimport { AIProviderCredentialsCard } from '@/components/ai/AIProviderCredentialsCard';\nimport type { AgentManagerMessage } from '@/types/agentManager';\nimport { useTr } from '../../shared/hooks/useTr';\n\ninterface AgentManagerChatPaneProps {\n  sessionId: string;\n  agentId: string;\n}\n\nexport const AgentManagerChatPane: FC<AgentManagerChatPaneProps> = ({ sessionId, agentId }) => {\n  const [loadingLogs, setLoadingLogs] = useState(false);\n  const [searchOpen, setSearchOpen] = useState(false);\n  const [searchQuery, setSearchQuery] = useState('');\n  // Provider-install modal triggered from the header. Lets users add a\n  // claude/codex/gemini/opencode plugin without leaving the conversation.\n  const [installModalOpen, setInstallModalOpen] = useState(false);\n  const [bookmarksDrawerOpen, setBookmarksDrawerOpen] = useState(false);\n  const [flashMessageId, setFlashMessageId] = useState<string | null>(null);\n  const [searchParams, setSearchParams] = useSearchParams();\n  const pendingScrollMessageId = searchParams.get('messageId');\n  const consumedScrollTargetRef = useRef<string | null>(null);\n  const tr = useTr();\n\n  const { agents } = useCachedInitialData();\n  const activeAgent = useMemo(\n    () => agents.find((a) => a.id === agentId) ?? null,\n    [agents, agentId]\n  );\n\n  const sessionState = useAgentManagerStore((s) => s.sessionStates[sessionId]);\n  const addMessage = useAgentManagerStore((s) => s.addMessage);\n\n  const messages = useMemo(() => sessionState?.messages ?? [], [sessionState?.messages]);\n\n  const { active: activeProfile } = useActiveAgentProfile(activeAgent?.id ?? null);\n  const agentRef = useMemo(\n    () => ({ id: agentId, profile: activeProfile }),\n    [agentId, activeProfile]\n  );\n\n  const { sendMessage, cancelStream, isStreaming } = useAgentManagerStreaming({\n    agent: agentRef,\n    sessionId,\n  });\n\n  const { bookmarkedIds, toggle: toggleBookmark } = useToggleAgentBookmark(sessionId);\n\n  const jumpToMessage = useCallback((messageId: string) => {\n    const el = document.querySelector(`[data-message-id=\"${messageId}\"]`);\n    if (!el) return;\n    el.scrollIntoView({ behavior: 'smooth', block: 'center' });\n    setFlashMessageId(messageId);\n    window.setTimeout(() => {\n      setFlashMessageId((current) => (current === messageId ? null : current));\n    }, 1500);\n  }, []);\n\n  const handleToggleBookmark = useCallback(\n    (messageId: string) => {\n      void toggleBookmark({ agentId, sessionId, messageId });\n    },\n    [toggleBookmark, agentId, sessionId]\n  );\n\n  const toggleSearch = useCallback(() => {\n    setSearchOpen((prev) => {\n      if (prev) setSearchQuery('');\n      return !prev;\n    });\n  }, []);\n\n  // Fetch existing conversation logs on mount\n  useEffect(() => {\n    let cancelled = false;\n\n    const loadExistingLogs = async () => {\n      // Only load if session has no messages yet\n      if (messages.length > 0) return;\n\n      setLoadingLogs(true);\n      try {\n        const logs = await fetchSessionLogs(agentRef, sessionId, {\n          types: ['input', 'output'],\n        });\n\n        if (cancelled || logs.length === 0) return;\n\n        const seenLogKeys = new Set<string>();\n\n        // Convert session logs to AgentManagerMessage format. The core AI\n        // route owns logging, but older provider builds also wrote the same\n        // input/output records; collapse same-second duplicates on restore.\n        for (const log of logs) {\n          const content = log.message || log.content || '';\n          const timestamp = log.timestamp || log.createdAt;\n          const timestampSecond = timestamp ? Math.floor(new Date(timestamp).getTime() / 1000) : 0;\n          const logKey = [log.type, content, log.model ?? '', timestampSecond].join('\\u0000');\n          if (seenLogKeys.has(logKey)) continue;\n          seenLogKeys.add(logKey);\n\n          const msg: AgentManagerMessage = {\n            id: log.id,\n            role: log.type === 'input' ? 'user' : 'assistant',\n            content,\n            timestamp,\n            tokens: log.tokenCount ? { input: 0, output: log.tokenCount } : undefined,\n            model: log.model,\n          };\n          addMessage(sessionId, msg);\n        }\n      } catch {\n        // Silent fail -- session may not have logs yet\n      } finally {\n        if (!cancelled) setLoadingLogs(false);\n      }\n    };\n\n    void loadExistingLogs();\n\n    return () => {\n      cancelled = true;\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- only run on mount\n  }, [agentId, sessionId]);\n\n  // Auto-scroll to a message linked via ?messageId=... (from drawer / cross-session page).\n  // Waits for logs to finish loading and the target to be in the DOM before scrolling.\n  useEffect(() => {\n    if (!pendingScrollMessageId || loadingLogs) return;\n    if (consumedScrollTargetRef.current === pendingScrollMessageId) return;\n\n    const exists = messages.some((m) => m.id === pendingScrollMessageId);\n    if (!exists) return;\n\n    consumedScrollTargetRef.current = pendingScrollMessageId;\n    jumpToMessage(pendingScrollMessageId);\n\n    // Strip the query param so a manual refresh doesn't re-trigger the flash.\n    const next = new URLSearchParams(searchParams);\n    next.delete('messageId');\n    setSearchParams(next, { replace: true });\n  }, [pendingScrollMessageId, loadingLogs, messages, jumpToMessage, searchParams, setSearchParams]);\n\n  return (\n    <div className=\"flex flex-col h-full min-h-0\" data-testid=\"agent-manager-chat-pane\">\n      {/* In-session search bar.\n          Layout: [search controls (flex-1)] ... [Manage AI providers].\n          The search input expands inside the LEFT cluster only, so the\n          Manage button stays anchored on the right and never shifts. */}\n      <div className=\"flex items-center gap-1 px-3 py-1 border-b border-border-default bg-bg-surface flex-shrink-0\">\n        <div className=\"flex items-center gap-1.5 min-w-0 flex-1\">\n          <button\n            type=\"button\"\n            onClick={toggleSearch}\n            className={`p-1 rounded transition-colors shrink-0 ${\n              searchOpen\n                ? 'bg-action-primary-bg/10 text-action-primary-text'\n                : 'text-text-tertiary hover:text-text-secondary hover:bg-bg-elevated'\n            }`}\n            title={tr(\n              'vibecontrols.agentManager.chatPane.searchInSession',\n              'Search in session (Ctrl+F)'\n            )}\n            aria-label={tr(\n              'vibecontrols.agentManager.chatPane.searchInSession',\n              'Search in session'\n            )}\n          >\n            <Search className=\"size-3.5\" />\n          </button>\n          {searchOpen && (\n            <div className=\"flex items-center gap-1.5 flex-1 min-w-0\">\n              <input\n                aria-label=\"control\"\n                type=\"text\"\n                value={searchQuery}\n                onChange={(e) => setSearchQuery(e.target.value)}\n                placeholder={tr(\n                  'vibecontrols.agentManager.chatPane.searchPlaceholder',\n                  'Search in conversation...'\n                )}\n                className=\"flex-1 min-w-0 bg-transparent text-xs text-text-primary placeholder:text-text-tertiary focus:outline-none\"\n              />\n              {searchQuery && (\n                <button\n                  type=\"button\"\n                  onClick={() => setSearchQuery('')}\n                  className=\"p-0.5 rounded hover:bg-bg-elevated transition-colors\"\n                >\n                  <X className=\"size-3 text-text-tertiary\" />\n                </button>\n              )}\n            </div>\n          )}\n        </div>\n        <button\n          type=\"button\"\n          onClick={() => setBookmarksDrawerOpen(true)}\n          className=\"shrink-0 p-1 rounded transition-colors text-text-tertiary hover:text-text-secondary hover:bg-bg-elevated\"\n          title={tr(\n            'vibecontrols.agentManager.chatPane.bookmarksTooltip',\n            'View bookmarked messages'\n          )}\n          aria-label={tr('vibecontrols.agentManager.chatPane.bookmarksLabel', 'Bookmarks')}\n          data-testid=\"agent-manager-bookmarks-trigger\"\n        >\n          <Bookmark className=\"size-3.5\" />\n        </button>\n        <button\n          type=\"button\"\n          onClick={() => setInstallModalOpen(true)}\n          className=\"shrink-0 inline-flex items-center gap-1.5 rounded-md border border-border-default bg-bg-elevated px-2 py-1 text-xs font-medium text-text-primary transition-colors hover:bg-bg-sunken hover:border-action-primary-bg/40\"\n          title={tr(\n            'vibecontrols.agentManager.chatPane.manageProvidersTooltip',\n            'Install or remove AI providers (Claude, Codex, Gemini, OpenCode)'\n          )}\n          aria-label={tr(\n            'vibecontrols.agentManager.chatPane.manageProviders',\n            'Manage AI providers'\n          )}\n          data-testid=\"agent-manager-manage-providers\"\n        >\n          <PackagePlus className=\"size-3.5\" />\n          <span className=\"hidden sm:inline\">\n            {tr('vibecontrols.agentManager.chatPane.manageProviders', 'Manage AI providers')}\n          </span>\n        </button>\n      </div>\n\n      {/* Message list */}\n      {loadingLogs ? (\n        <div className=\"flex-1 flex items-center justify-center\">\n          <p className=\"text-sm text-text-secondary\">\n            {tr(\n              'vibecontrols.agentManager.chatPane.loadingConversation',\n              'Loading conversation...'\n            )}\n          </p>\n        </div>\n      ) : (\n        <AgentManagerMessageList\n          messages={messages}\n          isStreaming={isStreaming}\n          onCancelStream={cancelStream}\n          searchQuery={searchQuery}\n          bookmarkedIds={bookmarkedIds}\n          onToggleBookmark={handleToggleBookmark}\n          flashMessageId={flashMessageId}\n        />\n      )}\n\n      {/* Rich input area with controls */}\n      <AgentManagerInputArea\n        agentId={agentId}\n        sessionId={sessionId}\n        onSend={(text) => void sendMessage(text)}\n        onCancel={cancelStream}\n        agentTunnelUrl={activeAgent?.tunnelUrl ?? undefined}\n      />\n\n      {/* Per-session bookmarks drawer */}\n      <AgentManagerBookmarksDrawer\n        open={bookmarksDrawerOpen}\n        onClose={() => setBookmarksDrawerOpen(false)}\n        sessionId={sessionId}\n        messages={messages}\n        onJump={jumpToMessage}\n      />\n\n      {/* Header-triggered provider install/remove. Sits below the chat\n          tree so it can render full-screen without disturbing layout. */}\n      <PluginInstallModal\n        open={installModalOpen}\n        agentId={agentId}\n        onClose={() => setInstallModalOpen(false)}\n      />\n\n      {/* SDK auth prompt: opens when the streaming hook detects a missing\n          ANTHROPIC_API_KEY / ANTHROPIC_AUTH_TOKEN, so the user can save the\n          credential inline instead of being told to go look elsewhere.\n          The session's currently-selected SDK is forwarded so the picker\n          can preselect the right provider. */}\n      <SdkAuthPromptModal\n        agentId={agentId}\n        agentRef={agentRef}\n        initialProviderId={sessionState?.sdk ?? undefined}\n      />\n    </div>\n  );\n};\n\ninterface SdkAuthPromptModalProps {\n  agentId: string;\n  agentRef: { id: string; profile: string };\n  initialProviderId?: string;\n}\n\nconst SdkAuthPromptModal: FC<SdkAuthPromptModalProps> = ({\n  agentId,\n  agentRef,\n  initialProviderId,\n}) => {\n  const sdkAuthPrompt = useAgentManagerStore((s) => s.sdkAuthPrompt);\n  const setSdkAuthPrompt = useAgentManagerStore((s) => s.setSdkAuthPrompt);\n  // Track whether the inner card has at least one primary credential\n  // saved on the agent. The Continue button is gated on this so the user\n  // can't dismiss the modal without actually persisting a key — but the\n  // moment they save *any* of the either-or options it lights up.\n  const [authSatisfied, setAuthSatisfied] = useState(false);\n  const tr = useTr();\n\n  // Reset the satisfied flag whenever the modal re-opens for a fresh\n  // prompt (different agent / different session). Without this, dismissing\n  // and re-opening would leave the flag stuck at its previous value.\n  useEffect(() => {\n    if (sdkAuthPrompt && sdkAuthPrompt.agentId === agentId) {\n      setAuthSatisfied(false);\n    }\n  }, [sdkAuthPrompt, agentId]);\n\n  if (!sdkAuthPrompt || sdkAuthPrompt.agentId !== agentId) return null;\n\n  return (\n    <div className=\"fixed inset-0 z-50 flex items-center justify-center p-4\">\n      <div\n        className=\"absolute inset-0 bg-bg-overlay\"\n        onClick={() => setSdkAuthPrompt(null)}\n        aria-hidden\n      />\n      {/* Constrain height to the viewport and let the inner body scroll so the\n          modal never escapes the screen no matter how many providers/fields\n          render inside AIProviderCredentialsCard. The header + footer stay\n          sticky so the close + Continue buttons are always reachable. */}\n      <div className=\"relative w-full max-w-xl max-h-[85vh] flex flex-col rounded-lg border border-border-default bg-bg-surface shadow-xl overflow-hidden\">\n        <div className=\"flex items-center justify-between px-4 py-3 border-b border-border-default bg-bg-surface flex-shrink-0\">\n          <h3 className=\"text-base font-semibold text-text-primary truncate pr-2\">\n            {tr('vibecontrols.ai.sdkAuth.title', 'Configure AI provider credentials')}\n          </h3>\n          <button\n            type=\"button\"\n            onClick={() => setSdkAuthPrompt(null)}\n            className=\"p-1 rounded hover:bg-bg-sunken transition-colors flex-shrink-0\"\n            aria-label={tr('vibecontrols.common.close', 'Close')}\n          >\n            <X className=\"size-5 text-text-secondary\" />\n          </button>\n        </div>\n        <div className=\"flex-1 min-h-0 overflow-y-auto px-4 py-3 space-y-3\">\n          <p className=\"text-sm text-text-secondary\">\n            {tr(\n              'vibecontrols.ai.sdkAuth.body',\n              \"The agent doesn't have a credential configured for this provider. Save any one of the listed keys (you don't need all of them) and click Continue to retry.\"\n            )}\n          </p>\n          <AIProviderCredentialsCard\n            agent={agentRef}\n            initialProviderId={initialProviderId}\n            onProviderAuthSatisfiedChange={setAuthSatisfied}\n          />\n        </div>\n        <div className=\"flex items-center justify-end gap-2 px-4 py-3 border-t border-border-default bg-bg-surface flex-shrink-0\">\n          <button\n            type=\"button\"\n            onClick={() => setSdkAuthPrompt(null)}\n            className=\"px-3 py-1.5 rounded-md text-sm text-text-secondary hover:text-text-primary hover:bg-bg-sunken transition-colors\"\n          >\n            {tr('vibecontrols.common.close', 'Close')}\n          </button>\n          <button\n            type=\"button\"\n            onClick={() => setSdkAuthPrompt(null)}\n            disabled={!authSatisfied}\n            title={\n              authSatisfied\n                ? undefined\n                : tr(\n                    'vibecontrols.ai.sdkAuth.saveOneFirst',\n                    'Save at least one of the listed credentials to continue'\n                  )\n            }\n            className=\"px-3 py-1.5 rounded-md text-sm font-medium bg-action-primary-bg text-action-primary-text hover:bg-action-primary-bg-hover disabled:opacity-50 disabled:cursor-not-allowed transition-colors\"\n          >\n            {tr('vibecontrols.ai.sdkAuth.continue', 'Continue')}\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"AgentManagerChatPane.js","names":[],"sources":["../../../src/components/agent-manager/AgentManagerChatPane.tsx"],"sourcesContent":["/**\n * Main chat interface for a single Agent Manager session.\n *\n * Renders message list + input area, manages the send/receive flow,\n * fetches existing conversation logs on mount, and provides\n * auto-scroll, cancel, and in-session search support.\n */\n\nimport { useEffect, useRef, useState, useCallback, useMemo, type FC } from 'react';\nimport { useSearchParams } from 'react-router-dom';\nimport { Bookmark, PackagePlus, Search, X } from 'lucide-react';\nimport { useAgentManagerStore } from '@/store/agentManagerStore';\nimport { useAgentManagerStreaming } from '@/hooks/useAgentManagerStreaming';\nimport { useCachedInitialData } from '@/hooks/useCachedInitialData';\nimport { fetchSessionLogs } from '@/services/aiApi';\nimport { useActiveAgentProfile } from '@/hooks/useActiveAgentProfile';\nimport { useToggleAgentBookmark } from '@/hooks/useToggleAgentBookmark';\nimport { AgentManagerMessageList } from './AgentManagerMessageList';\nimport { AgentManagerInputArea } from './AgentManagerInputArea';\nimport { AgentManagerBookmarksDrawer } from './AgentManagerBookmarksDrawer';\nimport { PluginInstallModal } from './PluginInstallModal';\nimport { AIProviderCredentialsCard } from '@/components/ai/AIProviderCredentialsCard';\nimport type { AgentManagerMessage } from '@/types/agentManager';\nimport { useTr } from '../../shared/hooks/useTr';\n\ninterface AgentManagerChatPaneProps {\n  sessionId: string;\n  agentId: string;\n}\n\nexport const AgentManagerChatPane: FC<AgentManagerChatPaneProps> = ({ sessionId, agentId }) => {\n  const [loadingLogs, setLoadingLogs] = useState(false);\n  const [searchOpen, setSearchOpen] = useState(false);\n  const [searchQuery, setSearchQuery] = useState('');\n  // Provider-install modal triggered from the header. Lets users add a\n  // claude/codex/gemini/opencode plugin without leaving the conversation.\n  const [installModalOpen, setInstallModalOpen] = useState(false);\n  const [bookmarksDrawerOpen, setBookmarksDrawerOpen] = useState(false);\n  const [flashMessageId, setFlashMessageId] = useState<string | null>(null);\n  const [searchParams, setSearchParams] = useSearchParams();\n  const pendingScrollMessageId = searchParams.get('messageId');\n  const consumedScrollTargetRef = useRef<string | null>(null);\n  const tr = useTr();\n\n  const { agents } = useCachedInitialData();\n  const activeAgent = useMemo(\n    () => agents.find((a) => a.id === agentId) ?? null,\n    [agents, agentId]\n  );\n\n  const sessionState = useAgentManagerStore((s) => s.sessionStates[sessionId]);\n  const addMessage = useAgentManagerStore((s) => s.addMessage);\n\n  const messages = useMemo(() => sessionState?.messages ?? [], [sessionState?.messages]);\n\n  const { active: activeProfile } = useActiveAgentProfile(activeAgent?.id ?? null);\n  const agentRef = useMemo(\n    () => ({ id: agentId, profile: activeProfile }),\n    [agentId, activeProfile]\n  );\n\n  const { sendMessage, cancelStream, isStreaming } = useAgentManagerStreaming({\n    agent: agentRef,\n    sessionId,\n  });\n\n  const { bookmarkedIds, toggle: toggleBookmark } = useToggleAgentBookmark(sessionId);\n\n  const jumpToMessage = useCallback((messageId: string) => {\n    const el = document.querySelector(`[data-message-id=\"${messageId}\"]`);\n    if (!el) return;\n    el.scrollIntoView({ behavior: 'smooth', block: 'center' });\n    setFlashMessageId(messageId);\n    window.setTimeout(() => {\n      setFlashMessageId((current) => (current === messageId ? null : current));\n    }, 1500);\n  }, []);\n\n  const handleToggleBookmark = useCallback(\n    (messageId: string) => {\n      void toggleBookmark({ agentId, sessionId, messageId });\n    },\n    [toggleBookmark, agentId, sessionId]\n  );\n\n  const toggleSearch = useCallback(() => {\n    setSearchOpen((prev) => {\n      if (prev) setSearchQuery('');\n      return !prev;\n    });\n  }, []);\n\n  // Fetch existing conversation logs on mount\n  useEffect(() => {\n    let cancelled = false;\n\n    const loadExistingLogs = async () => {\n      // Only load if session has no messages yet\n      if (messages.length > 0) return;\n\n      setLoadingLogs(true);\n      try {\n        const logs = await fetchSessionLogs(agentRef, sessionId, {\n          types: ['input', 'output'],\n        });\n\n        if (cancelled || logs.length === 0) return;\n\n        const seenLogKeys = new Set<string>();\n\n        // Convert session logs to AgentManagerMessage format. The core AI\n        // route owns logging, but older provider builds also wrote the same\n        // input/output records; collapse same-second duplicates on restore.\n        for (const log of logs) {\n          const content = log.message || log.content || '';\n          const timestamp = log.timestamp || log.createdAt;\n          const timestampSecond = timestamp ? Math.floor(new Date(timestamp).getTime() / 1000) : 0;\n          const logKey = [log.type, content, log.model ?? '', timestampSecond].join('\\u0000');\n          if (seenLogKeys.has(logKey)) continue;\n          seenLogKeys.add(logKey);\n\n          const msg: AgentManagerMessage = {\n            id: log.id,\n            role: log.type === 'input' ? 'user' : 'assistant',\n            content,\n            timestamp,\n            tokens: log.tokenCount ? { input: 0, output: log.tokenCount } : undefined,\n            model: log.model,\n          };\n          addMessage(sessionId, msg);\n        }\n      } catch {\n        // Silent fail -- session may not have logs yet\n      } finally {\n        if (!cancelled) setLoadingLogs(false);\n      }\n    };\n\n    void loadExistingLogs();\n\n    return () => {\n      cancelled = true;\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- only run on mount\n  }, [agentId, sessionId]);\n\n  // Auto-scroll to a message linked via ?messageId=... (from drawer / cross-session page).\n  // Waits for logs to finish loading and the target to be in the DOM before scrolling.\n  useEffect(() => {\n    if (!pendingScrollMessageId || loadingLogs) return;\n    if (consumedScrollTargetRef.current === pendingScrollMessageId) return;\n\n    const exists = messages.some((m) => m.id === pendingScrollMessageId);\n    if (!exists) return;\n\n    consumedScrollTargetRef.current = pendingScrollMessageId;\n    jumpToMessage(pendingScrollMessageId);\n\n    // Strip the query param so a manual refresh doesn't re-trigger the flash.\n    const next = new URLSearchParams(searchParams);\n    next.delete('messageId');\n    setSearchParams(next, { replace: true });\n  }, [pendingScrollMessageId, loadingLogs, messages, jumpToMessage, searchParams, setSearchParams]);\n\n  return (\n    <div className=\"flex flex-col h-full min-h-0\" data-testid=\"agent-manager-chat-pane\">\n      {/* In-session search bar.\n          Layout: [search controls (flex-1)] ... [Manage AI providers].\n          The search input expands inside the LEFT cluster only, so the\n          Manage button stays anchored on the right and never shifts. */}\n      <div className=\"flex items-center gap-1 px-3 py-1 border-b border-border-default bg-bg-surface flex-shrink-0\">\n        <div className=\"flex items-center gap-1.5 min-w-0 flex-1\">\n          <button\n            type=\"button\"\n            onClick={toggleSearch}\n            className={`p-1 rounded transition-colors shrink-0 ${\n              searchOpen\n                ? 'bg-[var(--color-accent-soft)] text-text-primary'\n                : 'text-text-tertiary hover:text-text-secondary hover:bg-bg-elevated'\n            }`}\n            title={tr(\n              'vibecontrols.agentManager.chatPane.searchInSession',\n              'Search in session (Ctrl+F)'\n            )}\n            aria-label={tr(\n              'vibecontrols.agentManager.chatPane.searchInSession',\n              'Search in session'\n            )}\n          >\n            <Search className=\"size-3.5\" />\n          </button>\n          {searchOpen && (\n            <div className=\"flex items-center gap-1.5 flex-1 min-w-0\">\n              <input\n                aria-label=\"control\"\n                type=\"text\"\n                value={searchQuery}\n                onChange={(e) => setSearchQuery(e.target.value)}\n                placeholder={tr(\n                  'vibecontrols.agentManager.chatPane.searchPlaceholder',\n                  'Search in conversation...'\n                )}\n                className=\"flex-1 min-w-0 bg-transparent text-xs text-text-primary placeholder:text-text-tertiary focus:outline-none\"\n              />\n              {searchQuery && (\n                <button\n                  type=\"button\"\n                  onClick={() => setSearchQuery('')}\n                  className=\"p-0.5 rounded hover:bg-bg-elevated transition-colors\"\n                >\n                  <X className=\"size-3 text-text-tertiary\" />\n                </button>\n              )}\n            </div>\n          )}\n        </div>\n        <button\n          type=\"button\"\n          onClick={() => setBookmarksDrawerOpen(true)}\n          className=\"shrink-0 p-1 rounded transition-colors text-text-tertiary hover:text-text-secondary hover:bg-bg-elevated\"\n          title={tr(\n            'vibecontrols.agentManager.chatPane.bookmarksTooltip',\n            'View bookmarked messages'\n          )}\n          aria-label={tr('vibecontrols.agentManager.chatPane.bookmarksLabel', 'Bookmarks')}\n          data-testid=\"agent-manager-bookmarks-trigger\"\n        >\n          <Bookmark className=\"size-3.5\" />\n        </button>\n        <button\n          type=\"button\"\n          onClick={() => setInstallModalOpen(true)}\n          className=\"shrink-0 inline-flex items-center gap-1.5 rounded-md border border-border-default bg-bg-elevated px-2 py-1 text-xs font-medium text-text-primary transition-colors hover:bg-bg-sunken hover:border-[var(--color-accent-soft)]\"\n          title={tr(\n            'vibecontrols.agentManager.chatPane.manageProvidersTooltip',\n            'Install or remove AI providers (Claude, Codex, Gemini, OpenCode)'\n          )}\n          aria-label={tr(\n            'vibecontrols.agentManager.chatPane.manageProviders',\n            'Manage AI providers'\n          )}\n          data-testid=\"agent-manager-manage-providers\"\n        >\n          <PackagePlus className=\"size-3.5\" />\n          <span className=\"hidden sm:inline\">\n            {tr('vibecontrols.agentManager.chatPane.manageProviders', 'Manage AI providers')}\n          </span>\n        </button>\n      </div>\n\n      {/* Message list */}\n      {loadingLogs ? (\n        <div className=\"flex-1 flex items-center justify-center\">\n          <p className=\"text-sm text-text-secondary\">\n            {tr(\n              'vibecontrols.agentManager.chatPane.loadingConversation',\n              'Loading conversation...'\n            )}\n          </p>\n        </div>\n      ) : (\n        <AgentManagerMessageList\n          messages={messages}\n          isStreaming={isStreaming}\n          onCancelStream={cancelStream}\n          searchQuery={searchQuery}\n          bookmarkedIds={bookmarkedIds}\n          onToggleBookmark={handleToggleBookmark}\n          flashMessageId={flashMessageId}\n        />\n      )}\n\n      {/* Rich input area with controls */}\n      <AgentManagerInputArea\n        agentId={agentId}\n        sessionId={sessionId}\n        onSend={(text) => void sendMessage(text)}\n        onCancel={cancelStream}\n        agentTunnelUrl={activeAgent?.tunnelUrl ?? undefined}\n      />\n\n      {/* Per-session bookmarks drawer */}\n      <AgentManagerBookmarksDrawer\n        open={bookmarksDrawerOpen}\n        onClose={() => setBookmarksDrawerOpen(false)}\n        sessionId={sessionId}\n        messages={messages}\n        onJump={jumpToMessage}\n      />\n\n      {/* Header-triggered provider install/remove. Sits below the chat\n          tree so it can render full-screen without disturbing layout. */}\n      <PluginInstallModal\n        open={installModalOpen}\n        agentId={agentId}\n        onClose={() => setInstallModalOpen(false)}\n      />\n\n      {/* SDK auth prompt: opens when the streaming hook detects a missing\n          ANTHROPIC_API_KEY / ANTHROPIC_AUTH_TOKEN, so the user can save the\n          credential inline instead of being told to go look elsewhere.\n          The session's currently-selected SDK is forwarded so the picker\n          can preselect the right provider. */}\n      <SdkAuthPromptModal\n        agentId={agentId}\n        agentRef={agentRef}\n        initialProviderId={sessionState?.sdk ?? undefined}\n      />\n    </div>\n  );\n};\n\ninterface SdkAuthPromptModalProps {\n  agentId: string;\n  agentRef: { id: string; profile: string };\n  initialProviderId?: string;\n}\n\nconst SdkAuthPromptModal: FC<SdkAuthPromptModalProps> = ({\n  agentId,\n  agentRef,\n  initialProviderId,\n}) => {\n  const sdkAuthPrompt = useAgentManagerStore((s) => s.sdkAuthPrompt);\n  const setSdkAuthPrompt = useAgentManagerStore((s) => s.setSdkAuthPrompt);\n  // Track whether the inner card has at least one primary credential\n  // saved on the agent. The Continue button is gated on this so the user\n  // can't dismiss the modal without actually persisting a key — but the\n  // moment they save *any* of the either-or options it lights up.\n  const [authSatisfied, setAuthSatisfied] = useState(false);\n  const tr = useTr();\n\n  // Reset the satisfied flag whenever the modal re-opens for a fresh\n  // prompt (different agent / different session). Without this, dismissing\n  // and re-opening would leave the flag stuck at its previous value.\n  useEffect(() => {\n    if (sdkAuthPrompt && sdkAuthPrompt.agentId === agentId) {\n      setAuthSatisfied(false);\n    }\n  }, [sdkAuthPrompt, agentId]);\n\n  if (!sdkAuthPrompt || sdkAuthPrompt.agentId !== agentId) return null;\n\n  return (\n    <div className=\"fixed inset-0 z-50 flex items-center justify-center p-4\">\n      <div\n        className=\"absolute inset-0 bg-bg-overlay\"\n        onClick={() => setSdkAuthPrompt(null)}\n        aria-hidden\n      />\n      {/* Constrain height to the viewport and let the inner body scroll so the\n          modal never escapes the screen no matter how many providers/fields\n          render inside AIProviderCredentialsCard. The header + footer stay\n          sticky so the close + Continue buttons are always reachable. */}\n      <div className=\"relative w-full max-w-xl max-h-[85vh] flex flex-col rounded-lg border border-border-default bg-bg-surface shadow-xl overflow-hidden\">\n        <div className=\"flex items-center justify-between px-4 py-3 border-b border-border-default bg-bg-surface flex-shrink-0\">\n          <h3 className=\"text-base font-semibold text-text-primary truncate pr-2\">\n            {tr('vibecontrols.ai.sdkAuth.title', 'Configure AI provider credentials')}\n          </h3>\n          <button\n            type=\"button\"\n            onClick={() => setSdkAuthPrompt(null)}\n            className=\"p-1 rounded hover:bg-bg-sunken transition-colors flex-shrink-0\"\n            aria-label={tr('vibecontrols.common.close', 'Close')}\n          >\n            <X className=\"size-5 text-text-secondary\" />\n          </button>\n        </div>\n        <div className=\"flex-1 min-h-0 overflow-y-auto px-4 py-3 space-y-3\">\n          <p className=\"text-sm text-text-secondary\">\n            {tr(\n              'vibecontrols.ai.sdkAuth.body',\n              \"The agent doesn't have a credential configured for this provider. Save any one of the listed keys (you don't need all of them) and click Continue to retry.\"\n            )}\n          </p>\n          <AIProviderCredentialsCard\n            agent={agentRef}\n            initialProviderId={initialProviderId}\n            onProviderAuthSatisfiedChange={setAuthSatisfied}\n          />\n        </div>\n        <div className=\"flex items-center justify-end gap-2 px-4 py-3 border-t border-border-default bg-bg-surface flex-shrink-0\">\n          <button\n            type=\"button\"\n            onClick={() => setSdkAuthPrompt(null)}\n            className=\"px-3 py-1.5 rounded-md text-sm text-text-secondary hover:text-text-primary hover:bg-bg-sunken transition-colors\"\n          >\n            {tr('vibecontrols.common.close', 'Close')}\n          </button>\n          <button\n            type=\"button\"\n            onClick={() => setSdkAuthPrompt(null)}\n            disabled={!authSatisfied}\n            title={\n              authSatisfied\n                ? undefined\n                : tr(\n                    'vibecontrols.ai.sdkAuth.saveOneFirst',\n                    'Save at least one of the listed credentials to continue'\n                  )\n            }\n            className=\"px-3 py-1.5 rounded-md text-sm font-medium bg-action-primary-bg text-action-primary-text hover:bg-action-primary-bg-hover disabled:opacity-50 disabled:cursor-not-allowed transition-colors\"\n          >\n            {tr('vibecontrols.ai.sdkAuth.continue', 'Continue')}\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/components/agent-manager/AgentManagerInputArea.js

@@ -333,7 +333,7 @@ function y({ agentId: y, sessionId: b, onSend: x, onCancel: _e, mcpServers: ve =
 					/* @__PURE__ */ m("button", {
 						type: "button",
 						onClick: () => Ee(b),
-						className: `p-1.5 rounded text-xs font-medium transition-colors ${z.showThinking ? "bg-action-primary-bg/10 text-action-primary-text" : "text-text-tertiary hover:text-text-secondary"}`,
+						className: `p-1.5 rounded text-xs font-medium transition-colors ${z.showThinking ? "bg-[var(--color-accent-soft)] text-text-primary" : "text-text-tertiary hover:text-text-secondary"}`,
 						title: z.showThinking ? I("vibecontrols.agentManager.inputArea.hideThinking", "Hide thinking") : I("vibecontrols.agentManager.inputArea.showThinking", "Show thinking"),
 						children: "Think"
 					}),
@@ -395,12 +395,12 @@ function y({ agentId: y, sessionId: b, onSend: x, onCancel: _e, mcpServers: ve =
 					onKeyDown: He,
 					placeholder: I("vibecontrols.agentManager.inputArea.placeholder", "Type a message or / for commands... (Enter to send)"),
 					rows: 1,
-					className: "flex-1 resize-none rounded-lg border border-border-default bg-bg-primary px-3 py-2 text-sm text-text-primary placeholder:text-text-tertiary focus:outline-none focus:border-border-strong transition-colors",
+					className: "flex-1 resize-none rounded-lg border border-border-default bg-bg-surface px-3 py-2 text-sm text-text-primary placeholder:text-text-tertiary focus:outline-none focus:border-border-strong transition-colors",
 					disabled: J
 				}), J ? /* @__PURE__ */ m("button", {
 					type: "button",
 					onClick: Ue,
-					className: "flex-shrink-0 p-2 rounded-lg bg-status-error-bg text-status-error-text hover:opacity-90 transition-opacity",
+					className: "flex-shrink-0 p-2 rounded-lg bg-status-error-bg-subtle text-status-error-text hover:opacity-90 transition-opacity",
 					title: I("vibecontrols.agentManager.inputArea.cancel", "Cancel"),
 					children: /* @__PURE__ */ m(ge, { className: "size-4" })
 				}) : /* @__PURE__ */ h("div", {
@@ -437,7 +437,7 @@ function y({ agentId: y, sessionId: b, onSend: x, onCancel: _e, mcpServers: ve =
 										type: "datetime-local",
 										value: M,
 										onChange: (e) => N(e.target.value),
-										className: "w-full px-2 py-1 text-xs rounded border border-border-default bg-bg-primary text-text-primary focus:outline-none focus:border-border-strong"
+										className: "w-full px-2 py-1 text-xs rounded border border-border-default bg-bg-surface text-text-primary focus:outline-none focus:border-border-strong"
 									}),
 									/* @__PURE__ */ m("button", {
 										type: "button",