@burdenoff/microfe-vibecontrols 2026.623.1 → 2026.623.3

package/dist/pages/VibeTaskDetailPage.js

@@ -45,7 +45,7 @@ function S() {
 		children: /* @__PURE__ */ v("div", {
 			className: "text-center space-y-2",
 			children: [/* @__PURE__ */ _("h2", {
-				className: "text-lg font-semibold text-foreground",
+				className: "text-lg font-semibold text-text-primary",
 				children: C("vibeTask.accessDenied", "Access Denied")
 			}), /* @__PURE__ */ _("p", {
 				className: "text-sm text-text-secondary",
@@ -70,7 +70,7 @@ function S() {
 					/* @__PURE__ */ _("button", {
 						type: "button",
 						onClick: () => T(-1),
-						className: "p-1.5 rounded hover:bg-bg-secondary transition-colors",
+						className: "p-1.5 rounded hover:bg-bg-sunken transition-colors",
 						children: /* @__PURE__ */ _(l, { size: 18 })
 					}),
 					/* @__PURE__ */ v("div", {
@@ -88,7 +88,7 @@ function S() {
 						children: /* @__PURE__ */ v("button", {
 							type: "button",
 							onClick: () => w && z({ variables: { id: w } }),
-							className: "flex items-center gap-1.5 px-3 py-1.5 text-sm bg-status-success-bg/10 text-status-success-text border border-status-success-border/30 rounded-lg hover:bg-status-success-bg/20 transition-colors",
+							className: "flex items-center gap-1.5 px-3 py-1.5 text-sm bg-status-success-bg-subtle text-status-success-text border border-status-success-border rounded-button hover:bg-bg-sunken transition-colors",
 							children: [/* @__PURE__ */ _(f, { size: 14 }), C("vibeTask.triggerNow", "Trigger Now")]
 						})
 					})
@@ -214,7 +214,7 @@ function S() {
 								})
 							]
 						}) }), /* @__PURE__ */ _("tbody", { children: R.map((e) => /* @__PURE__ */ v("tr", {
-							className: "border-b border-border-default hover:bg-bg-secondary/50 transition-colors",
+							className: "border-b border-border-default hover:bg-bg-sunken transition-colors",
 							children: [
 								/* @__PURE__ */ _("td", {
 									className: "px-4 py-2.5 text-text-primary",
@@ -239,7 +239,7 @@ function S() {
 									children: k ? /* @__PURE__ */ v("button", {
 										type: "button",
 										onClick: () => B(e),
-										className: "inline-flex items-center gap-1 px-2 py-1 text-xs text-text-secondary hover:text-text-primary rounded hover:bg-bg-secondary transition-colors",
+										className: "inline-flex items-center gap-1 px-2 py-1 text-xs text-text-secondary hover:text-text-primary rounded hover:bg-bg-sunken transition-colors",
 										children: [/* @__PURE__ */ _(d, { size: 12 }), C("vibeTask.viewLogs", "View Logs")]
 									}) : /* @__PURE__ */ _("span", {
 										className: "text-xs text-text-tertiary",

package/dist/pages/VibeTaskDetailPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"VibeTaskDetailPage.js","names":[],"sources":["../../src/pages/VibeTaskDetailPage.tsx"],"sourcesContent":["import { useState, useCallback } from 'react';\nimport { useParams, useNavigate } from 'react-router-dom';\nimport { usePermissions } from '@burdenoff/fe-libs/shared/providers/shell';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { VIBE_PERMISSIONS } from '../constants/permissions';\nimport { ArrowLeft, Play, Clock, Zap, Eye } from 'lucide-react';\nimport { MotionPage, MotionList, MotionItem } from '@burdenoff/fe-libs/shared/motion';\nimport { LogsDrawer } from '../components/vibecalendar/LogsDrawer';\nimport { STATUS_COLORS } from '../components/vibecalendar/types';\nimport type { VibeCalendarExecution } from '../components/vibecalendar/types';\nimport {\n  useGetVibeCalendarTaskQuery,\n  useListVibeCalendarExecutionsQuery,\n  useTriggerVibeCalendarTaskNowMutation,\n} from '@/generated/wspace-operations';\n\n/**\n * Vibe Task Detail Page\n *\n * Shows full details of a scheduled calendar task. In the simplified\n * Action-only schema a task is just a reference to a VibeControls\n * Action plus a schedule — the executor details live on the Action.\n */\nexport function VibeTaskDetailPage() {\n  const { t } = useI18n();\n  const tr = useCallback(\n    (key: string, fallback: string): string => {\n      const value = t(key);\n      return value === key ? fallback : value;\n    },\n    [t]\n  );\n  const { taskId } = useParams<{ taskId: string }>();\n  const navigate = useNavigate();\n  const { hasPermission, isLoading: permissionsLoading, permissions } = usePermissions();\n  const canReadExecutionLogs = hasPermission(VIBE_PERMISSIONS.LOG_READ);\n\n  const [showLogsDrawer, setShowLogsDrawer] = useState(false);\n  const [selectedExecution, setSelectedExecution] = useState<VibeCalendarExecution | null>(null);\n\n  const { data: taskData, loading: taskLoading } = useGetVibeCalendarTaskQuery({\n    variables: { id: taskId! },\n    skip: !taskId,\n  });\n  const task = taskData?.vibeCalendarTask;\n\n  const { data: execData } = useListVibeCalendarExecutionsQuery({\n    variables: { taskId: taskId! },\n    skip: !taskId,\n  });\n  type RawExecArray = NonNullable<typeof execData>['vibeCalendarExecutions'];\n  type RawExec = NonNullable<RawExecArray>[number];\n  const executions: VibeCalendarExecution[] = (execData?.vibeCalendarExecutions ?? []).map(\n    (raw: RawExec): VibeCalendarExecution => {\n      return {\n        id: raw.id,\n        taskId: raw.taskId,\n        status: raw.status,\n        output: canReadExecutionLogs ? (raw.output ?? null) : null,\n        exitCode: raw.exitCode ?? null,\n        webhookStatusCode: null,\n        startedAt: raw.startedAt ?? raw.completedAt ?? null,\n        completedAt: raw.completedAt ?? null,\n        error: canReadExecutionLogs ? (raw.error ?? null) : null,\n      };\n    }\n  );\n\n  const [triggerNow] = useTriggerVibeCalendarTaskNowMutation({\n    refetchQueries: ['GetVibeCalendarTask', 'ListVibeCalendarExecutions'],\n  });\n\n  const handleViewLogs = useCallback((execution: VibeCalendarExecution) => {\n    setSelectedExecution(execution);\n    setShowLogsDrawer(true);\n  }, []);\n\n  if (permissionsLoading)\n    return (\n      <div className=\"flex items-center justify-center min-h-[400px]\">\n        <p className=\"text-text-secondary\">\n          {tr('vibeTask.loadingPermissions', 'Loading permissions...')}\n        </p>\n      </div>\n    );\n  if (\n    permissions &&\n    (permissions.permissionStrings?.length ?? 0) > 0 &&\n    !hasPermission(VIBE_PERMISSIONS.CALENDAR_AGENT_TASK_READ)\n  )\n    return (\n      <div className=\"flex items-center justify-center min-h-[400px]\">\n        <div className=\"text-center space-y-2\">\n          <h2 className=\"text-lg font-semibold text-foreground\">\n            {tr('vibeTask.accessDenied', 'Access Denied')}\n          </h2>\n          <p className=\"text-sm text-text-secondary\">\n            {tr('vibeTask.accessDeniedDesc', \"You don't have permission to access this page.\")}\n          </p>\n        </div>\n      </div>\n    );\n\n  if (taskLoading && !task) {\n    return (\n      <div className=\"flex items-center justify-center h-full\">\n        <p className=\"text-sm text-text-secondary\">\n          {tr('vibeTask.loadingTask', 'Loading task details...')}\n        </p>\n      </div>\n    );\n  }\n\n  const title = task?.actionId\n    ? `${tr('vibeTask.action', 'Action')}: ${task.actionId}`\n    : 'Task Details';\n  const description = task?.cronExpression || `Task ID: ${taskId}`;\n  const isRecurringTask = Boolean(task?.cronExpression || task?.rrule);\n\n  return (\n    <MotionPage className=\"flex flex-col h-full p-4 gap-6\">\n      {/* Back + Header */}\n      <div className=\"flex flex-col gap-3 sm:flex-row sm:items-center\">\n        <button\n          type=\"button\"\n          onClick={() => navigate(-1)}\n          className=\"p-1.5 rounded hover:bg-bg-secondary transition-colors\"\n        >\n          <ArrowLeft size={18} />\n        </button>\n        <div className=\"flex-1 min-w-0\">\n          <h1 className=\"text-xl font-bold text-text-primary\">{title}</h1>\n          <p className=\"text-sm text-text-secondary\">{description}</p>\n        </div>\n        <div className=\"flex w-full flex-wrap items-center gap-2 sm:w-auto sm:justify-end\">\n          <button\n            type=\"button\"\n            onClick={() => taskId && triggerNow({ variables: { id: taskId } })}\n            className=\"flex items-center gap-1.5 px-3 py-1.5 text-sm bg-status-success-bg/10 text-status-success-text border border-status-success-border/30 rounded-lg hover:bg-status-success-bg/20 transition-colors\"\n          >\n            <Play size={14} />\n            {tr('vibeTask.triggerNow', 'Trigger Now')}\n          </button>\n        </div>\n      </div>\n\n      {/* Info Cards */}\n      <MotionList stagger={0.04} className=\"grid grid-cols-1 md:grid-cols-3 gap-4\">\n        <MotionItem className=\"bg-bg-surface border border-border-default rounded-lg p-4\">\n          <div className=\"flex items-center gap-2 mb-2\">\n            <Zap size={16} className=\"text-text-tertiary\" />\n            <span className=\"text-sm font-medium text-text-secondary\">\n              {tr('vibeTask.action', 'Action')}\n            </span>\n          </div>\n          <p className=\"text-sm font-mono text-text-primary break-all\">{task?.actionId || 'N/A'}</p>\n          <p className=\"text-xs text-text-tertiary mt-1\">\n            {tr('vibeTask.actionExecutorHint', 'Executor config comes from the Action definition.')}\n          </p>\n        </MotionItem>\n\n        <MotionItem className=\"bg-bg-surface border border-border-default rounded-lg p-4\">\n          <div className=\"flex items-center gap-2 mb-2\">\n            <Clock size={16} className=\"text-text-tertiary\" />\n            <span className=\"text-sm font-medium text-text-secondary\">\n              {tr('vibeTask.schedule', 'Schedule')}\n            </span>\n          </div>\n          <p className=\"text-sm text-text-primary\">\n            {isRecurringTask\n              ? tr('vibeTask.recurring', 'Recurring')\n              : tr('vibeTask.oneTime', 'One-time')}\n          </p>\n          {task?.cronExpression && (\n            <p className=\"text-xs font-mono text-text-tertiary mt-1\">{task.cronExpression}</p>\n          )}\n          {task?.nextExecutionAt && (\n            <p className=\"text-xs text-text-tertiary mt-1\">\n              {tr('vibeTask.next', 'Next')}: {new Date(task.nextExecutionAt).toLocaleString()}\n            </p>\n          )}\n        </MotionItem>\n\n        <MotionItem className=\"bg-bg-surface border border-border-default rounded-lg p-4\">\n          <div className=\"flex items-center gap-2 mb-2\">\n            <span className=\"text-sm font-medium text-text-secondary\">\n              {tr('vibeTask.status', 'Status')}\n            </span>\n          </div>\n          <span\n            className={`inline-flex px-2 py-0.5 text-xs rounded-full border ${\n              STATUS_COLORS[task?.status ?? ''] || ''\n            }`}\n          >\n            {task?.status ?? 'UNKNOWN'}\n          </span>\n          {task?.lastExecutedAt && (\n            <p className=\"text-xs text-text-tertiary mt-2\">\n              {tr('vibeTask.lastRun', 'Last run')}: {new Date(task.lastExecutedAt).toLocaleString()}\n            </p>\n          )}\n        </MotionItem>\n      </MotionList>\n\n      {/* Execution History */}\n      <div className=\"flex-1 overflow-auto\">\n        <h2 className=\"text-base font-semibold text-text-primary mb-3\">\n          {tr('vibeTask.execHistory', 'Execution History')}\n        </h2>\n\n        {executions.length === 0 ? (\n          <div className=\"flex items-center justify-center py-12\">\n            <p className=\"text-sm text-text-secondary\">\n              {tr('vibeTask.noExecutions', 'No executions yet')}\n            </p>\n          </div>\n        ) : (\n          <div className=\"overflow-x-auto rounded-lg border border-border-default\">\n            <table className=\"w-full text-sm min-w-[640px]\">\n              <thead>\n                <tr className=\"bg-bg-sunken border-b border-border-default\">\n                  <th className=\"text-left px-4 py-2 text-text-secondary font-medium\">\n                    {tr('vibeTask.started', 'Started')}\n                  </th>\n                  <th className=\"text-left px-4 py-2 text-text-secondary font-medium\">\n                    {tr('vibeTask.status', 'Status')}\n                  </th>\n                  <th className=\"text-left px-4 py-2 text-text-secondary font-medium\">\n                    {tr('vibeTask.exitCode', 'Exit Code')}\n                  </th>\n                  <th className=\"text-right px-4 py-2 text-text-secondary font-medium\">\n                    {tr('vibeTask.actions', 'Actions')}\n                  </th>\n                </tr>\n              </thead>\n              <tbody>\n                {executions.map((exec) => (\n                  <tr\n                    key={exec.id}\n                    className=\"border-b border-border-default hover:bg-bg-secondary/50 transition-colors\"\n                  >\n                    <td className=\"px-4 py-2.5 text-text-primary\">\n                      {exec.startedAt ? new Date(exec.startedAt).toLocaleString() : '-'}\n                    </td>\n                    <td className=\"px-4 py-2.5\">\n                      <span\n                        className={`inline-flex px-2 py-0.5 text-xs rounded-full border ${\n                          STATUS_COLORS[exec.status] || ''\n                        }`}\n                      >\n                        {exec.status}\n                      </span>\n                    </td>\n                    <td className=\"px-4 py-2.5\">\n                      {exec.exitCode !== null ? (\n                        <span\n                          className={`font-mono ${exec.exitCode === 0 ? 'text-status-success-text' : 'text-status-error-text'}`}\n                        >\n                          {exec.exitCode}\n                        </span>\n                      ) : (\n                        '-'\n                      )}\n                    </td>\n                    <td className=\"px-4 py-2.5 text-right\">\n                      {canReadExecutionLogs ? (\n                        <button\n                          type=\"button\"\n                          onClick={() => handleViewLogs(exec)}\n                          className=\"inline-flex items-center gap-1 px-2 py-1 text-xs text-text-secondary hover:text-text-primary rounded hover:bg-bg-secondary transition-colors\"\n                        >\n                          <Eye size={12} />\n                          {tr('vibeTask.viewLogs', 'View Logs')}\n                        </button>\n                      ) : (\n                        <span className=\"text-xs text-text-tertiary\">\n                          {tr('vibeTask.logsPermissionRequired', 'Log access required')}\n                        </span>\n                      )}\n                    </td>\n                  </tr>\n                ))}\n              </tbody>\n            </table>\n          </div>\n        )}\n      </div>\n\n      {/* Logs Drawer */}\n      <LogsDrawer\n        isOpen={showLogsDrawer}\n        onClose={() => setShowLogsDrawer(false)}\n        execution={selectedExecution}\n        taskTitle={title}\n        agentId=\"\"\n      />\n    </MotionPage>\n  );\n}\n"],"mappings":";;;;;;;;;;;;AAuBA,SAAgB,IAAqB;CACnC,IAAM,EAAE,SAAM,GAAS,EACjB,IAAK,GACR,GAAa,MAA6B;EACzC,IAAM,IAAQ,EAAE,EAAI;AACpB,SAAO,MAAU,IAAM,IAAW;IAEpC,CAAC,EAAE,CACJ,EACK,EAAE,cAAW,GAA+B,EAC5C,IAAW,GAAa,EACxB,EAAE,kBAAe,WAAW,GAAoB,mBAAgB,GAAgB,EAChF,IAAuB,EAAc,EAAiB,SAAS,EAE/D,CAAC,GAAgB,KAAqB,EAAS,GAAM,EACrD,CAAC,GAAmB,KAAwB,EAAuC,KAAK,EAExF,EAAE,MAAM,GAAU,SAAS,MAAgB,EAA4B;EAC3E,WAAW,EAAE,IAAI,GAAS;EAC1B,MAAM,CAAC;EACR,CAAC,EACI,IAAO,GAAU,kBAEjB,EAAE,MAAM,MAAa,EAAmC;EAC5D,WAAW,EAAU,WAAS;EAC9B,MAAM,CAAC;EACR,CAAC,EAGI,KAAuC,GAAU,0BAA0B,EAAE,EAAE,KAClF,OACQ;EACL,IAAI,EAAI;EACR,QAAQ,EAAI;EACZ,QAAQ,EAAI;EACZ,QAAQ,IAAwB,EAAI,UAAU,OAAQ;EACtD,UAAU,EAAI,YAAY;EAC1B,mBAAmB;EACnB,WAAW,EAAI,aAAa,EAAI,eAAe;EAC/C,aAAa,EAAI,eAAe;EAChC,OAAO,IAAwB,EAAI,SAAS,OAAQ;EACrD,EAEJ,EAEK,CAAC,KAAc,EAAsC,EACzD,gBAAgB,CAAC,uBAAuB,6BAA6B,EACtE,CAAC,EAEI,IAAiB,GAAa,MAAqC;AAEvE,EADA,EAAqB,EAAU,EAC/B,EAAkB,GAAK;IACtB,EAAE,CAAC;AAEN,KAAI,EACF,QACE,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,KAAD;GAAG,WAAU;aACV,EAAG,+BAA+B,yBAAyB;GAC1D,CAAA;EACA,CAAA;AAEV,KACE,MACC,EAAY,mBAAmB,UAAU,KAAK,KAC/C,CAAC,EAAc,EAAiB,yBAAyB,CAEzD,QACE,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,MAAD;IAAI,WAAU;cACX,EAAG,yBAAyB,gBAAgB;IAC1C,CAAA,EACL,kBAAC,KAAD;IAAG,WAAU;cACV,EAAG,6BAA6B,iDAAiD;IAChF,CAAA,CACA;;EACF,CAAA;AAGV,KAAI,KAAe,CAAC,EAClB,QACE,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,KAAD;GAAG,WAAU;aACV,EAAG,wBAAwB,0BAA0B;GACpD,CAAA;EACA,CAAA;CAIV,IAAM,IAAQ,GAAM,WAChB,GAAG,EAAG,mBAAmB,SAAS,CAAC,IAAI,EAAK,aAC5C,gBACE,IAAc,GAAM,kBAAkB,YAAY,KAClD,IAAkB,GAAQ,GAAM,kBAAkB,GAAM;AAE9D,QACE,kBAAC,GAAD;EAAY,WAAU;YAAtB;GAEE,kBAAC,OAAD;IAAK,WAAU;cAAf;KACE,kBAAC,UAAD;MACE,MAAK;MACL,eAAe,EAAS,GAAG;MAC3B,WAAU;gBAEV,kBAAC,GAAD,EAAW,MAAM,IAAM,CAAA;MAChB,CAAA;KACT,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,MAAD;OAAI,WAAU;iBAAuC;OAAW,CAAA,EAChE,kBAAC,KAAD;OAAG,WAAU;iBAA+B;OAAgB,CAAA,CACxD;;KACN,kBAAC,OAAD;MAAK,WAAU;gBACb,kBAAC,UAAD;OACE,MAAK;OACL,eAAe,KAAU,EAAW,EAAE,WAAW,EAAE,IAAI,GAAQ,EAAE,CAAC;OAClE,WAAU;iBAHZ,CAKE,kBAAC,GAAD,EAAM,MAAM,IAAM,CAAA,EACjB,EAAG,uBAAuB,cAAc,CAClC;;MACL,CAAA;KACF;;GAGN,kBAAC,GAAD;IAAY,SAAS;IAAM,WAAU;cAArC;KACE,kBAAC,GAAD;MAAY,WAAU;gBAAtB;OACE,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,GAAD;SAAK,MAAM;SAAI,WAAU;SAAuB,CAAA,EAChD,kBAAC,QAAD;SAAM,WAAU;mBACb,EAAG,mBAAmB,SAAS;SAC3B,CAAA,CACH;;OACN,kBAAC,KAAD;QAAG,WAAU;kBAAiD,GAAM,YAAY;QAAU,CAAA;OAC1F,kBAAC,KAAD;QAAG,WAAU;kBACV,EAAG,+BAA+B,oDAAoD;QACrF,CAAA;OACO;;KAEb,kBAAC,GAAD;MAAY,WAAU;gBAAtB;OACE,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,GAAD;SAAO,MAAM;SAAI,WAAU;SAAuB,CAAA,EAClD,kBAAC,QAAD;SAAM,WAAU;mBACb,EAAG,qBAAqB,WAAW;SAC/B,CAAA,CACH;;OACN,kBAAC,KAAD;QAAG,WAAU;kBACV,IACG,EAAG,sBAAsB,YAAY,GACrC,EAAG,oBAAoB,WAAW;QACpC,CAAA;OACH,GAAM,kBACL,kBAAC,KAAD;QAAG,WAAU;kBAA6C,EAAK;QAAmB,CAAA;OAEnF,GAAM,mBACL,kBAAC,KAAD;QAAG,WAAU;kBAAb;SACG,EAAG,iBAAiB,OAAO;SAAC;SAAG,IAAI,KAAK,EAAK,gBAAgB,CAAC,gBAAgB;SAC7E;;OAEK;;KAEb,kBAAC,GAAD;MAAY,WAAU;gBAAtB;OACE,kBAAC,OAAD;QAAK,WAAU;kBACb,kBAAC,QAAD;SAAM,WAAU;mBACb,EAAG,mBAAmB,SAAS;SAC3B,CAAA;QACH,CAAA;OACN,kBAAC,QAAD;QACE,WAAW,uDACT,EAAc,GAAM,UAAU,OAAO;kBAGtC,GAAM,UAAU;QACZ,CAAA;OACN,GAAM,kBACL,kBAAC,KAAD;QAAG,WAAU;kBAAb;SACG,EAAG,oBAAoB,WAAW;SAAC;SAAG,IAAI,KAAK,EAAK,eAAe,CAAC,gBAAgB;SACnF;;OAEK;;KACF;;GAGb,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,MAAD;KAAI,WAAU;eACX,EAAG,wBAAwB,oBAAoB;KAC7C,CAAA,EAEJ,EAAW,WAAW,IACrB,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,KAAD;MAAG,WAAU;gBACV,EAAG,yBAAyB,oBAAoB;MAC/C,CAAA;KACA,CAAA,GAEN,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,SAAD;MAAO,WAAU;gBAAjB,CACE,kBAAC,SAAD,EAAA,UACE,kBAAC,MAAD;OAAI,WAAU;iBAAd;QACE,kBAAC,MAAD;SAAI,WAAU;mBACX,EAAG,oBAAoB,UAAU;SAC/B,CAAA;QACL,kBAAC,MAAD;SAAI,WAAU;mBACX,EAAG,mBAAmB,SAAS;SAC7B,CAAA;QACL,kBAAC,MAAD;SAAI,WAAU;mBACX,EAAG,qBAAqB,YAAY;SAClC,CAAA;QACL,kBAAC,MAAD;SAAI,WAAU;mBACX,EAAG,oBAAoB,UAAU;SAC/B,CAAA;QACF;UACC,CAAA,EACR,kBAAC,SAAD,EAAA,UACG,EAAW,KAAK,MACf,kBAAC,MAAD;OAEE,WAAU;iBAFZ;QAIE,kBAAC,MAAD;SAAI,WAAU;mBACX,EAAK,YAAY,IAAI,KAAK,EAAK,UAAU,CAAC,gBAAgB,GAAG;SAC3D,CAAA;QACL,kBAAC,MAAD;SAAI,WAAU;mBACZ,kBAAC,QAAD;UACE,WAAW,uDACT,EAAc,EAAK,WAAW;oBAG/B,EAAK;UACD,CAAA;SACJ,CAAA;QACL,kBAAC,MAAD;SAAI,WAAU;mBACX,EAAK,aAAa,OAOjB,MANA,kBAAC,QAAD;UACE,WAAW,aAAa,EAAK,aAAa,IAAI,6BAA6B;oBAE1E,EAAK;UACD,CAAA;SAIN,CAAA;QACL,kBAAC,MAAD;SAAI,WAAU;mBACX,IACC,kBAAC,UAAD;UACE,MAAK;UACL,eAAe,EAAe,EAAK;UACnC,WAAU;oBAHZ,CAKE,kBAAC,GAAD,EAAK,MAAM,IAAM,CAAA,EAChB,EAAG,qBAAqB,YAAY,CAC9B;cAET,kBAAC,QAAD;UAAM,WAAU;oBACb,EAAG,mCAAmC,sBAAsB;UACxD,CAAA;SAEN,CAAA;QACF;SA1CE,EAAK,GA0CP,CACL,EACI,CAAA,CACF;;KACJ,CAAA,CAEJ;;GAGN,kBAAC,GAAD;IACE,QAAQ;IACR,eAAe,EAAkB,GAAM;IACvC,WAAW;IACX,WAAW;IACX,SAAQ;IACR,CAAA;GACS"}
+{"version":3,"file":"VibeTaskDetailPage.js","names":[],"sources":["../../src/pages/VibeTaskDetailPage.tsx"],"sourcesContent":["import { useState, useCallback } from 'react';\nimport { useParams, useNavigate } from 'react-router-dom';\nimport { usePermissions } from '@burdenoff/fe-libs/shared/providers/shell';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { VIBE_PERMISSIONS } from '../constants/permissions';\nimport { ArrowLeft, Play, Clock, Zap, Eye } from 'lucide-react';\nimport { MotionPage, MotionList, MotionItem } from '@burdenoff/fe-libs/shared/motion';\nimport { LogsDrawer } from '../components/vibecalendar/LogsDrawer';\nimport { STATUS_COLORS } from '../components/vibecalendar/types';\nimport type { VibeCalendarExecution } from '../components/vibecalendar/types';\nimport {\n  useGetVibeCalendarTaskQuery,\n  useListVibeCalendarExecutionsQuery,\n  useTriggerVibeCalendarTaskNowMutation,\n} from '@/generated/wspace-operations';\n\n/**\n * Vibe Task Detail Page\n *\n * Shows full details of a scheduled calendar task. In the simplified\n * Action-only schema a task is just a reference to a VibeControls\n * Action plus a schedule — the executor details live on the Action.\n */\nexport function VibeTaskDetailPage() {\n  const { t } = useI18n();\n  const tr = useCallback(\n    (key: string, fallback: string): string => {\n      const value = t(key);\n      return value === key ? fallback : value;\n    },\n    [t]\n  );\n  const { taskId } = useParams<{ taskId: string }>();\n  const navigate = useNavigate();\n  const { hasPermission, isLoading: permissionsLoading, permissions } = usePermissions();\n  const canReadExecutionLogs = hasPermission(VIBE_PERMISSIONS.LOG_READ);\n\n  const [showLogsDrawer, setShowLogsDrawer] = useState(false);\n  const [selectedExecution, setSelectedExecution] = useState<VibeCalendarExecution | null>(null);\n\n  const { data: taskData, loading: taskLoading } = useGetVibeCalendarTaskQuery({\n    variables: { id: taskId! },\n    skip: !taskId,\n  });\n  const task = taskData?.vibeCalendarTask;\n\n  const { data: execData } = useListVibeCalendarExecutionsQuery({\n    variables: { taskId: taskId! },\n    skip: !taskId,\n  });\n  type RawExecArray = NonNullable<typeof execData>['vibeCalendarExecutions'];\n  type RawExec = NonNullable<RawExecArray>[number];\n  const executions: VibeCalendarExecution[] = (execData?.vibeCalendarExecutions ?? []).map(\n    (raw: RawExec): VibeCalendarExecution => {\n      return {\n        id: raw.id,\n        taskId: raw.taskId,\n        status: raw.status,\n        output: canReadExecutionLogs ? (raw.output ?? null) : null,\n        exitCode: raw.exitCode ?? null,\n        webhookStatusCode: null,\n        startedAt: raw.startedAt ?? raw.completedAt ?? null,\n        completedAt: raw.completedAt ?? null,\n        error: canReadExecutionLogs ? (raw.error ?? null) : null,\n      };\n    }\n  );\n\n  const [triggerNow] = useTriggerVibeCalendarTaskNowMutation({\n    refetchQueries: ['GetVibeCalendarTask', 'ListVibeCalendarExecutions'],\n  });\n\n  const handleViewLogs = useCallback((execution: VibeCalendarExecution) => {\n    setSelectedExecution(execution);\n    setShowLogsDrawer(true);\n  }, []);\n\n  if (permissionsLoading)\n    return (\n      <div className=\"flex items-center justify-center min-h-[400px]\">\n        <p className=\"text-text-secondary\">\n          {tr('vibeTask.loadingPermissions', 'Loading permissions...')}\n        </p>\n      </div>\n    );\n  if (\n    permissions &&\n    (permissions.permissionStrings?.length ?? 0) > 0 &&\n    !hasPermission(VIBE_PERMISSIONS.CALENDAR_AGENT_TASK_READ)\n  )\n    return (\n      <div className=\"flex items-center justify-center min-h-[400px]\">\n        <div className=\"text-center space-y-2\">\n          <h2 className=\"text-lg font-semibold text-text-primary\">\n            {tr('vibeTask.accessDenied', 'Access Denied')}\n          </h2>\n          <p className=\"text-sm text-text-secondary\">\n            {tr('vibeTask.accessDeniedDesc', \"You don't have permission to access this page.\")}\n          </p>\n        </div>\n      </div>\n    );\n\n  if (taskLoading && !task) {\n    return (\n      <div className=\"flex items-center justify-center h-full\">\n        <p className=\"text-sm text-text-secondary\">\n          {tr('vibeTask.loadingTask', 'Loading task details...')}\n        </p>\n      </div>\n    );\n  }\n\n  const title = task?.actionId\n    ? `${tr('vibeTask.action', 'Action')}: ${task.actionId}`\n    : 'Task Details';\n  const description = task?.cronExpression || `Task ID: ${taskId}`;\n  const isRecurringTask = Boolean(task?.cronExpression || task?.rrule);\n\n  return (\n    <MotionPage className=\"flex flex-col h-full p-4 gap-6\">\n      {/* Back + Header */}\n      <div className=\"flex flex-col gap-3 sm:flex-row sm:items-center\">\n        <button\n          type=\"button\"\n          onClick={() => navigate(-1)}\n          className=\"p-1.5 rounded hover:bg-bg-sunken transition-colors\"\n        >\n          <ArrowLeft size={18} />\n        </button>\n        <div className=\"flex-1 min-w-0\">\n          <h1 className=\"text-xl font-bold text-text-primary\">{title}</h1>\n          <p className=\"text-sm text-text-secondary\">{description}</p>\n        </div>\n        <div className=\"flex w-full flex-wrap items-center gap-2 sm:w-auto sm:justify-end\">\n          <button\n            type=\"button\"\n            onClick={() => taskId && triggerNow({ variables: { id: taskId } })}\n            className=\"flex items-center gap-1.5 px-3 py-1.5 text-sm bg-status-success-bg-subtle text-status-success-text border border-status-success-border rounded-button hover:bg-bg-sunken transition-colors\"\n          >\n            <Play size={14} />\n            {tr('vibeTask.triggerNow', 'Trigger Now')}\n          </button>\n        </div>\n      </div>\n\n      {/* Info Cards */}\n      <MotionList stagger={0.04} className=\"grid grid-cols-1 md:grid-cols-3 gap-4\">\n        <MotionItem className=\"bg-bg-surface border border-border-default rounded-lg p-4\">\n          <div className=\"flex items-center gap-2 mb-2\">\n            <Zap size={16} className=\"text-text-tertiary\" />\n            <span className=\"text-sm font-medium text-text-secondary\">\n              {tr('vibeTask.action', 'Action')}\n            </span>\n          </div>\n          <p className=\"text-sm font-mono text-text-primary break-all\">{task?.actionId || 'N/A'}</p>\n          <p className=\"text-xs text-text-tertiary mt-1\">\n            {tr('vibeTask.actionExecutorHint', 'Executor config comes from the Action definition.')}\n          </p>\n        </MotionItem>\n\n        <MotionItem className=\"bg-bg-surface border border-border-default rounded-lg p-4\">\n          <div className=\"flex items-center gap-2 mb-2\">\n            <Clock size={16} className=\"text-text-tertiary\" />\n            <span className=\"text-sm font-medium text-text-secondary\">\n              {tr('vibeTask.schedule', 'Schedule')}\n            </span>\n          </div>\n          <p className=\"text-sm text-text-primary\">\n            {isRecurringTask\n              ? tr('vibeTask.recurring', 'Recurring')\n              : tr('vibeTask.oneTime', 'One-time')}\n          </p>\n          {task?.cronExpression && (\n            <p className=\"text-xs font-mono text-text-tertiary mt-1\">{task.cronExpression}</p>\n          )}\n          {task?.nextExecutionAt && (\n            <p className=\"text-xs text-text-tertiary mt-1\">\n              {tr('vibeTask.next', 'Next')}: {new Date(task.nextExecutionAt).toLocaleString()}\n            </p>\n          )}\n        </MotionItem>\n\n        <MotionItem className=\"bg-bg-surface border border-border-default rounded-lg p-4\">\n          <div className=\"flex items-center gap-2 mb-2\">\n            <span className=\"text-sm font-medium text-text-secondary\">\n              {tr('vibeTask.status', 'Status')}\n            </span>\n          </div>\n          <span\n            className={`inline-flex px-2 py-0.5 text-xs rounded-full border ${\n              STATUS_COLORS[task?.status ?? ''] || ''\n            }`}\n          >\n            {task?.status ?? 'UNKNOWN'}\n          </span>\n          {task?.lastExecutedAt && (\n            <p className=\"text-xs text-text-tertiary mt-2\">\n              {tr('vibeTask.lastRun', 'Last run')}: {new Date(task.lastExecutedAt).toLocaleString()}\n            </p>\n          )}\n        </MotionItem>\n      </MotionList>\n\n      {/* Execution History */}\n      <div className=\"flex-1 overflow-auto\">\n        <h2 className=\"text-base font-semibold text-text-primary mb-3\">\n          {tr('vibeTask.execHistory', 'Execution History')}\n        </h2>\n\n        {executions.length === 0 ? (\n          <div className=\"flex items-center justify-center py-12\">\n            <p className=\"text-sm text-text-secondary\">\n              {tr('vibeTask.noExecutions', 'No executions yet')}\n            </p>\n          </div>\n        ) : (\n          <div className=\"overflow-x-auto rounded-lg border border-border-default\">\n            <table className=\"w-full text-sm min-w-[640px]\">\n              <thead>\n                <tr className=\"bg-bg-sunken border-b border-border-default\">\n                  <th className=\"text-left px-4 py-2 text-text-secondary font-medium\">\n                    {tr('vibeTask.started', 'Started')}\n                  </th>\n                  <th className=\"text-left px-4 py-2 text-text-secondary font-medium\">\n                    {tr('vibeTask.status', 'Status')}\n                  </th>\n                  <th className=\"text-left px-4 py-2 text-text-secondary font-medium\">\n                    {tr('vibeTask.exitCode', 'Exit Code')}\n                  </th>\n                  <th className=\"text-right px-4 py-2 text-text-secondary font-medium\">\n                    {tr('vibeTask.actions', 'Actions')}\n                  </th>\n                </tr>\n              </thead>\n              <tbody>\n                {executions.map((exec) => (\n                  <tr\n                    key={exec.id}\n                    className=\"border-b border-border-default hover:bg-bg-sunken transition-colors\"\n                  >\n                    <td className=\"px-4 py-2.5 text-text-primary\">\n                      {exec.startedAt ? new Date(exec.startedAt).toLocaleString() : '-'}\n                    </td>\n                    <td className=\"px-4 py-2.5\">\n                      <span\n                        className={`inline-flex px-2 py-0.5 text-xs rounded-full border ${\n                          STATUS_COLORS[exec.status] || ''\n                        }`}\n                      >\n                        {exec.status}\n                      </span>\n                    </td>\n                    <td className=\"px-4 py-2.5\">\n                      {exec.exitCode !== null ? (\n                        <span\n                          className={`font-mono ${exec.exitCode === 0 ? 'text-status-success-text' : 'text-status-error-text'}`}\n                        >\n                          {exec.exitCode}\n                        </span>\n                      ) : (\n                        '-'\n                      )}\n                    </td>\n                    <td className=\"px-4 py-2.5 text-right\">\n                      {canReadExecutionLogs ? (\n                        <button\n                          type=\"button\"\n                          onClick={() => handleViewLogs(exec)}\n                          className=\"inline-flex items-center gap-1 px-2 py-1 text-xs text-text-secondary hover:text-text-primary rounded hover:bg-bg-sunken transition-colors\"\n                        >\n                          <Eye size={12} />\n                          {tr('vibeTask.viewLogs', 'View Logs')}\n                        </button>\n                      ) : (\n                        <span className=\"text-xs text-text-tertiary\">\n                          {tr('vibeTask.logsPermissionRequired', 'Log access required')}\n                        </span>\n                      )}\n                    </td>\n                  </tr>\n                ))}\n              </tbody>\n            </table>\n          </div>\n        )}\n      </div>\n\n      {/* Logs Drawer */}\n      <LogsDrawer\n        isOpen={showLogsDrawer}\n        onClose={() => setShowLogsDrawer(false)}\n        execution={selectedExecution}\n        taskTitle={title}\n        agentId=\"\"\n      />\n    </MotionPage>\n  );\n}\n"],"mappings":"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"}

package/dist/pages/VibesPage.js

@@ -264,7 +264,7 @@ function p() {
 		inactive: U.filter((e) => e.status === "INACTIVE").length
 	}, Z = g, Q = !g && !!qe && (qe.permissionStrings?.length ?? 0) > 0 && !Qe, Jt = !Z && !Q && B && U.length === 0, $ = !Z && !Q && !!Et && U.length === 0, Yt = !Z && !Q && !$;
 	return /* @__PURE__ */ d(Ge, {
-		className: "space-y-6 p-4 sm:p-6 bg-bg-surface min-h-screen",
+		className: "space-y-6 px-6 lg:px-8 py-6 bg-bg-canvas min-h-screen",
 		children: [
 			Z && /* @__PURE__ */ u(de, { message: v("vibesPage.loadingPermissions", "Loading permissions...") }),
 			Q && /* @__PURE__ */ u(Ve, {
@@ -310,7 +310,7 @@ function p() {
 								children: /* @__PURE__ */ d("button", {
 									type: "button",
 									onClick: J,
-									className: "flex items-center gap-2 px-4 py-2 bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg-hover transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
+									className: "flex items-center gap-2 px-4 py-2 bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus",
 									children: [/* @__PURE__ */ u(Pe, { className: "size-4" }), v("vibesPage.addVibe", "Add Vibe")]
 								})
 							})
@@ -327,17 +327,17 @@ function p() {
 							placeholder: v("vibesPage.searchPlaceholder", "Search vibes..."),
 							className: "flex-1 sm:w-64 sm:flex-none"
 						}), /* @__PURE__ */ d("div", {
-							className: "flex items-center gap-1 bg-bg-sunken rounded-md p-1 flex-shrink-0",
+							className: "flex items-center gap-1 bg-bg-sunken rounded-button p-1 flex-shrink-0 border border-border-subtle",
 							children: [/* @__PURE__ */ u("button", {
 								type: "button",
 								onClick: () => T("grid"),
-								className: `p-1.5 sm:p-2 rounded ${w === "grid" ? "bg-bg-surface shadow-sm" : "hover:bg-bg-surface/50"}`,
+								className: `p-1.5 sm:p-2 rounded ${w === "grid" ? "bg-[var(--color-accent-soft)] text-text-primary" : "text-text-secondary hover:bg-bg-surface/60"}`,
 								title: v("vibesPage.gridViewTitle", "Grid view"),
 								children: /* @__PURE__ */ u(je, { className: "size-4 text-text-secondary" })
 							}), /* @__PURE__ */ u("button", {
 								type: "button",
 								onClick: () => T("list"),
-								className: `p-1.5 sm:p-2 rounded ${w === "list" ? "bg-bg-surface shadow-sm" : "hover:bg-bg-surface/50"}`,
+								className: `p-1.5 sm:p-2 rounded ${w === "list" ? "bg-[var(--color-accent-soft)] text-text-primary" : "text-text-secondary hover:bg-bg-surface/60"}`,
 								title: v("vibesPage.listViewTitle", "List view"),
 								children: /* @__PURE__ */ u(Me, { className: "size-4 text-text-secondary" })
 							})]
@@ -372,7 +372,7 @@ function p() {
 					})]
 				}) : null,
 				W.length > 0 && /* @__PURE__ */ u("div", {
-					className: "rounded-lg border border-border-default bg-bg-surface p-4",
+					className: "rounded-card border border-border-subtle bg-bg-surface shadow-elevation-1 p-5",
 					children: /* @__PURE__ */ d("div", {
 						className: "flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between",
 						children: [/* @__PURE__ */ d("div", {
@@ -406,7 +406,7 @@ function p() {
 									onClick: () => I("activate"),
 									disabled: G.length === 0,
 									title: "Mark selected vibes as ACTIVE so they appear in the default vibe list and can run sessions/tunnels via their attached agent(s).",
-									className: "rounded-md border border-status-success-border px-3 py-2 text-sm font-medium text-status-success-text hover:bg-status-success-bg disabled:cursor-not-allowed disabled:opacity-50",
+									className: "rounded-button border border-status-success-border px-3 py-2 text-sm font-medium text-status-success-text hover:bg-status-success-bg-subtle transition-colors disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus",
 									children: /* @__PURE__ */ d("span", {
 										className: "inline-flex items-center gap-2",
 										children: [
@@ -420,7 +420,7 @@ function p() {
 									type: "button",
 									onClick: () => I("archive"),
 									disabled: K.length === 0,
-									className: "rounded-md border border-status-warning-border px-3 py-2 text-sm font-medium text-status-warning-text hover:bg-status-warning-bg disabled:cursor-not-allowed disabled:opacity-50",
+									className: "rounded-button border border-status-warning-border px-3 py-2 text-sm font-medium text-status-warning-text hover:bg-status-warning-bg-subtle transition-colors disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus",
 									children: /* @__PURE__ */ d("span", {
 										className: "inline-flex items-center gap-2",
 										children: [
@@ -477,14 +477,14 @@ function p() {
 							children: /* @__PURE__ */ d("button", {
 								type: "button",
 								onClick: J,
-								className: "flex items-center gap-2 px-4 py-2 bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg-hover transition-colors",
+								className: "flex items-center gap-2 px-4 py-2 bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus",
 								children: [/* @__PURE__ */ u(Pe, { className: "size-4" }), v("vibesPage.addVibe", "Add Vibe")]
 							})
 						}), /* @__PURE__ */ u(ve, { prompt: "What is a Vibe in VibeControls and how do I create one?" })]
 					}) : void 0
 				}),
 				ct && /* @__PURE__ */ u("div", {
-					className: "fixed bottom-4 right-4 z-50 px-4 py-3 bg-status-success-bg text-status-success-text rounded-md shadow-lg text-sm",
+					className: "fixed bottom-4 right-4 z-50 px-4 py-3 bg-status-success-bg-subtle text-status-success-text border border-status-success-border rounded-card shadow-elevation-3 text-sm",
 					children: ct
 				}),
 				/* @__PURE__ */ u(ne, {
@@ -507,7 +507,7 @@ function p() {
 				}),
 				ut && /* @__PURE__ */ d("div", {
 					role: "alert",
-					className: "fixed bottom-4 right-4 z-50 px-4 py-3 bg-status-error-bg text-status-error-text rounded-md shadow-lg text-sm",
+					className: "fixed bottom-4 right-4 z-50 px-4 py-3 bg-status-error-bg-subtle text-status-error-text border border-status-error-border rounded-card shadow-elevation-3 text-sm",
 					children: [ut, /* @__PURE__ */ u("button", {
 						type: "button",
 						onClick: ft,
@@ -518,7 +518,7 @@ function p() {
 				at && /* @__PURE__ */ u("div", {
 					className: "fixed inset-0 bg-bg-overlay flex items-center justify-center z-50 p-4",
 					children: /* @__PURE__ */ d("div", {
-						className: "bg-bg-surface rounded-lg p-6 w-full max-w-lg",
+						className: "bg-bg-surface rounded-card border border-border-subtle shadow-[var(--shadow-elevation-4)] p-6 w-full max-w-lg",
 						children: [
 							/* @__PURE__ */ u("h2", {
 								className: "text-lg font-semibold text-text-primary mb-4",
@@ -528,7 +528,7 @@ function p() {
 								className: "space-y-4",
 								children: [
 									ot && /* @__PURE__ */ u("div", {
-										className: "p-3 bg-status-error-bg text-status-error-text text-sm rounded-md",
+										className: "p-3 bg-status-error-bg-subtle text-status-error-text border border-status-error-border text-sm rounded-card",
 										children: ot
 									}),
 									/* @__PURE__ */ d("div", { children: [
@@ -545,7 +545,7 @@ function p() {
 												...e,
 												name: void 0
 											})),
-											className: `w-full px-3 py-2 bg-bg-sunken border rounded-md text-text-primary placeholder:text-text-placeholder ${j.name ? "border-status-error-border" : "border-border-default"}`
+											className: `w-full px-3 py-2 bg-bg-sunken border rounded-input text-text-primary placeholder:text-text-placeholder transition-colors focus:outline-none focus:ring-1 focus:ring-[var(--color-focus-ring)] focus:border-border-strong ${j.name ? "border-status-error-border" : "border-border-subtle"}`
 										}),
 										j.name && /* @__PURE__ */ u("p", {
 											className: "mt-1 text-xs text-status-error-text",
@@ -569,7 +569,7 @@ function p() {
 												...e,
 												path: void 0
 											})),
-											className: `w-full px-3 py-2 bg-bg-sunken border rounded-md text-text-primary placeholder:text-text-placeholder ${j.path ? "border-status-error-border" : "border-border-default"}`
+											className: `w-full px-3 py-2 bg-bg-sunken border rounded-input text-text-primary placeholder:text-text-placeholder transition-colors focus:outline-none focus:ring-1 focus:ring-[var(--color-focus-ring)] focus:border-border-strong ${j.path ? "border-status-error-border" : "border-border-subtle"}`
 										}),
 										j.path && /* @__PURE__ */ u("p", {
 											className: "mt-1 text-xs text-status-error-text",
@@ -581,7 +581,7 @@ function p() {
 										children: v("vibesPage.agentLabel", "Agent")
 									}), /* @__PURE__ */ d("select", {
 										ref: ht,
-										className: "w-full px-3 py-2 bg-bg-sunken border border-border-default rounded-md text-text-primary",
+										className: "w-full px-3 py-2 bg-bg-sunken border border-border-subtle rounded-input text-text-primary transition-colors focus:outline-none focus:ring-1 focus:ring-[var(--color-focus-ring)] focus:border-border-strong",
 										children: [/* @__PURE__ */ u("option", {
 											value: "",
 											children: v("vibesPage.selectAgent", "Select an agent")
@@ -598,7 +598,7 @@ function p() {
 								]
 							}),
 							/* @__PURE__ */ d("div", {
-								className: "mt-4 border-t border-border-default pt-4",
+								className: "mt-4 border-t border-border-subtle pt-4",
 								children: [/* @__PURE__ */ u("h3", {
 									className: "text-sm font-medium text-text-secondary mb-2",
 									children: v("vibesPage.tags", "Tags")
@@ -619,7 +619,7 @@ function p() {
 									type: "button",
 									onClick: Kt,
 									disabled: O,
-									className: "px-4 py-2 bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg-hover transition-colors disabled:opacity-50",
+									className: "px-4 py-2 bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover transition-all duration-200 disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus",
 									children: O ? v("vibesPage.creating", "Creating...") : v("vibesPage.createVibe", "Create Vibe")
 								})]
 							})