@burdenoff/microfe-vibecontrols 2026.623.1 → 2026.623.2

package/dist/components/vibecalendar/VibeCalDayView.js

@@ -47,7 +47,7 @@ function u({ currentDate: u, occurrences: d, onTriggerNow: f, onViewLogs: p, onV
 				children: c.map((e) => {
 					let n = y(e), c = _ && e === v;
 					return /* @__PURE__ */ s("div", {
-						className: `flex border-b border-border-default ${c ? "bg-action-primary-bg/5" : ""}`,
+						className: `flex border-b border-border-default ${c ? "bg-[var(--color-accent-soft)]" : ""}`,
 						style: { minHeight: n.length > 0 ? "auto" : "48px" },
 						children: [/* @__PURE__ */ s("div", {
 							className: "w-20 flex-shrink-0 text-right pr-3 pt-1.5 border-r border-border-default",
@@ -105,14 +105,14 @@ function u({ currentDate: u, occurrences: d, onTriggerNow: f, onViewLogs: p, onV
 												f && /* @__PURE__ */ o("button", {
 													type: "button",
 													onClick: () => f(c.id),
-													className: "p-1.5 rounded hover:bg-bg-secondary transition-colors",
+													className: "p-1.5 rounded hover:bg-bg-surface transition-colors",
 													title: "Trigger Now",
 													children: /* @__PURE__ */ o(a, { size: 14 })
 												}),
 												/* @__PURE__ */ o("button", {
 													type: "button",
 													onClick: () => p(c),
-													className: "p-1.5 rounded hover:bg-bg-secondary transition-colors",
+													className: "p-1.5 rounded hover:bg-bg-surface transition-colors",
 													title: "View Logs",
 													children: /* @__PURE__ */ o(i, { size: 14 })
 												}),

package/dist/components/vibecalendar/VibeCalDayView.js.map

@@ -1 +1 @@
-{"version":3,"file":"VibeCalDayView.js","names":[],"sources":["../../../src/components/vibecalendar/VibeCalDayView.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport { Play, Eye, ChevronRight } from 'lucide-react';\nimport { STATUS_COLORS } from './types';\nimport type { CalendarOccurrence, VibeCalendarTask } from './types';\nimport { useTr } from '../../shared/hooks/useTr';\n\ninterface VibeCalDayViewProps {\n  currentDate: Date;\n  occurrences: CalendarOccurrence[];\n  onTriggerNow?: (taskId: string) => void;\n  onViewLogs: (task: VibeCalendarTask) => void;\n  onViewDetail: (taskId: string) => void;\n}\n\nconst HOURS = Array.from({ length: 24 }, (_, i) => i);\n\nfunction formatHour(hour: number): string {\n  if (hour === 0) return '12 AM';\n  if (hour < 12) return `${hour} AM`;\n  if (hour === 12) return '12 PM';\n  return `${hour - 12} PM`;\n}\n\nexport function VibeCalDayView({\n  currentDate,\n  occurrences,\n  onTriggerNow,\n  onViewLogs,\n  onViewDetail,\n}: VibeCalDayViewProps) {\n  const tr = useTr();\n  const today = new Date();\n\n  const isToday =\n    currentDate.getFullYear() === today.getFullYear() &&\n    currentDate.getMonth() === today.getMonth() &&\n    currentDate.getDate() === today.getDate();\n\n  const nowHour = today.getHours();\n\n  const getOccurrencesForHour = (hour: number): CalendarOccurrence[] =>\n    occurrences.filter((occ) => {\n      const d = new Date(occ.occurrenceAt);\n      return (\n        d.getFullYear() === currentDate.getFullYear() &&\n        d.getMonth() === currentDate.getMonth() &&\n        d.getDate() === currentDate.getDate() &&\n        d.getHours() === hour\n      );\n    });\n\n  // Count total tasks for the day\n  const dayOccurrences = useMemo(\n    () =>\n      occurrences.filter((occ) => {\n        const d = new Date(occ.occurrenceAt);\n        return (\n          d.getFullYear() === currentDate.getFullYear() &&\n          d.getMonth() === currentDate.getMonth() &&\n          d.getDate() === currentDate.getDate()\n        );\n      }),\n    [occurrences, currentDate]\n  );\n\n  return (\n    <div className=\"flex-1 flex flex-col overflow-hidden\">\n      {/* Day summary header */}\n      <div className=\"flex items-center justify-between px-4 py-2 border-b border-border-default flex-shrink-0\">\n        <div className=\"flex items-center gap-3\">\n          <div\n            className={`flex flex-col items-center px-3 py-1.5 rounded-lg ${\n              isToday ? 'bg-action-primary-bg text-action-primary-text' : 'bg-bg-sunken'\n            }`}\n          >\n            <span className=\"text-xs font-medium\">\n              {currentDate.toLocaleDateString('en-US', { weekday: 'short' })}\n            </span>\n            <span className=\"text-lg font-bold\">{currentDate.getDate()}</span>\n          </div>\n          <div>\n            <span className=\"text-sm text-text-secondary\">\n              {dayOccurrences.length}{' '}\n              {dayOccurrences.length !== 1\n                ? tr('vibecontrols.calendar.day.tasksScheduled', 'tasks scheduled')\n                : tr('vibecontrols.calendar.day.taskScheduled', 'task scheduled')}\n            </span>\n          </div>\n        </div>\n      </div>\n\n      {/* Time grid - scrollable */}\n      <div className=\"flex-1 overflow-auto\">\n        <div className=\"relative\">\n          {HOURS.map((hour) => {\n            const hourOccurrences = getOccurrencesForHour(hour);\n            const isCurrent = isToday && hour === nowHour;\n\n            return (\n              <div\n                key={hour}\n                className={`flex border-b border-border-default ${\n                  isCurrent ? 'bg-action-primary-bg/5' : ''\n                }`}\n                style={{ minHeight: hourOccurrences.length > 0 ? 'auto' : '48px' }}\n              >\n                {/* Time label */}\n                <div className=\"w-20 flex-shrink-0 text-right pr-3 pt-1.5 border-r border-border-default\">\n                  <span\n                    className={`text-xs ${isCurrent ? 'text-action-primary-text font-semibold' : 'text-text-tertiary'}`}\n                  >\n                    {formatHour(hour)}\n                  </span>\n                  {isCurrent && (\n                    <div className=\"mt-0.5 text-[10px] text-action-primary-text\">NOW</div>\n                  )}\n                </div>\n\n                {/* Tasks */}\n                <div className=\"flex-1 p-1 space-y-1\">\n                  {hourOccurrences.map((occ, j) => {\n                    const task = occ.task;\n                    const statusColor =\n                      STATUS_COLORS[occ.execution?.status || task.status] || STATUS_COLORS.PENDING;\n                    const time = new Date(occ.occurrenceAt).toLocaleTimeString('en-US', {\n                      hour: '2-digit',\n                      minute: '2-digit',\n                    });\n\n                    return (\n                      <div\n                        role=\"button\"\n                        tabIndex={0}\n                        onKeyDown={(e) => {\n                          if (e.key === 'Enter' || e.key === ' ') {\n                            e.preventDefault();\n                            (() => onViewDetail(task.id))();\n                          }\n                        }}\n                        key={`${task.id}-${j}`}\n                        onClick={() => onViewDetail(task.id)}\n                        className={`flex items-center gap-3 px-3 py-2.5 rounded-lg border cursor-pointer ${statusColor} hover:opacity-90 transition-opacity`}\n                      >\n                        {/* Time */}\n                        <div className=\"w-14 text-xs font-mono text-text-secondary flex-shrink-0\">\n                          {time}\n                        </div>\n\n                        {/* Info */}\n                        <div className=\"flex-1 min-w-0\">\n                          <h4 className=\"font-medium text-sm text-text-primary truncate\">\n                            {task.title}\n                          </h4>\n                          <div className=\"flex items-center gap-2 mt-0.5\">\n                            <span className=\"text-xs text-text-tertiary font-mono truncate\">\n                              {task.taskConfig.taskType === 'WEBHOOK'\n                                ? `${task.taskConfig.webhookMethod || 'POST'} ${task.taskConfig.webhookUrl}`\n                                : task.taskConfig.command || 'Script'}\n                            </span>\n                            <span className=\"text-xs text-text-tertiary flex-shrink-0\">\n                              {task.cronExpression\n                                ? 'Cron'\n                                : task.rrule\n                                  ? 'Recurrence'\n                                  : 'One Time'}\n                            </span>\n                          </div>\n                        </div>\n\n                        {/* Status badge */}\n                        <span className=\"text-xs px-2 py-0.5 rounded-full border flex-shrink-0\">\n                          {occ.execution?.status || task.status}\n                        </span>\n\n                        {/* Actions */}\n                        <div\n                          className=\"flex items-center gap-1 flex-shrink-0\"\n                          onClick={(e) => e.stopPropagation()}\n                        >\n                          {onTriggerNow && (\n                            <button\n                              type=\"button\"\n                              onClick={() => onTriggerNow(task.id)}\n                              className=\"p-1.5 rounded hover:bg-bg-secondary transition-colors\"\n                              title=\"Trigger Now\"\n                            >\n                              <Play size={14} />\n                            </button>\n                          )}\n                          <button\n                            type=\"button\"\n                            onClick={() => onViewLogs(task)}\n                            className=\"p-1.5 rounded hover:bg-bg-secondary transition-colors\"\n                            title=\"View Logs\"\n                          >\n                            <Eye size={14} />\n                          </button>\n                          <ChevronRight size={14} className=\"text-text-tertiary\" />\n                        </div>\n                      </div>\n                    );\n                  })}\n                </div>\n              </div>\n            );\n          })}\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"VibeCalDayView.js","names":[],"sources":["../../../src/components/vibecalendar/VibeCalDayView.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport { Play, Eye, ChevronRight } from 'lucide-react';\nimport { STATUS_COLORS } from './types';\nimport type { CalendarOccurrence, VibeCalendarTask } from './types';\nimport { useTr } from '../../shared/hooks/useTr';\n\ninterface VibeCalDayViewProps {\n  currentDate: Date;\n  occurrences: CalendarOccurrence[];\n  onTriggerNow?: (taskId: string) => void;\n  onViewLogs: (task: VibeCalendarTask) => void;\n  onViewDetail: (taskId: string) => void;\n}\n\nconst HOURS = Array.from({ length: 24 }, (_, i) => i);\n\nfunction formatHour(hour: number): string {\n  if (hour === 0) return '12 AM';\n  if (hour < 12) return `${hour} AM`;\n  if (hour === 12) return '12 PM';\n  return `${hour - 12} PM`;\n}\n\nexport function VibeCalDayView({\n  currentDate,\n  occurrences,\n  onTriggerNow,\n  onViewLogs,\n  onViewDetail,\n}: VibeCalDayViewProps) {\n  const tr = useTr();\n  const today = new Date();\n\n  const isToday =\n    currentDate.getFullYear() === today.getFullYear() &&\n    currentDate.getMonth() === today.getMonth() &&\n    currentDate.getDate() === today.getDate();\n\n  const nowHour = today.getHours();\n\n  const getOccurrencesForHour = (hour: number): CalendarOccurrence[] =>\n    occurrences.filter((occ) => {\n      const d = new Date(occ.occurrenceAt);\n      return (\n        d.getFullYear() === currentDate.getFullYear() &&\n        d.getMonth() === currentDate.getMonth() &&\n        d.getDate() === currentDate.getDate() &&\n        d.getHours() === hour\n      );\n    });\n\n  // Count total tasks for the day\n  const dayOccurrences = useMemo(\n    () =>\n      occurrences.filter((occ) => {\n        const d = new Date(occ.occurrenceAt);\n        return (\n          d.getFullYear() === currentDate.getFullYear() &&\n          d.getMonth() === currentDate.getMonth() &&\n          d.getDate() === currentDate.getDate()\n        );\n      }),\n    [occurrences, currentDate]\n  );\n\n  return (\n    <div className=\"flex-1 flex flex-col overflow-hidden\">\n      {/* Day summary header */}\n      <div className=\"flex items-center justify-between px-4 py-2 border-b border-border-default flex-shrink-0\">\n        <div className=\"flex items-center gap-3\">\n          <div\n            className={`flex flex-col items-center px-3 py-1.5 rounded-lg ${\n              isToday ? 'bg-action-primary-bg text-action-primary-text' : 'bg-bg-sunken'\n            }`}\n          >\n            <span className=\"text-xs font-medium\">\n              {currentDate.toLocaleDateString('en-US', { weekday: 'short' })}\n            </span>\n            <span className=\"text-lg font-bold\">{currentDate.getDate()}</span>\n          </div>\n          <div>\n            <span className=\"text-sm text-text-secondary\">\n              {dayOccurrences.length}{' '}\n              {dayOccurrences.length !== 1\n                ? tr('vibecontrols.calendar.day.tasksScheduled', 'tasks scheduled')\n                : tr('vibecontrols.calendar.day.taskScheduled', 'task scheduled')}\n            </span>\n          </div>\n        </div>\n      </div>\n\n      {/* Time grid - scrollable */}\n      <div className=\"flex-1 overflow-auto\">\n        <div className=\"relative\">\n          {HOURS.map((hour) => {\n            const hourOccurrences = getOccurrencesForHour(hour);\n            const isCurrent = isToday && hour === nowHour;\n\n            return (\n              <div\n                key={hour}\n                className={`flex border-b border-border-default ${\n                  isCurrent ? 'bg-[var(--color-accent-soft)]' : ''\n                }`}\n                style={{ minHeight: hourOccurrences.length > 0 ? 'auto' : '48px' }}\n              >\n                {/* Time label */}\n                <div className=\"w-20 flex-shrink-0 text-right pr-3 pt-1.5 border-r border-border-default\">\n                  <span\n                    className={`text-xs ${isCurrent ? 'text-action-primary-text font-semibold' : 'text-text-tertiary'}`}\n                  >\n                    {formatHour(hour)}\n                  </span>\n                  {isCurrent && (\n                    <div className=\"mt-0.5 text-[10px] text-action-primary-text\">NOW</div>\n                  )}\n                </div>\n\n                {/* Tasks */}\n                <div className=\"flex-1 p-1 space-y-1\">\n                  {hourOccurrences.map((occ, j) => {\n                    const task = occ.task;\n                    const statusColor =\n                      STATUS_COLORS[occ.execution?.status || task.status] || STATUS_COLORS.PENDING;\n                    const time = new Date(occ.occurrenceAt).toLocaleTimeString('en-US', {\n                      hour: '2-digit',\n                      minute: '2-digit',\n                    });\n\n                    return (\n                      <div\n                        role=\"button\"\n                        tabIndex={0}\n                        onKeyDown={(e) => {\n                          if (e.key === 'Enter' || e.key === ' ') {\n                            e.preventDefault();\n                            (() => onViewDetail(task.id))();\n                          }\n                        }}\n                        key={`${task.id}-${j}`}\n                        onClick={() => onViewDetail(task.id)}\n                        className={`flex items-center gap-3 px-3 py-2.5 rounded-lg border cursor-pointer ${statusColor} hover:opacity-90 transition-opacity`}\n                      >\n                        {/* Time */}\n                        <div className=\"w-14 text-xs font-mono text-text-secondary flex-shrink-0\">\n                          {time}\n                        </div>\n\n                        {/* Info */}\n                        <div className=\"flex-1 min-w-0\">\n                          <h4 className=\"font-medium text-sm text-text-primary truncate\">\n                            {task.title}\n                          </h4>\n                          <div className=\"flex items-center gap-2 mt-0.5\">\n                            <span className=\"text-xs text-text-tertiary font-mono truncate\">\n                              {task.taskConfig.taskType === 'WEBHOOK'\n                                ? `${task.taskConfig.webhookMethod || 'POST'} ${task.taskConfig.webhookUrl}`\n                                : task.taskConfig.command || 'Script'}\n                            </span>\n                            <span className=\"text-xs text-text-tertiary flex-shrink-0\">\n                              {task.cronExpression\n                                ? 'Cron'\n                                : task.rrule\n                                  ? 'Recurrence'\n                                  : 'One Time'}\n                            </span>\n                          </div>\n                        </div>\n\n                        {/* Status badge */}\n                        <span className=\"text-xs px-2 py-0.5 rounded-full border flex-shrink-0\">\n                          {occ.execution?.status || task.status}\n                        </span>\n\n                        {/* Actions */}\n                        <div\n                          className=\"flex items-center gap-1 flex-shrink-0\"\n                          onClick={(e) => e.stopPropagation()}\n                        >\n                          {onTriggerNow && (\n                            <button\n                              type=\"button\"\n                              onClick={() => onTriggerNow(task.id)}\n                              className=\"p-1.5 rounded hover:bg-bg-surface transition-colors\"\n                              title=\"Trigger Now\"\n                            >\n                              <Play size={14} />\n                            </button>\n                          )}\n                          <button\n                            type=\"button\"\n                            onClick={() => onViewLogs(task)}\n                            className=\"p-1.5 rounded hover:bg-bg-surface transition-colors\"\n                            title=\"View Logs\"\n                          >\n                            <Eye size={14} />\n                          </button>\n                          <ChevronRight size={14} className=\"text-text-tertiary\" />\n                        </div>\n                      </div>\n                    );\n                  })}\n                </div>\n              </div>\n            );\n          })}\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAcA,IAAM,IAAQ,MAAM,KAAK,EAAE,QAAQ,IAAI,GAAG,GAAG,MAAM,EAAE;AAErD,SAAS,EAAW,GAAsB;AAIxC,QAHI,MAAS,IAAU,UACnB,IAAO,KAAW,GAAG,EAAK,OAC1B,MAAS,KAAW,UACjB,GAAG,IAAO,GAAG;;AAGtB,SAAgB,EAAe,EAC7B,gBACA,gBACA,iBACA,eACA,mBACsB;CACtB,IAAM,IAAK,GAAO,EACZ,oBAAQ,IAAI,MAAM,EAElB,IACJ,EAAY,aAAa,KAAK,EAAM,aAAa,IACjD,EAAY,UAAU,KAAK,EAAM,UAAU,IAC3C,EAAY,SAAS,KAAK,EAAM,SAAS,EAErC,IAAU,EAAM,UAAU,EAE1B,KAAyB,MAC7B,EAAY,QAAQ,MAAQ;EAC1B,IAAM,IAAI,IAAI,KAAK,EAAI,aAAa;AACpC,SACE,EAAE,aAAa,KAAK,EAAY,aAAa,IAC7C,EAAE,UAAU,KAAK,EAAY,UAAU,IACvC,EAAE,SAAS,KAAK,EAAY,SAAS,IACrC,EAAE,UAAU,KAAK;GAEnB,EAGE,IAAiB,QAEnB,EAAY,QAAQ,MAAQ;EAC1B,IAAM,IAAI,IAAI,KAAK,EAAI,aAAa;AACpC,SACE,EAAE,aAAa,KAAK,EAAY,aAAa,IAC7C,EAAE,UAAU,KAAK,EAAY,UAAU,IACvC,EAAE,SAAS,KAAK,EAAY,SAAS;GAEvC,EACJ,CAAC,GAAa,EAAY,CAC3B;AAED,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CAEE,kBAAC,OAAD;GAAK,WAAU;aACb,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,OAAD;KACE,WAAW,qDACT,IAAU,kDAAkD;eAFhE,CAKE,kBAAC,QAAD;MAAM,WAAU;gBACb,EAAY,mBAAmB,SAAS,EAAE,SAAS,SAAS,CAAC;MACzD,CAAA,EACP,kBAAC,QAAD;MAAM,WAAU;gBAAqB,EAAY,SAAS;MAAQ,CAAA,CAC9D;QACN,kBAAC,OAAD,EAAA,UACE,kBAAC,QAAD;KAAM,WAAU;eAAhB;MACG,EAAe;MAAQ;MACvB,EAAe,WAAW,IAEvB,EAAG,2CAA2C,iBAAiB,GAD/D,EAAG,4CAA4C,kBAAkB;MAEhE;QACH,CAAA,CACF;;GACF,CAAA,EAGN,kBAAC,OAAD;GAAK,WAAU;aACb,kBAAC,OAAD;IAAK,WAAU;cACZ,EAAM,KAAK,MAAS;KACnB,IAAM,IAAkB,EAAsB,EAAK,EAC7C,IAAY,KAAW,MAAS;AAEtC,YACE,kBAAC,OAAD;MAEE,WAAW,uCACT,IAAY,kCAAkC;MAEhD,OAAO,EAAE,WAAW,EAAgB,SAAS,IAAI,SAAS,QAAQ;gBALpE,CAQE,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,QAAD;QACE,WAAW,WAAW,IAAY,2CAA2C;kBAE5E,EAAW,EAAK;QACZ,CAAA,EACN,KACC,kBAAC,OAAD;QAAK,WAAU;kBAA8C;QAAS,CAAA,CAEpE;UAGN,kBAAC,OAAD;OAAK,WAAU;iBACZ,EAAgB,KAAK,GAAK,MAAM;QAC/B,IAAM,IAAO,EAAI,MACX,IACJ,EAAc,EAAI,WAAW,UAAU,EAAK,WAAW,EAAc,SACjE,IAAO,IAAI,KAAK,EAAI,aAAa,CAAC,mBAAmB,SAAS;SAClE,MAAM;SACN,QAAQ;SACT,CAAC;AAEF,eACE,kBAAC,OAAD;SACE,MAAK;SACL,UAAU;SACV,YAAY,MAAM;AAChB,WAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,SACjC,EAAE,gBAAgB,EACX,EAAa,EAAK,GAAG;;SAIhC,eAAe,EAAa,EAAK,GAAG;SACpC,WAAW,wEAAwE,EAAY;mBAXjG;UAcE,kBAAC,OAAD;WAAK,WAAU;qBACZ;WACG,CAAA;UAGN,kBAAC,OAAD;WAAK,WAAU;qBAAf,CACE,kBAAC,MAAD;YAAI,WAAU;sBACX,EAAK;YACH,CAAA,EACL,kBAAC,OAAD;YAAK,WAAU;sBAAf,CACE,kBAAC,QAAD;aAAM,WAAU;uBACb,EAAK,WAAW,aAAa,YAC1B,GAAG,EAAK,WAAW,iBAAiB,OAAO,GAAG,EAAK,WAAW,eAC9D,EAAK,WAAW,WAAW;aAC1B,CAAA,EACP,kBAAC,QAAD;aAAM,WAAU;uBACb,EAAK,iBACF,SACA,EAAK,QACH,eACA;aACD,CAAA,CACH;cACF;;UAGN,kBAAC,QAAD;WAAM,WAAU;qBACb,EAAI,WAAW,UAAU,EAAK;WAC1B,CAAA;UAGP,kBAAC,OAAD;WACE,WAAU;WACV,UAAU,MAAM,EAAE,iBAAiB;qBAFrC;YAIG,KACC,kBAAC,UAAD;aACE,MAAK;aACL,eAAe,EAAa,EAAK,GAAG;aACpC,WAAU;aACV,OAAM;uBAEN,kBAAC,GAAD,EAAM,MAAM,IAAM,CAAA;aACX,CAAA;YAEX,kBAAC,UAAD;aACE,MAAK;aACL,eAAe,EAAW,EAAK;aAC/B,WAAU;aACV,OAAM;uBAEN,kBAAC,GAAD,EAAK,MAAM,IAAM,CAAA;aACV,CAAA;YACT,kBAAC,GAAD;aAAc,MAAM;aAAI,WAAU;aAAuB,CAAA;YACrD;;UACF;WA5DC,GAAG,EAAK,GAAG,GAAG,IA4Df;SAER;OACE,CAAA,CACF;QAvGC,EAuGD;MAER;IACE,CAAA;GACF,CAAA,CACF"}

package/dist/components/vibecalendar/VibeCalMonthView.js

@@ -33,7 +33,7 @@ function o({ currentDate: o, occurrences: s, onTriggerNow: c, onViewLogs: l, onV
 			children: y.map((e, a) => {
 				let o = e ? b(e) : [], s = o.length - 3;
 				return /* @__PURE__ */ r("div", {
-					className: `border-b border-r border-border-default p-1 ${e === null ? "bg-bg-sunken" : "bg-bg-surface"} ${x(e) ? "bg-action-primary-bg/5" : ""}`,
+					className: `border-b border-r border-border-default p-1 ${e === null ? "bg-bg-sunken" : "bg-bg-surface"} ${x(e) ? "bg-[var(--color-accent-soft)]" : ""}`,
 					children: e !== null && /* @__PURE__ */ i(n, { children: [/* @__PURE__ */ r("span", {
 						className: `inline-flex items-center justify-center size-6 text-xs rounded-full ${x(e) ? "bg-action-primary-bg text-action-primary-text font-bold" : "text-text-secondary"}`,
 						children: e

package/dist/components/vibecalendar/VibeCalMonthView.js.map

@@ -1 +1 @@
-{"version":3,"file":"VibeCalMonthView.js","names":[],"sources":["../../../src/components/vibecalendar/VibeCalMonthView.tsx"],"sourcesContent":["import { VibeTaskBlock } from './VibeTaskBlock';\nimport type { CalendarOccurrence, VibeCalendarTask } from './types';\nimport { useTr } from '../../shared/hooks/useTr';\n\ninterface VibeCalMonthViewProps {\n  currentDate: Date;\n  occurrences: CalendarOccurrence[];\n  onTriggerNow?: (taskId: string) => void;\n  onViewLogs: (task: VibeCalendarTask) => void;\n  onViewDetail: (taskId: string) => void;\n}\n\nconst DAYS_OF_WEEK = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];\n\nexport function VibeCalMonthView({\n  currentDate,\n  occurrences,\n  onTriggerNow,\n  onViewLogs,\n  onViewDetail,\n}: VibeCalMonthViewProps) {\n  const tr = useTr();\n  const year = currentDate.getFullYear();\n  const month = currentDate.getMonth();\n  const firstDay = new Date(year, month, 1);\n  const lastDay = new Date(year, month + 1, 0);\n  const startOffset = firstDay.getDay();\n  const daysInMonth = lastDay.getDate();\n  const today = new Date();\n\n  // Build 6x7 grid\n  const cells: (number | null)[] = [];\n  for (let i = 0; i < startOffset; i++) cells.push(null);\n  for (let d = 1; d <= daysInMonth; d++) cells.push(d);\n  while (cells.length < 42) cells.push(null);\n\n  const getOccurrencesForDay = (day: number): CalendarOccurrence[] => {\n    return occurrences.filter((occ) => {\n      const occDate = new Date(occ.occurrenceAt);\n      return (\n        occDate.getFullYear() === year && occDate.getMonth() === month && occDate.getDate() === day\n      );\n    });\n  };\n\n  const isToday = (day: number): boolean => {\n    return today.getFullYear() === year && today.getMonth() === month && today.getDate() === day;\n  };\n\n  return (\n    <div className=\"flex-1 overflow-auto\">\n      {/* Day headers */}\n      <div className=\"grid grid-cols-7 border-b border-border-default\">\n        {DAYS_OF_WEEK.map((day) => (\n          <div key={day} className=\"p-2 text-xs font-medium text-text-tertiary text-center\">\n            {day}\n          </div>\n        ))}\n      </div>\n\n      {/* Calendar grid */}\n      <div className=\"grid grid-cols-7 auto-rows-[minmax(100px,1fr)]\">\n        {cells.map((day, i) => {\n          const dayOccurrences = day ? getOccurrencesForDay(day) : [];\n          const maxVisible = 3;\n          const overflow = dayOccurrences.length - maxVisible;\n\n          return (\n            <div\n              key={i}\n              className={`border-b border-r border-border-default p-1 ${\n                day === null ? 'bg-bg-sunken' : 'bg-bg-surface'\n              } ${isToday(day!) ? 'bg-action-primary-bg/5' : ''}`}\n            >\n              {day !== null && (\n                <>\n                  <span\n                    className={`inline-flex items-center justify-center size-6 text-xs rounded-full ${\n                      isToday(day)\n                        ? 'bg-action-primary-bg text-action-primary-text font-bold'\n                        : 'text-text-secondary'\n                    }`}\n                  >\n                    {day}\n                  </span>\n                  <div className=\"mt-1 space-y-0.5\">\n                    {dayOccurrences.slice(0, maxVisible).map((occ, j) => (\n                      <VibeTaskBlock\n                        key={`${occ.task.id}-${j}`}\n                        task={occ.task}\n                        compact\n                        onTriggerNow={onTriggerNow}\n                        onViewLogs={onViewLogs}\n                        onViewDetail={onViewDetail}\n                      />\n                    ))}\n                    {overflow > 0 && (\n                      <span className=\"text-xs text-text-tertiary pl-1\">\n                        +{overflow} {tr('vibecontrols.calendar.month.more', 'more')}\n                      </span>\n                    )}\n                  </div>\n                </>\n              )}\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;AAYA,IAAM,IAAe;CAAC;CAAO;CAAO;CAAO;CAAO;CAAO;CAAO;CAAM;AAEtE,SAAgB,EAAiB,EAC/B,gBACA,gBACA,iBACA,eACA,mBACwB;CACxB,IAAM,IAAK,GAAO,EACZ,IAAO,EAAY,aAAa,EAChC,IAAQ,EAAY,UAAU,EAC9B,IAAW,IAAI,KAAK,GAAM,GAAO,EAAE,EACnC,IAAU,IAAI,KAAK,GAAM,IAAQ,GAAG,EAAE,EACtC,IAAc,EAAS,QAAQ,EAC/B,IAAc,EAAQ,SAAS,EAC/B,oBAAQ,IAAI,MAAM,EAGlB,IAA2B,EAAE;AACnC,MAAK,IAAI,IAAI,GAAG,IAAI,GAAa,IAAK,GAAM,KAAK,KAAK;AACtD,MAAK,IAAI,IAAI,GAAG,KAAK,GAAa,IAAK,GAAM,KAAK,EAAE;AACpD,QAAO,EAAM,SAAS,IAAI,GAAM,KAAK,KAAK;CAE1C,IAAM,KAAwB,MACrB,EAAY,QAAQ,MAAQ;EACjC,IAAM,IAAU,IAAI,KAAK,EAAI,aAAa;AAC1C,SACE,EAAQ,aAAa,KAAK,KAAQ,EAAQ,UAAU,KAAK,KAAS,EAAQ,SAAS,KAAK;GAE1F,EAGE,KAAW,MACR,EAAM,aAAa,KAAK,KAAQ,EAAM,UAAU,KAAK,KAAS,EAAM,SAAS,KAAK;AAG3F,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CAEE,kBAAC,OAAD;GAAK,WAAU;aACZ,EAAa,KAAK,MACjB,kBAAC,OAAD;IAAe,WAAU;cACtB;IACG,EAFI,EAEJ,CACN;GACE,CAAA,EAGN,kBAAC,OAAD;GAAK,WAAU;aACZ,EAAM,KAAK,GAAK,MAAM;IACrB,IAAM,IAAiB,IAAM,EAAqB,EAAI,GAAG,EAAE,EAErD,IAAW,EAAe,SAAS;AAEzC,WACE,kBAAC,OAAD;KAEE,WAAW,+CACT,MAAQ,OAAO,iBAAiB,gBACjC,GAAG,EAAQ,EAAK,GAAG,2BAA2B;eAE9C,MAAQ,QACP,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,QAAD;MACE,WAAW,uEACT,EAAQ,EAAI,GACR,4DACA;gBAGL;MACI,CAAA,EACP,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACG,EAAe,MAAM,GAAG,EAAW,CAAC,KAAK,GAAK,MAC7C,kBAAC,GAAD;OAEE,MAAM,EAAI;OACV,SAAA;OACc;OACF;OACE;OACd,EANK,GAAG,EAAI,KAAK,GAAG,GAAG,IAMvB,CACF,EACD,IAAW,KACV,kBAAC,QAAD;OAAM,WAAU;iBAAhB;QAAkD;QAC9C;QAAS;QAAE,EAAG,oCAAoC,OAAO;QACtD;SAEL;QACL,EAAA,CAAA;KAED,EAnCC,EAmCD;KAER;GACE,CAAA,CACF"}
+{"version":3,"file":"VibeCalMonthView.js","names":[],"sources":["../../../src/components/vibecalendar/VibeCalMonthView.tsx"],"sourcesContent":["import { VibeTaskBlock } from './VibeTaskBlock';\nimport type { CalendarOccurrence, VibeCalendarTask } from './types';\nimport { useTr } from '../../shared/hooks/useTr';\n\ninterface VibeCalMonthViewProps {\n  currentDate: Date;\n  occurrences: CalendarOccurrence[];\n  onTriggerNow?: (taskId: string) => void;\n  onViewLogs: (task: VibeCalendarTask) => void;\n  onViewDetail: (taskId: string) => void;\n}\n\nconst DAYS_OF_WEEK = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];\n\nexport function VibeCalMonthView({\n  currentDate,\n  occurrences,\n  onTriggerNow,\n  onViewLogs,\n  onViewDetail,\n}: VibeCalMonthViewProps) {\n  const tr = useTr();\n  const year = currentDate.getFullYear();\n  const month = currentDate.getMonth();\n  const firstDay = new Date(year, month, 1);\n  const lastDay = new Date(year, month + 1, 0);\n  const startOffset = firstDay.getDay();\n  const daysInMonth = lastDay.getDate();\n  const today = new Date();\n\n  // Build 6x7 grid\n  const cells: (number | null)[] = [];\n  for (let i = 0; i < startOffset; i++) cells.push(null);\n  for (let d = 1; d <= daysInMonth; d++) cells.push(d);\n  while (cells.length < 42) cells.push(null);\n\n  const getOccurrencesForDay = (day: number): CalendarOccurrence[] => {\n    return occurrences.filter((occ) => {\n      const occDate = new Date(occ.occurrenceAt);\n      return (\n        occDate.getFullYear() === year && occDate.getMonth() === month && occDate.getDate() === day\n      );\n    });\n  };\n\n  const isToday = (day: number): boolean => {\n    return today.getFullYear() === year && today.getMonth() === month && today.getDate() === day;\n  };\n\n  return (\n    <div className=\"flex-1 overflow-auto\">\n      {/* Day headers */}\n      <div className=\"grid grid-cols-7 border-b border-border-default\">\n        {DAYS_OF_WEEK.map((day) => (\n          <div key={day} className=\"p-2 text-xs font-medium text-text-tertiary text-center\">\n            {day}\n          </div>\n        ))}\n      </div>\n\n      {/* Calendar grid */}\n      <div className=\"grid grid-cols-7 auto-rows-[minmax(100px,1fr)]\">\n        {cells.map((day, i) => {\n          const dayOccurrences = day ? getOccurrencesForDay(day) : [];\n          const maxVisible = 3;\n          const overflow = dayOccurrences.length - maxVisible;\n\n          return (\n            <div\n              key={i}\n              className={`border-b border-r border-border-default p-1 ${\n                day === null ? 'bg-bg-sunken' : 'bg-bg-surface'\n              } ${isToday(day!) ? 'bg-[var(--color-accent-soft)]' : ''}`}\n            >\n              {day !== null && (\n                <>\n                  <span\n                    className={`inline-flex items-center justify-center size-6 text-xs rounded-full ${\n                      isToday(day)\n                        ? 'bg-action-primary-bg text-action-primary-text font-bold'\n                        : 'text-text-secondary'\n                    }`}\n                  >\n                    {day}\n                  </span>\n                  <div className=\"mt-1 space-y-0.5\">\n                    {dayOccurrences.slice(0, maxVisible).map((occ, j) => (\n                      <VibeTaskBlock\n                        key={`${occ.task.id}-${j}`}\n                        task={occ.task}\n                        compact\n                        onTriggerNow={onTriggerNow}\n                        onViewLogs={onViewLogs}\n                        onViewDetail={onViewDetail}\n                      />\n                    ))}\n                    {overflow > 0 && (\n                      <span className=\"text-xs text-text-tertiary pl-1\">\n                        +{overflow} {tr('vibecontrols.calendar.month.more', 'more')}\n                      </span>\n                    )}\n                  </div>\n                </>\n              )}\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;AAYA,IAAM,IAAe;CAAC;CAAO;CAAO;CAAO;CAAO;CAAO;CAAO;CAAM;AAEtE,SAAgB,EAAiB,EAC/B,gBACA,gBACA,iBACA,eACA,mBACwB;CACxB,IAAM,IAAK,GAAO,EACZ,IAAO,EAAY,aAAa,EAChC,IAAQ,EAAY,UAAU,EAC9B,IAAW,IAAI,KAAK,GAAM,GAAO,EAAE,EACnC,IAAU,IAAI,KAAK,GAAM,IAAQ,GAAG,EAAE,EACtC,IAAc,EAAS,QAAQ,EAC/B,IAAc,EAAQ,SAAS,EAC/B,oBAAQ,IAAI,MAAM,EAGlB,IAA2B,EAAE;AACnC,MAAK,IAAI,IAAI,GAAG,IAAI,GAAa,IAAK,GAAM,KAAK,KAAK;AACtD,MAAK,IAAI,IAAI,GAAG,KAAK,GAAa,IAAK,GAAM,KAAK,EAAE;AACpD,QAAO,EAAM,SAAS,IAAI,GAAM,KAAK,KAAK;CAE1C,IAAM,KAAwB,MACrB,EAAY,QAAQ,MAAQ;EACjC,IAAM,IAAU,IAAI,KAAK,EAAI,aAAa;AAC1C,SACE,EAAQ,aAAa,KAAK,KAAQ,EAAQ,UAAU,KAAK,KAAS,EAAQ,SAAS,KAAK;GAE1F,EAGE,KAAW,MACR,EAAM,aAAa,KAAK,KAAQ,EAAM,UAAU,KAAK,KAAS,EAAM,SAAS,KAAK;AAG3F,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CAEE,kBAAC,OAAD;GAAK,WAAU;aACZ,EAAa,KAAK,MACjB,kBAAC,OAAD;IAAe,WAAU;cACtB;IACG,EAFI,EAEJ,CACN;GACE,CAAA,EAGN,kBAAC,OAAD;GAAK,WAAU;aACZ,EAAM,KAAK,GAAK,MAAM;IACrB,IAAM,IAAiB,IAAM,EAAqB,EAAI,GAAG,EAAE,EAErD,IAAW,EAAe,SAAS;AAEzC,WACE,kBAAC,OAAD;KAEE,WAAW,+CACT,MAAQ,OAAO,iBAAiB,gBACjC,GAAG,EAAQ,EAAK,GAAG,kCAAkC;eAErD,MAAQ,QACP,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,QAAD;MACE,WAAW,uEACT,EAAQ,EAAI,GACR,4DACA;gBAGL;MACI,CAAA,EACP,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACG,EAAe,MAAM,GAAG,EAAW,CAAC,KAAK,GAAK,MAC7C,kBAAC,GAAD;OAEE,MAAM,EAAI;OACV,SAAA;OACc;OACF;OACE;OACd,EANK,GAAG,EAAI,KAAK,GAAG,GAAG,IAMvB,CACF,EACD,IAAW,KACV,kBAAC,QAAD;OAAM,WAAU;iBAAhB;QAAkD;QAC9C;QAAS;QAAE,EAAG,oCAAoC,OAAO;QACtD;SAEL;QACL,EAAA,CAAA;KAED,EAnCC,EAmCD;KAER;GACE,CAAA,CACF"}

package/dist/components/vibecalendar/VibeCalWeekView.js

@@ -33,7 +33,7 @@ function u({ currentDate: u, occurrences: d, onTriggerNow: f, onViewLogs: p, onV
 		children: [/* @__PURE__ */ o("div", {
 			className: "flex border-b border-border-default flex-shrink-0",
 			children: [/* @__PURE__ */ a("div", { className: "w-16 flex-shrink-0" }), g.map((e, t) => /* @__PURE__ */ o("div", {
-				className: `flex-1 text-center py-2 border-l border-border-default ${_(e) ? "bg-action-primary-bg/5" : ""}`,
+				className: `flex-1 text-center py-2 border-l border-border-default ${_(e) ? "bg-[var(--color-accent-soft)]" : ""}`,
 				children: [/* @__PURE__ */ a("div", {
 					className: "text-xs text-text-tertiary",
 					children: c[t]
@@ -58,7 +58,7 @@ function u({ currentDate: u, occurrences: d, onTriggerNow: f, onViewLogs: p, onV
 					}), g.map((n, s) => {
 						let c = v(n, e);
 						return /* @__PURE__ */ a("div", {
-							className: `flex-1 border-l border-t border-border-default p-0.5 ${_(n) && e === y ? "bg-action-primary-bg/5" : ""}`,
+							className: `flex-1 border-l border-t border-border-default p-0.5 ${_(n) && e === y ? "bg-[var(--color-accent-soft)]" : ""}`,
 							children: c.map((e, n) => {
 								let s = e.task;
 								return /* @__PURE__ */ a("div", {
@@ -80,13 +80,13 @@ function u({ currentDate: u, occurrences: d, onTriggerNow: f, onViewLogs: p, onV
 											children: [f && /* @__PURE__ */ a("button", {
 												type: "button",
 												onClick: () => f(s.id),
-												className: "p-0.5 rounded hover:bg-bg-secondary",
+												className: "p-0.5 rounded hover:bg-bg-surface",
 												title: "Trigger Now",
 												children: /* @__PURE__ */ a(i, { size: 10 })
 											}), /* @__PURE__ */ a("button", {
 												type: "button",
 												onClick: () => p(s),
-												className: "p-0.5 rounded hover:bg-bg-secondary",
+												className: "p-0.5 rounded hover:bg-bg-surface",
 												title: "View Logs",
 												children: /* @__PURE__ */ a(r, { size: 10 })
 											})]

package/dist/components/vibecalendar/VibeCalWeekView.js.map

@@ -1 +1 @@
-{"version":3,"file":"VibeCalWeekView.js","names":[],"sources":["../../../src/components/vibecalendar/VibeCalWeekView.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport { Play, Eye } from 'lucide-react';\nimport { STATUS_COLORS } from './types';\nimport type { CalendarOccurrence, VibeCalendarTask } from './types';\nimport { useTr } from '../../shared/hooks/useTr';\n\ninterface VibeCalWeekViewProps {\n  currentDate: Date;\n  occurrences: CalendarOccurrence[];\n  onTriggerNow?: (taskId: string) => void;\n  onViewLogs: (task: VibeCalendarTask) => void;\n  onViewDetail: (taskId: string) => void;\n}\n\nconst HOURS = Array.from({ length: 24 }, (_, i) => i);\nconst DAYS_SHORT = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];\n\nfunction formatHour(hour: number): string {\n  if (hour === 0) return '12 AM';\n  if (hour < 12) return `${hour} AM`;\n  if (hour === 12) return '12 PM';\n  return `${hour - 12} PM`;\n}\n\nexport function VibeCalWeekView({\n  currentDate,\n  occurrences,\n  onTriggerNow,\n  onViewLogs,\n  onViewDetail,\n}: VibeCalWeekViewProps) {\n  const tr = useTr();\n  const today = new Date();\n\n  // Calculate the week's dates (Sun-Sat)\n  const weekDates = useMemo(() => {\n    const start = new Date(currentDate);\n    start.setDate(start.getDate() - start.getDay());\n    return Array.from({ length: 7 }, (_, i) => {\n      const d = new Date(start);\n      d.setDate(d.getDate() + i);\n      return d;\n    });\n  }, [currentDate]);\n\n  const isToday = (date: Date): boolean =>\n    date.getFullYear() === today.getFullYear() &&\n    date.getMonth() === today.getMonth() &&\n    date.getDate() === today.getDate();\n\n  const getOccurrencesForSlot = (date: Date, hour: number): CalendarOccurrence[] =>\n    occurrences.filter((occ) => {\n      const d = new Date(occ.occurrenceAt);\n      return (\n        d.getFullYear() === date.getFullYear() &&\n        d.getMonth() === date.getMonth() &&\n        d.getDate() === date.getDate() &&\n        d.getHours() === hour\n      );\n    });\n\n  const nowHour = today.getHours();\n\n  return (\n    <div className=\"flex-1 flex flex-col overflow-hidden\">\n      {/* Day column headers */}\n      <div className=\"flex border-b border-border-default flex-shrink-0\">\n        {/* Time gutter */}\n        <div className=\"w-16 flex-shrink-0\" />\n        {weekDates.map((date, i) => (\n          <div\n            key={i}\n            className={`flex-1 text-center py-2 border-l border-border-default ${\n              isToday(date) ? 'bg-action-primary-bg/5' : ''\n            }`}\n          >\n            <div className=\"text-xs text-text-tertiary\">{DAYS_SHORT[i]}</div>\n            <div\n              className={`text-sm font-medium mt-0.5 ${\n                isToday(date)\n                  ? 'inline-flex items-center justify-center size-7 rounded-full bg-action-primary-bg text-action-primary-text'\n                  : 'text-text-primary'\n              }`}\n            >\n              {date.getDate()}\n            </div>\n          </div>\n        ))}\n      </div>\n\n      {/* Time grid - scrollable */}\n      <div className=\"flex-1 overflow-auto\">\n        <div className=\"relative\">\n          {HOURS.map((hour) => (\n            <div key={hour} className=\"flex\" style={{ minHeight: '48px' }}>\n              {/* Time label */}\n              <div className=\"w-16 flex-shrink-0 text-right pr-2 pt-0.5\">\n                <span className=\"text-xs text-text-tertiary\">{formatHour(hour)}</span>\n              </div>\n\n              {/* Day columns */}\n              {weekDates.map((date, dayIdx) => {\n                const slotOccurrences = getOccurrencesForSlot(date, hour);\n                const isCurrent = isToday(date) && hour === nowHour;\n\n                return (\n                  <div\n                    key={dayIdx}\n                    className={`flex-1 border-l border-t border-border-default p-0.5 ${\n                      isCurrent ? 'bg-action-primary-bg/5' : ''\n                    }`}\n                  >\n                    {slotOccurrences.map((occ, j) => {\n                      const task = occ.task;\n                      const statusColor =\n                        STATUS_COLORS[occ.execution?.status || task.status] ||\n                        STATUS_COLORS.PENDING;\n\n                      return (\n                        <div\n                          role=\"button\"\n                          tabIndex={0}\n                          onKeyDown={(e) => {\n                            if (e.key === 'Enter' || e.key === ' ') {\n                              e.preventDefault();\n                              (() => onViewDetail(task.id))();\n                            }\n                          }}\n                          key={`${task.id}-${j}`}\n                          onClick={() => onViewDetail(task.id)}\n                          className={`mb-0.5 px-1.5 py-1 rounded text-xs border cursor-pointer ${statusColor} hover:opacity-80 transition-opacity`}\n                        >\n                          <div className=\"flex items-center justify-between gap-1\">\n                            <span className=\"truncate font-medium\">{task.title}</span>\n                            <div\n                              className=\"flex items-center gap-0.5 flex-shrink-0\"\n                              onClick={(e) => e.stopPropagation()}\n                            >\n                              {onTriggerNow && (\n                                <button\n                                  type=\"button\"\n                                  onClick={() => onTriggerNow(task.id)}\n                                  className=\"p-0.5 rounded hover:bg-bg-secondary\"\n                                  title=\"Trigger Now\"\n                                >\n                                  <Play size={10} />\n                                </button>\n                              )}\n                              <button\n                                type=\"button\"\n                                onClick={() => onViewLogs(task)}\n                                className=\"p-0.5 rounded hover:bg-bg-secondary\"\n                                title=\"View Logs\"\n                              >\n                                <Eye size={10} />\n                              </button>\n                            </div>\n                          </div>\n                        </div>\n                      );\n                    })}\n                  </div>\n                );\n              })}\n            </div>\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"VibeCalWeekView.js","names":[],"sources":["../../../src/components/vibecalendar/VibeCalWeekView.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport { Play, Eye } from 'lucide-react';\nimport { STATUS_COLORS } from './types';\nimport type { CalendarOccurrence, VibeCalendarTask } from './types';\nimport { useTr } from '../../shared/hooks/useTr';\n\ninterface VibeCalWeekViewProps {\n  currentDate: Date;\n  occurrences: CalendarOccurrence[];\n  onTriggerNow?: (taskId: string) => void;\n  onViewLogs: (task: VibeCalendarTask) => void;\n  onViewDetail: (taskId: string) => void;\n}\n\nconst HOURS = Array.from({ length: 24 }, (_, i) => i);\nconst DAYS_SHORT = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];\n\nfunction formatHour(hour: number): string {\n  if (hour === 0) return '12 AM';\n  if (hour < 12) return `${hour} AM`;\n  if (hour === 12) return '12 PM';\n  return `${hour - 12} PM`;\n}\n\nexport function VibeCalWeekView({\n  currentDate,\n  occurrences,\n  onTriggerNow,\n  onViewLogs,\n  onViewDetail,\n}: VibeCalWeekViewProps) {\n  const tr = useTr();\n  const today = new Date();\n\n  // Calculate the week's dates (Sun-Sat)\n  const weekDates = useMemo(() => {\n    const start = new Date(currentDate);\n    start.setDate(start.getDate() - start.getDay());\n    return Array.from({ length: 7 }, (_, i) => {\n      const d = new Date(start);\n      d.setDate(d.getDate() + i);\n      return d;\n    });\n  }, [currentDate]);\n\n  const isToday = (date: Date): boolean =>\n    date.getFullYear() === today.getFullYear() &&\n    date.getMonth() === today.getMonth() &&\n    date.getDate() === today.getDate();\n\n  const getOccurrencesForSlot = (date: Date, hour: number): CalendarOccurrence[] =>\n    occurrences.filter((occ) => {\n      const d = new Date(occ.occurrenceAt);\n      return (\n        d.getFullYear() === date.getFullYear() &&\n        d.getMonth() === date.getMonth() &&\n        d.getDate() === date.getDate() &&\n        d.getHours() === hour\n      );\n    });\n\n  const nowHour = today.getHours();\n\n  return (\n    <div className=\"flex-1 flex flex-col overflow-hidden\">\n      {/* Day column headers */}\n      <div className=\"flex border-b border-border-default flex-shrink-0\">\n        {/* Time gutter */}\n        <div className=\"w-16 flex-shrink-0\" />\n        {weekDates.map((date, i) => (\n          <div\n            key={i}\n            className={`flex-1 text-center py-2 border-l border-border-default ${\n              isToday(date) ? 'bg-[var(--color-accent-soft)]' : ''\n            }`}\n          >\n            <div className=\"text-xs text-text-tertiary\">{DAYS_SHORT[i]}</div>\n            <div\n              className={`text-sm font-medium mt-0.5 ${\n                isToday(date)\n                  ? 'inline-flex items-center justify-center size-7 rounded-full bg-action-primary-bg text-action-primary-text'\n                  : 'text-text-primary'\n              }`}\n            >\n              {date.getDate()}\n            </div>\n          </div>\n        ))}\n      </div>\n\n      {/* Time grid - scrollable */}\n      <div className=\"flex-1 overflow-auto\">\n        <div className=\"relative\">\n          {HOURS.map((hour) => (\n            <div key={hour} className=\"flex\" style={{ minHeight: '48px' }}>\n              {/* Time label */}\n              <div className=\"w-16 flex-shrink-0 text-right pr-2 pt-0.5\">\n                <span className=\"text-xs text-text-tertiary\">{formatHour(hour)}</span>\n              </div>\n\n              {/* Day columns */}\n              {weekDates.map((date, dayIdx) => {\n                const slotOccurrences = getOccurrencesForSlot(date, hour);\n                const isCurrent = isToday(date) && hour === nowHour;\n\n                return (\n                  <div\n                    key={dayIdx}\n                    className={`flex-1 border-l border-t border-border-default p-0.5 ${\n                      isCurrent ? 'bg-[var(--color-accent-soft)]' : ''\n                    }`}\n                  >\n                    {slotOccurrences.map((occ, j) => {\n                      const task = occ.task;\n                      const statusColor =\n                        STATUS_COLORS[occ.execution?.status || task.status] ||\n                        STATUS_COLORS.PENDING;\n\n                      return (\n                        <div\n                          role=\"button\"\n                          tabIndex={0}\n                          onKeyDown={(e) => {\n                            if (e.key === 'Enter' || e.key === ' ') {\n                              e.preventDefault();\n                              (() => onViewDetail(task.id))();\n                            }\n                          }}\n                          key={`${task.id}-${j}`}\n                          onClick={() => onViewDetail(task.id)}\n                          className={`mb-0.5 px-1.5 py-1 rounded text-xs border cursor-pointer ${statusColor} hover:opacity-80 transition-opacity`}\n                        >\n                          <div className=\"flex items-center justify-between gap-1\">\n                            <span className=\"truncate font-medium\">{task.title}</span>\n                            <div\n                              className=\"flex items-center gap-0.5 flex-shrink-0\"\n                              onClick={(e) => e.stopPropagation()}\n                            >\n                              {onTriggerNow && (\n                                <button\n                                  type=\"button\"\n                                  onClick={() => onTriggerNow(task.id)}\n                                  className=\"p-0.5 rounded hover:bg-bg-surface\"\n                                  title=\"Trigger Now\"\n                                >\n                                  <Play size={10} />\n                                </button>\n                              )}\n                              <button\n                                type=\"button\"\n                                onClick={() => onViewLogs(task)}\n                                className=\"p-0.5 rounded hover:bg-bg-surface\"\n                                title=\"View Logs\"\n                              >\n                                <Eye size={10} />\n                              </button>\n                            </div>\n                          </div>\n                        </div>\n                      );\n                    })}\n                  </div>\n                );\n              })}\n            </div>\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAcA,IAAM,IAAQ,MAAM,KAAK,EAAE,QAAQ,IAAI,GAAG,GAAG,MAAM,EAAE,EAC/C,IAAa;CAAC;CAAO;CAAO;CAAO;CAAO;CAAO;CAAO;CAAM;AAEpE,SAAS,EAAW,GAAsB;AAIxC,QAHI,MAAS,IAAU,UACnB,IAAO,KAAW,GAAG,EAAK,OAC1B,MAAS,KAAW,UACjB,GAAG,IAAO,GAAG;;AAGtB,SAAgB,EAAgB,EAC9B,gBACA,gBACA,iBACA,eACA,mBACuB;AACZ,IAAO;CAClB,IAAM,oBAAQ,IAAI,MAAM,EAGlB,IAAY,QAAc;EAC9B,IAAM,IAAQ,IAAI,KAAK,EAAY;AAEnC,SADA,EAAM,QAAQ,EAAM,SAAS,GAAG,EAAM,QAAQ,CAAC,EACxC,MAAM,KAAK,EAAE,QAAQ,GAAG,GAAG,GAAG,MAAM;GACzC,IAAM,IAAI,IAAI,KAAK,EAAM;AAEzB,UADA,EAAE,QAAQ,EAAE,SAAS,GAAG,EAAE,EACnB;IACP;IACD,CAAC,EAAY,CAAC,EAEX,KAAW,MACf,EAAK,aAAa,KAAK,EAAM,aAAa,IAC1C,EAAK,UAAU,KAAK,EAAM,UAAU,IACpC,EAAK,SAAS,KAAK,EAAM,SAAS,EAE9B,KAAyB,GAAY,MACzC,EAAY,QAAQ,MAAQ;EAC1B,IAAM,IAAI,IAAI,KAAK,EAAI,aAAa;AACpC,SACE,EAAE,aAAa,KAAK,EAAK,aAAa,IACtC,EAAE,UAAU,KAAK,EAAK,UAAU,IAChC,EAAE,SAAS,KAAK,EAAK,SAAS,IAC9B,EAAE,UAAU,KAAK;GAEnB,EAEE,IAAU,EAAM,UAAU;AAEhC,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CAEE,kBAAC,OAAD;GAAK,WAAU;aAAf,CAEE,kBAAC,OAAD,EAAK,WAAU,sBAAuB,CAAA,EACrC,EAAU,KAAK,GAAM,MACpB,kBAAC,OAAD;IAEE,WAAW,0DACT,EAAQ,EAAK,GAAG,kCAAkC;cAHtD,CAME,kBAAC,OAAD;KAAK,WAAU;eAA8B,EAAW;KAAS,CAAA,EACjE,kBAAC,OAAD;KACE,WAAW,8BACT,EAAQ,EAAK,GACT,8GACA;eAGL,EAAK,SAAS;KACX,CAAA,CACF;MAfC,EAeD,CACN,CACE;MAGN,kBAAC,OAAD;GAAK,WAAU;aACb,kBAAC,OAAD;IAAK,WAAU;cACZ,EAAM,KAAK,MACV,kBAAC,OAAD;KAAgB,WAAU;KAAO,OAAO,EAAE,WAAW,QAAQ;eAA7D,CAEE,kBAAC,OAAD;MAAK,WAAU;gBACb,kBAAC,QAAD;OAAM,WAAU;iBAA8B,EAAW,EAAK;OAAQ,CAAA;MAClE,CAAA,EAGL,EAAU,KAAK,GAAM,MAAW;MAC/B,IAAM,IAAkB,EAAsB,GAAM,EAAK;AAGzD,aACE,kBAAC,OAAD;OAEE,WAAW,wDALG,EAAQ,EAAK,IAAI,MAAS,IAM1B,kCAAkC;iBAG/C,EAAgB,KAAK,GAAK,MAAM;QAC/B,IAAM,IAAO,EAAI;AAKjB,eACE,kBAAC,OAAD;SACE,MAAK;SACL,UAAU;SACV,YAAY,MAAM;AAChB,WAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,SACjC,EAAE,gBAAgB,EACX,EAAa,EAAK,GAAG;;SAIhC,eAAe,EAAa,EAAK,GAAG;SACpC,WAAW,4DAfb,EAAc,EAAI,WAAW,UAAU,EAAK,WAC5C,EAAc,QAcuE;mBAEnF,kBAAC,OAAD;UAAK,WAAU;oBAAf,CACE,kBAAC,QAAD;WAAM,WAAU;qBAAwB,EAAK;WAAa,CAAA,EAC1D,kBAAC,OAAD;WACE,WAAU;WACV,UAAU,MAAM,EAAE,iBAAiB;qBAFrC,CAIG,KACC,kBAAC,UAAD;YACE,MAAK;YACL,eAAe,EAAa,EAAK,GAAG;YACpC,WAAU;YACV,OAAM;sBAEN,kBAAC,GAAD,EAAM,MAAM,IAAM,CAAA;YACX,CAAA,EAEX,kBAAC,UAAD;YACE,MAAK;YACL,eAAe,EAAW,EAAK;YAC/B,WAAU;YACV,OAAM;sBAEN,kBAAC,GAAD,EAAK,MAAM,IAAM,CAAA;YACV,CAAA,CACL;aACF;;SACF,EA9BC,GAAG,EAAK,GAAG,GAAG,IA8Bf;SAER;OACE,EAtDC,EAsDD;OAER,CACE;OAtEI,EAsEJ,CACN;IACE,CAAA;GACF,CAAA,CACF"}

package/dist/components/vibecalendar/VibeCalendarHeader.js

@@ -55,7 +55,7 @@ function d({ currentDate: t, viewMode: i, onDateChange: a, onViewModeChange: o,
 				/* @__PURE__ */ c("button", {
 					type: "button",
 					onClick: () => p("today"),
-					className: "px-3 py-1.5 text-sm font-medium bg-bg-surface border border-border-default rounded-md hover:bg-bg-secondary transition-colors",
+					className: "px-3 py-1.5 text-sm font-medium bg-bg-surface border border-border-default rounded-md hover:bg-bg-surface transition-colors",
 					children: f("vibecontrols.calendar.header.today", "Today")
 				}),
 				/* @__PURE__ */ l("div", {
@@ -63,12 +63,12 @@ function d({ currentDate: t, viewMode: i, onDateChange: a, onViewModeChange: o,
 					children: [/* @__PURE__ */ c("button", {
 						type: "button",
 						onClick: () => p("prev"),
-						className: "p-1.5 rounded-md hover:bg-bg-secondary transition-colors",
+						className: "p-1.5 rounded-md hover:bg-bg-surface transition-colors",
 						children: /* @__PURE__ */ c(n, { size: 18 })
 					}), /* @__PURE__ */ c("button", {
 						type: "button",
 						onClick: () => p("next"),
-						className: "p-1.5 rounded-md hover:bg-bg-secondary transition-colors",
+						className: "p-1.5 rounded-md hover:bg-bg-surface transition-colors",
 						children: /* @__PURE__ */ c(r, { size: 18 })
 					})]
 				}),
@@ -116,7 +116,7 @@ function d({ currentDate: t, viewMode: i, onDateChange: a, onViewModeChange: o,
 				children: u.map(({ mode: e, label: t, icon: n }) => /* @__PURE__ */ l("button", {
 					type: "button",
 					onClick: () => o(e),
-					className: `flex items-center justify-center gap-1.5 rounded-md px-2.5 py-1.5 text-xs transition-colors sm:px-3 sm:text-sm ${i === e ? "bg-action-primary-bg text-action-primary-text" : "text-text-secondary hover:text-text-primary hover:bg-bg-secondary"}`,
+					className: `flex items-center justify-center gap-1.5 rounded-md px-2.5 py-1.5 text-xs transition-colors sm:px-3 sm:text-sm ${i === e ? "bg-action-primary-bg text-action-primary-text" : "text-text-secondary hover:text-text-primary hover:bg-bg-surface"}`,
 					children: [/* @__PURE__ */ c(n, { size: 14 }), t]
 				}, e))
 			}), d && /* @__PURE__ */ l("button", {

package/dist/components/vibecalendar/VibeCalendarHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"VibeCalendarHeader.js","names":[],"sources":["../../../src/components/vibecalendar/VibeCalendarHeader.tsx"],"sourcesContent":["import { ChevronLeft, ChevronRight, Plus, Calendar, List, LayoutGrid, Clock } from 'lucide-react';\nimport type { CalendarViewMode } from './types';\nimport { useTr } from '../../shared/hooks/useTr';\n\ninterface VibeCalendarHeaderProps {\n  currentDate: Date;\n  viewMode: CalendarViewMode;\n  onDateChange: (date: Date) => void;\n  onViewModeChange: (mode: CalendarViewMode) => void;\n  onCreateTask?: () => void;\n}\n\nconst VIEW_OPTIONS: { mode: CalendarViewMode; label: string; icon: typeof Calendar }[] = [\n  { mode: 'month', label: 'Month', icon: LayoutGrid },\n  { mode: 'week', label: 'Week', icon: Calendar },\n  { mode: 'day', label: 'Day', icon: Clock },\n  { mode: 'agenda', label: 'Agenda', icon: List },\n];\n\nexport function VibeCalendarHeader({\n  currentDate,\n  viewMode,\n  onDateChange,\n  onViewModeChange,\n  onCreateTask,\n}: VibeCalendarHeaderProps) {\n  const tr = useTr();\n  const navigateDate = (direction: 'prev' | 'next' | 'today') => {\n    if (direction === 'today') {\n      onDateChange(new Date());\n      return;\n    }\n\n    const newDate = new Date(currentDate);\n    const delta = direction === 'prev' ? -1 : 1;\n\n    switch (viewMode) {\n      case 'month':\n        newDate.setMonth(newDate.getMonth() + delta);\n        break;\n      case 'week':\n        newDate.setDate(newDate.getDate() + delta * 7);\n        break;\n      case 'day':\n        newDate.setDate(newDate.getDate() + delta);\n        break;\n      case 'agenda':\n        newDate.setMonth(newDate.getMonth() + delta);\n        break;\n    }\n\n    onDateChange(newDate);\n  };\n\n  const formatDateLabel = (): string => {\n    const options: Intl.DateTimeFormatOptions = { year: 'numeric' };\n\n    switch (viewMode) {\n      case 'month':\n        return currentDate.toLocaleDateString('en-US', { month: 'long', year: 'numeric' });\n      case 'week': {\n        const weekStart = new Date(currentDate);\n        weekStart.setDate(weekStart.getDate() - weekStart.getDay());\n        const weekEnd = new Date(weekStart);\n        weekEnd.setDate(weekEnd.getDate() + 6);\n        return `${weekStart.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })} - ${weekEnd.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}`;\n      }\n      case 'day':\n        return currentDate.toLocaleDateString('en-US', {\n          weekday: 'long',\n          month: 'long',\n          day: 'numeric',\n          year: 'numeric',\n        });\n      case 'agenda':\n        return currentDate.toLocaleDateString('en-US', { month: 'long', year: 'numeric' });\n      default:\n        return currentDate.toLocaleDateString('en-US', options);\n    }\n  };\n\n  return (\n    <div className=\"flex flex-col gap-3 border-b border-border-default pb-4 lg:flex-row lg:items-center lg:justify-between\">\n      {/* Left: Navigation */}\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <button\n          type=\"button\"\n          onClick={() => navigateDate('today')}\n          className=\"px-3 py-1.5 text-sm font-medium bg-bg-surface border border-border-default rounded-md hover:bg-bg-secondary transition-colors\"\n        >\n          {tr('vibecontrols.calendar.header.today', 'Today')}\n        </button>\n        <div className=\"flex items-center gap-1\">\n          <button\n            type=\"button\"\n            onClick={() => navigateDate('prev')}\n            className=\"p-1.5 rounded-md hover:bg-bg-secondary transition-colors\"\n          >\n            <ChevronLeft size={18} />\n          </button>\n          <button\n            type=\"button\"\n            onClick={() => navigateDate('next')}\n            className=\"p-1.5 rounded-md hover:bg-bg-secondary transition-colors\"\n          >\n            <ChevronRight size={18} />\n          </button>\n        </div>\n        <h2 className=\"min-w-0 text-base font-semibold text-text-primary sm:ml-2 sm:text-lg\">\n          {formatDateLabel()}\n        </h2>\n      </div>\n\n      {/* Right: View Mode + Create */}\n      <div className=\"flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between lg:justify-end\">\n        {/* View Mode Switcher */}\n        <div className=\"grid grid-cols-2 gap-1 rounded-lg border border-border-default bg-bg-surface p-1 sm:flex sm:items-center sm:gap-0.5 sm:p-0.5\">\n          {VIEW_OPTIONS.map(({ mode, label, icon: Icon }) => (\n            <button\n              type=\"button\"\n              key={mode}\n              onClick={() => onViewModeChange(mode)}\n              className={`flex items-center justify-center gap-1.5 rounded-md px-2.5 py-1.5 text-xs transition-colors sm:px-3 sm:text-sm ${\n                viewMode === mode\n                  ? 'bg-action-primary-bg text-action-primary-text'\n                  : 'text-text-secondary hover:text-text-primary hover:bg-bg-secondary'\n              }`}\n            >\n              <Icon size={14} />\n              {label}\n            </button>\n          ))}\n        </div>\n\n        {/* Create Task Button */}\n        {onCreateTask && (\n          <button\n            type=\"button\"\n            onClick={onCreateTask}\n            className=\"flex w-full items-center justify-center gap-2 rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text transition-opacity hover:opacity-90 sm:w-auto\"\n          >\n            <Plus size={16} />\n            {tr('vibecontrols.calendar.header.scheduleTask', 'Schedule Task')}\n          </button>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"VibeCalendarHeader.js","names":[],"sources":["../../../src/components/vibecalendar/VibeCalendarHeader.tsx"],"sourcesContent":["import { ChevronLeft, ChevronRight, Plus, Calendar, List, LayoutGrid, Clock } from 'lucide-react';\nimport type { CalendarViewMode } from './types';\nimport { useTr } from '../../shared/hooks/useTr';\n\ninterface VibeCalendarHeaderProps {\n  currentDate: Date;\n  viewMode: CalendarViewMode;\n  onDateChange: (date: Date) => void;\n  onViewModeChange: (mode: CalendarViewMode) => void;\n  onCreateTask?: () => void;\n}\n\nconst VIEW_OPTIONS: { mode: CalendarViewMode; label: string; icon: typeof Calendar }[] = [\n  { mode: 'month', label: 'Month', icon: LayoutGrid },\n  { mode: 'week', label: 'Week', icon: Calendar },\n  { mode: 'day', label: 'Day', icon: Clock },\n  { mode: 'agenda', label: 'Agenda', icon: List },\n];\n\nexport function VibeCalendarHeader({\n  currentDate,\n  viewMode,\n  onDateChange,\n  onViewModeChange,\n  onCreateTask,\n}: VibeCalendarHeaderProps) {\n  const tr = useTr();\n  const navigateDate = (direction: 'prev' | 'next' | 'today') => {\n    if (direction === 'today') {\n      onDateChange(new Date());\n      return;\n    }\n\n    const newDate = new Date(currentDate);\n    const delta = direction === 'prev' ? -1 : 1;\n\n    switch (viewMode) {\n      case 'month':\n        newDate.setMonth(newDate.getMonth() + delta);\n        break;\n      case 'week':\n        newDate.setDate(newDate.getDate() + delta * 7);\n        break;\n      case 'day':\n        newDate.setDate(newDate.getDate() + delta);\n        break;\n      case 'agenda':\n        newDate.setMonth(newDate.getMonth() + delta);\n        break;\n    }\n\n    onDateChange(newDate);\n  };\n\n  const formatDateLabel = (): string => {\n    const options: Intl.DateTimeFormatOptions = { year: 'numeric' };\n\n    switch (viewMode) {\n      case 'month':\n        return currentDate.toLocaleDateString('en-US', { month: 'long', year: 'numeric' });\n      case 'week': {\n        const weekStart = new Date(currentDate);\n        weekStart.setDate(weekStart.getDate() - weekStart.getDay());\n        const weekEnd = new Date(weekStart);\n        weekEnd.setDate(weekEnd.getDate() + 6);\n        return `${weekStart.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })} - ${weekEnd.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}`;\n      }\n      case 'day':\n        return currentDate.toLocaleDateString('en-US', {\n          weekday: 'long',\n          month: 'long',\n          day: 'numeric',\n          year: 'numeric',\n        });\n      case 'agenda':\n        return currentDate.toLocaleDateString('en-US', { month: 'long', year: 'numeric' });\n      default:\n        return currentDate.toLocaleDateString('en-US', options);\n    }\n  };\n\n  return (\n    <div className=\"flex flex-col gap-3 border-b border-border-default pb-4 lg:flex-row lg:items-center lg:justify-between\">\n      {/* Left: Navigation */}\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <button\n          type=\"button\"\n          onClick={() => navigateDate('today')}\n          className=\"px-3 py-1.5 text-sm font-medium bg-bg-surface border border-border-default rounded-md hover:bg-bg-surface transition-colors\"\n        >\n          {tr('vibecontrols.calendar.header.today', 'Today')}\n        </button>\n        <div className=\"flex items-center gap-1\">\n          <button\n            type=\"button\"\n            onClick={() => navigateDate('prev')}\n            className=\"p-1.5 rounded-md hover:bg-bg-surface transition-colors\"\n          >\n            <ChevronLeft size={18} />\n          </button>\n          <button\n            type=\"button\"\n            onClick={() => navigateDate('next')}\n            className=\"p-1.5 rounded-md hover:bg-bg-surface transition-colors\"\n          >\n            <ChevronRight size={18} />\n          </button>\n        </div>\n        <h2 className=\"min-w-0 text-base font-semibold text-text-primary sm:ml-2 sm:text-lg\">\n          {formatDateLabel()}\n        </h2>\n      </div>\n\n      {/* Right: View Mode + Create */}\n      <div className=\"flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between lg:justify-end\">\n        {/* View Mode Switcher */}\n        <div className=\"grid grid-cols-2 gap-1 rounded-lg border border-border-default bg-bg-surface p-1 sm:flex sm:items-center sm:gap-0.5 sm:p-0.5\">\n          {VIEW_OPTIONS.map(({ mode, label, icon: Icon }) => (\n            <button\n              type=\"button\"\n              key={mode}\n              onClick={() => onViewModeChange(mode)}\n              className={`flex items-center justify-center gap-1.5 rounded-md px-2.5 py-1.5 text-xs transition-colors sm:px-3 sm:text-sm ${\n                viewMode === mode\n                  ? 'bg-action-primary-bg text-action-primary-text'\n                  : 'text-text-secondary hover:text-text-primary hover:bg-bg-surface'\n              }`}\n            >\n              <Icon size={14} />\n              {label}\n            </button>\n          ))}\n        </div>\n\n        {/* Create Task Button */}\n        {onCreateTask && (\n          <button\n            type=\"button\"\n            onClick={onCreateTask}\n            className=\"flex w-full items-center justify-center gap-2 rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text transition-opacity hover:opacity-90 sm:w-auto\"\n          >\n            <Plus size={16} />\n            {tr('vibecontrols.calendar.header.scheduleTask', 'Schedule Task')}\n          </button>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/components/vibecalendar/VibeTaskBlock.js

@@ -47,13 +47,13 @@ function o({ task: o, compact: s = !1, onTriggerNow: c, onViewLogs: l, onViewDet
 				children: [c && /* @__PURE__ */ i("button", {
 					type: "button",
 					onClick: () => c(o.id),
-					className: "p-1 rounded hover:bg-bg-secondary transition-colors",
+					className: "p-1 rounded hover:bg-bg-surface transition-colors",
 					title: "Trigger Now",
 					children: /* @__PURE__ */ i(r, { size: 14 })
 				}), /* @__PURE__ */ i("button", {
 					type: "button",
 					onClick: () => l(o),
-					className: "p-1 rounded hover:bg-bg-secondary transition-colors",
+					className: "p-1 rounded hover:bg-bg-surface transition-colors",
 					title: "View Logs",
 					children: /* @__PURE__ */ i(n, { size: 14 })
 				})]

package/dist/components/vibecalendar/VibeTaskBlock.js.map

@@ -1 +1 @@
-{"version":3,"file":"VibeTaskBlock.js","names":[],"sources":["../../../src/components/vibecalendar/VibeTaskBlock.tsx"],"sourcesContent":["import { Play, Eye } from 'lucide-react';\nimport { STATUS_COLORS } from './types';\nimport type { VibeCalendarTask } from './types';\nimport { useTr } from '../../shared/hooks/useTr';\n\ninterface VibeTaskBlockProps {\n  task: VibeCalendarTask;\n  compact?: boolean;\n  onTriggerNow?: (taskId: string) => void;\n  onViewLogs: (task: VibeCalendarTask) => void;\n  onViewDetail: (taskId: string) => void;\n}\n\nexport function VibeTaskBlock({\n  task,\n  compact = false,\n  onTriggerNow,\n  onViewLogs,\n  onViewDetail,\n}: VibeTaskBlockProps) {\n  const tr = useTr();\n  const statusColor = STATUS_COLORS[task.status] || STATUS_COLORS.PENDING;\n  const commandPreview = task.taskConfig.command\n    ? task.taskConfig.command.length > 40\n      ? task.taskConfig.command.slice(0, 40) + '...'\n      : task.taskConfig.command\n    : task.taskConfig.script\n      ? 'Script'\n      : 'File Operation';\n\n  if (compact) {\n    return (\n      <button\n        type=\"button\"\n        onClick={() => onViewDetail(task.id)}\n        className={`w-full text-left px-2 py-1 rounded text-xs truncate border ${statusColor} hover:opacity-80 transition-opacity`}\n        title={task.title}\n      >\n        {task.title}\n      </button>\n    );\n  }\n\n  return (\n    <div\n      role=\"button\"\n      tabIndex={0}\n      onKeyDown={(e) => {\n        if (e.key === 'Enter' || e.key === ' ') {\n          e.preventDefault();\n          (() => onViewDetail(task.id))();\n        }\n      }}\n      className={`relative p-3 rounded-lg border ${statusColor} hover:opacity-90 transition-opacity cursor-pointer`}\n      onClick={() => onViewDetail(task.id)}\n    >\n      <div className=\"flex items-start justify-between gap-2\">\n        <div className=\"flex-1 min-w-0\">\n          <h4 className=\"font-medium text-sm text-text-primary truncate\">{task.title}</h4>\n          <p className=\"text-xs text-text-secondary mt-0.5 font-mono truncate\">{commandPreview}</p>\n          <div className=\"flex items-center gap-2 mt-1.5\">\n            {task.nextExecutionAt && (\n              <span className=\"text-xs text-text-tertiary\">\n                Next: {new Date(task.nextExecutionAt).toLocaleString()}\n              </span>\n            )}\n          </div>\n        </div>\n\n        {/* Quick Actions */}\n        <div className=\"flex items-center gap-1\" onClick={(e) => e.stopPropagation()}>\n          {onTriggerNow && (\n            <button\n              type=\"button\"\n              onClick={() => onTriggerNow(task.id)}\n              className=\"p-1 rounded hover:bg-bg-secondary transition-colors\"\n              title=\"Trigger Now\"\n            >\n              <Play size={14} />\n            </button>\n          )}\n          <button\n            type=\"button\"\n            onClick={() => onViewLogs(task)}\n            className=\"p-1 rounded hover:bg-bg-secondary transition-colors\"\n            title=\"View Logs\"\n          >\n            <Eye size={14} />\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;AAaA,SAAgB,EAAc,EAC5B,SACA,aAAU,IACV,iBACA,eACA,mBACqB;AACV,IAAO;CAClB,IAAM,IAAc,EAAc,EAAK,WAAW,EAAc,SAC1D,IAAiB,EAAK,WAAW,UACnC,EAAK,WAAW,QAAQ,SAAS,KAC/B,EAAK,WAAW,QAAQ,MAAM,GAAG,GAAG,GAAG,QACvC,EAAK,WAAW,UAClB,EAAK,WAAW,SACd,WACA;AAeN,QAbI,IAEA,kBAAC,UAAD;EACE,MAAK;EACL,eAAe,EAAa,EAAK,GAAG;EACpC,WAAW,8DAA8D,EAAY;EACrF,OAAO,EAAK;YAEX,EAAK;EACC,CAAA,GAKX,kBAAC,OAAD;EACE,MAAK;EACL,UAAU;EACV,YAAY,MAAM;AAChB,IAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,SACjC,EAAE,gBAAgB,EACX,EAAa,EAAK,GAAG;;EAGhC,WAAW,kCAAkC,EAAY;EACzD,eAAe,EAAa,EAAK,GAAG;YAEpC,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,OAAD;IAAK,WAAU;cAAf;KACE,kBAAC,MAAD;MAAI,WAAU;gBAAkD,EAAK;MAAW,CAAA;KAChF,kBAAC,KAAD;MAAG,WAAU;gBAAyD;MAAmB,CAAA;KACzF,kBAAC,OAAD;MAAK,WAAU;gBACZ,EAAK,mBACJ,kBAAC,QAAD;OAAM,WAAU;iBAAhB,CAA6C,UACpC,IAAI,KAAK,EAAK,gBAAgB,CAAC,gBAAgB,CACjD;;MAEL,CAAA;KACF;OAGN,kBAAC,OAAD;IAAK,WAAU;IAA0B,UAAU,MAAM,EAAE,iBAAiB;cAA5E,CACG,KACC,kBAAC,UAAD;KACE,MAAK;KACL,eAAe,EAAa,EAAK,GAAG;KACpC,WAAU;KACV,OAAM;eAEN,kBAAC,GAAD,EAAM,MAAM,IAAM,CAAA;KACX,CAAA,EAEX,kBAAC,UAAD;KACE,MAAK;KACL,eAAe,EAAW,EAAK;KAC/B,WAAU;KACV,OAAM;eAEN,kBAAC,GAAD,EAAK,MAAM,IAAM,CAAA;KACV,CAAA,CACL;MACF;;EACF,CAAA"}
+{"version":3,"file":"VibeTaskBlock.js","names":[],"sources":["../../../src/components/vibecalendar/VibeTaskBlock.tsx"],"sourcesContent":["import { Play, Eye } from 'lucide-react';\nimport { STATUS_COLORS } from './types';\nimport type { VibeCalendarTask } from './types';\nimport { useTr } from '../../shared/hooks/useTr';\n\ninterface VibeTaskBlockProps {\n  task: VibeCalendarTask;\n  compact?: boolean;\n  onTriggerNow?: (taskId: string) => void;\n  onViewLogs: (task: VibeCalendarTask) => void;\n  onViewDetail: (taskId: string) => void;\n}\n\nexport function VibeTaskBlock({\n  task,\n  compact = false,\n  onTriggerNow,\n  onViewLogs,\n  onViewDetail,\n}: VibeTaskBlockProps) {\n  const tr = useTr();\n  const statusColor = STATUS_COLORS[task.status] || STATUS_COLORS.PENDING;\n  const commandPreview = task.taskConfig.command\n    ? task.taskConfig.command.length > 40\n      ? task.taskConfig.command.slice(0, 40) + '...'\n      : task.taskConfig.command\n    : task.taskConfig.script\n      ? 'Script'\n      : 'File Operation';\n\n  if (compact) {\n    return (\n      <button\n        type=\"button\"\n        onClick={() => onViewDetail(task.id)}\n        className={`w-full text-left px-2 py-1 rounded text-xs truncate border ${statusColor} hover:opacity-80 transition-opacity`}\n        title={task.title}\n      >\n        {task.title}\n      </button>\n    );\n  }\n\n  return (\n    <div\n      role=\"button\"\n      tabIndex={0}\n      onKeyDown={(e) => {\n        if (e.key === 'Enter' || e.key === ' ') {\n          e.preventDefault();\n          (() => onViewDetail(task.id))();\n        }\n      }}\n      className={`relative p-3 rounded-lg border ${statusColor} hover:opacity-90 transition-opacity cursor-pointer`}\n      onClick={() => onViewDetail(task.id)}\n    >\n      <div className=\"flex items-start justify-between gap-2\">\n        <div className=\"flex-1 min-w-0\">\n          <h4 className=\"font-medium text-sm text-text-primary truncate\">{task.title}</h4>\n          <p className=\"text-xs text-text-secondary mt-0.5 font-mono truncate\">{commandPreview}</p>\n          <div className=\"flex items-center gap-2 mt-1.5\">\n            {task.nextExecutionAt && (\n              <span className=\"text-xs text-text-tertiary\">\n                Next: {new Date(task.nextExecutionAt).toLocaleString()}\n              </span>\n            )}\n          </div>\n        </div>\n\n        {/* Quick Actions */}\n        <div className=\"flex items-center gap-1\" onClick={(e) => e.stopPropagation()}>\n          {onTriggerNow && (\n            <button\n              type=\"button\"\n              onClick={() => onTriggerNow(task.id)}\n              className=\"p-1 rounded hover:bg-bg-surface transition-colors\"\n              title=\"Trigger Now\"\n            >\n              <Play size={14} />\n            </button>\n          )}\n          <button\n            type=\"button\"\n            onClick={() => onViewLogs(task)}\n            className=\"p-1 rounded hover:bg-bg-surface transition-colors\"\n            title=\"View Logs\"\n          >\n            <Eye size={14} />\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;AAaA,SAAgB,EAAc,EAC5B,SACA,aAAU,IACV,iBACA,eACA,mBACqB;AACV,IAAO;CAClB,IAAM,IAAc,EAAc,EAAK,WAAW,EAAc,SAC1D,IAAiB,EAAK,WAAW,UACnC,EAAK,WAAW,QAAQ,SAAS,KAC/B,EAAK,WAAW,QAAQ,MAAM,GAAG,GAAG,GAAG,QACvC,EAAK,WAAW,UAClB,EAAK,WAAW,SACd,WACA;AAeN,QAbI,IAEA,kBAAC,UAAD;EACE,MAAK;EACL,eAAe,EAAa,EAAK,GAAG;EACpC,WAAW,8DAA8D,EAAY;EACrF,OAAO,EAAK;YAEX,EAAK;EACC,CAAA,GAKX,kBAAC,OAAD;EACE,MAAK;EACL,UAAU;EACV,YAAY,MAAM;AAChB,IAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,SACjC,EAAE,gBAAgB,EACX,EAAa,EAAK,GAAG;;EAGhC,WAAW,kCAAkC,EAAY;EACzD,eAAe,EAAa,EAAK,GAAG;YAEpC,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,OAAD;IAAK,WAAU;cAAf;KACE,kBAAC,MAAD;MAAI,WAAU;gBAAkD,EAAK;MAAW,CAAA;KAChF,kBAAC,KAAD;MAAG,WAAU;gBAAyD;MAAmB,CAAA;KACzF,kBAAC,OAAD;MAAK,WAAU;gBACZ,EAAK,mBACJ,kBAAC,QAAD;OAAM,WAAU;iBAAhB,CAA6C,UACpC,IAAI,KAAK,EAAK,gBAAgB,CAAC,gBAAgB,CACjD;;MAEL,CAAA;KACF;OAGN,kBAAC,OAAD;IAAK,WAAU;IAA0B,UAAU,MAAM,EAAE,iBAAiB;cAA5E,CACG,KACC,kBAAC,UAAD;KACE,MAAK;KACL,eAAe,EAAa,EAAK,GAAG;KACpC,WAAU;KACV,OAAM;eAEN,kBAAC,GAAD,EAAM,MAAM,IAAM,CAAA;KACX,CAAA,EAEX,kBAAC,UAAD;KACE,MAAK;KACL,eAAe,EAAW,EAAK;KAC/B,WAAU;KACV,OAAM;eAEN,kBAAC,GAAD,EAAK,MAAM,IAAM,CAAA;KACV,CAAA,CACL;MACF;;EACF,CAAA"}

package/dist/components/vibecalendar/types.js

@@ -1,15 +1,15 @@
 //#region src/components/vibecalendar/types.ts
 var e = {
-	PENDING: "bg-status-info-bg/10 text-status-info-text border-status-info-border/30",
-	RUNNING: "bg-status-warning-bg/10 text-status-warning-text border-status-warning-border/30",
-	COMPLETED: "bg-status-success-bg/10 text-status-success-text border-status-success-border/30",
-	FAILED: "bg-status-error-bg/10 text-status-error-text border-status-error-border/30",
+	PENDING: "bg-status-info-bg-subtle text-status-info-text border-status-info-border/30",
+	RUNNING: "bg-status-warning-bg-subtle text-status-warning-text border-status-warning-border/30",
+	COMPLETED: "bg-status-success-bg-subtle text-status-success-text border-status-success-border/30",
+	FAILED: "bg-status-error-bg-subtle text-status-error-text border-status-error-border/30",
 	PAUSED: "bg-bg-muted/10 text-text-tertiary border-border-subtle/30",
 	CANCELLED: "bg-bg-muted/10 text-text-tertiary border-border-subtle/30",
 	DRAFT: "bg-bg-muted/10 text-text-tertiary border-border-subtle/30",
-	TIMEOUT: "bg-status-warning-bg/10 text-status-warning-text border-status-warning-border/30",
+	TIMEOUT: "bg-status-warning-bg-subtle text-status-warning-text border-status-warning-border/30",
 	MANUAL: "bg-accent-purple-subtle text-accent-purple border-accent-purple/30",
-	SCHEDULE: "bg-status-info-bg/10 text-status-info-text border-status-info-border/30",
+	SCHEDULE: "bg-status-info-bg-subtle text-status-info-text border-status-info-border/30",
 	ARCHIVED: "bg-bg-muted/10 text-text-tertiary border-border-subtle/30",
 	DISABLED: "bg-bg-muted/10 text-text-tertiary border-border-subtle/30"
 };

package/dist/components/vibecalendar/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":[],"sources":["../../../src/components/vibecalendar/types.ts"],"sourcesContent":["export type CalendarViewMode = 'month' | 'week' | 'day' | 'agenda';\n\n// Where a calendar tile's data originally came from. Set by\n// client-side mappers ONLY — never present on the GraphQL response.\n// Page handlers branch on this to pick the matching subgraph for\n// mutations and the matching detail route. Omitted = default\n// `vibeCalendarTask` (rows from wspace-calendar-svc).\nexport type VibeCalendarTaskSource = 'scheduledJob' | 'vibeCalendarTask';\n\nexport interface VibeCalendarTask {\n  id: string;\n  /**\n   * Set by client-side mappers (e.g. `jobToVibeCalendarTask`). Reading\n   * code branches on this to pick the correct mutation/route. Omitted\n   * for real VibeCalendarTask rows fetched from wspace-calendar-svc —\n   * treat `undefined` as `'vibeCalendarTask'`.\n   */\n  source?: VibeCalendarTaskSource;\n  title: string;\n  description: string | null;\n  calendarId: string;\n  calendarEventId: string;\n  agentId: string;\n  taskConfig: {\n    taskType: string;\n    command?: string | null;\n    script?: string | null;\n    interpreter?: string | null;\n    cwd?: string | null;\n    env?: Record<string, string> | null;\n    timeout?: number | null;\n    webhookUrl?: string | null;\n    webhookMethod?: string | null;\n    webhookHeaders?: Record<string, string> | null;\n    webhookAuthType?: string | null;\n    webhookPayload?: Record<string, unknown> | null;\n  };\n  cronExpression: string | null;\n  rrule: string | null;\n  scheduledAt: string | null;\n  timezone: string;\n  nextExecutionAt: string | null;\n  lastExecutedAt: string | null;\n  status: string;\n  totalExecutions: number;\n  consecutiveFailures: number;\n  createdAt: string;\n  updatedAt: string;\n}\n\nexport interface VibeCalendarExecution {\n  id: string;\n  taskId: string;\n  status: string;\n  output: string | null;\n  exitCode: number | null;\n  webhookStatusCode: number | null;\n  startedAt: string | null;\n  completedAt: string | null;\n  error: string | null;\n}\n\nexport interface CalendarOccurrence {\n  task: VibeCalendarTask;\n  occurrenceAt: string;\n  isPast: boolean;\n  execution: VibeCalendarExecution | null;\n}\n\nexport const STATUS_COLORS: Record<string, string> = {\n  PENDING: 'bg-status-info-bg/10 text-status-info-text border-status-info-border/30',\n  RUNNING: 'bg-status-warning-bg/10 text-status-warning-text border-status-warning-border/30',\n  COMPLETED: 'bg-status-success-bg/10 text-status-success-text border-status-success-border/30',\n  FAILED: 'bg-status-error-bg/10 text-status-error-text border-status-error-border/30',\n  PAUSED: 'bg-bg-muted/10 text-text-tertiary border-border-subtle/30',\n  CANCELLED: 'bg-bg-muted/10 text-text-tertiary border-border-subtle/30',\n  DRAFT: 'bg-bg-muted/10 text-text-tertiary border-border-subtle/30',\n  TIMEOUT: 'bg-status-warning-bg/10 text-status-warning-text border-status-warning-border/30',\n  MANUAL: 'bg-accent-purple-subtle text-accent-purple border-accent-purple/30',\n  SCHEDULE: 'bg-status-info-bg/10 text-status-info-text border-status-info-border/30',\n  // Scheduler-svc JobStatus exclusives — without these the badge\n  // silently falls back to PENDING styling on archived/disabled jobs.\n  ARCHIVED: 'bg-bg-muted/10 text-text-tertiary border-border-subtle/30',\n  DISABLED: 'bg-bg-muted/10 text-text-tertiary border-border-subtle/30',\n};\n"],"mappings":";AAqEA,IAAa,IAAwC;CACnD,SAAS;CACT,SAAS;CACT,WAAW;CACX,QAAQ;CACR,QAAQ;CACR,WAAW;CACX,OAAO;CACP,SAAS;CACT,QAAQ;CACR,UAAU;CAGV,UAAU;CACV,UAAU;CACX"}
+{"version":3,"file":"types.js","names":[],"sources":["../../../src/components/vibecalendar/types.ts"],"sourcesContent":["export type CalendarViewMode = 'month' | 'week' | 'day' | 'agenda';\n\n// Where a calendar tile's data originally came from. Set by\n// client-side mappers ONLY — never present on the GraphQL response.\n// Page handlers branch on this to pick the matching subgraph for\n// mutations and the matching detail route. Omitted = default\n// `vibeCalendarTask` (rows from wspace-calendar-svc).\nexport type VibeCalendarTaskSource = 'scheduledJob' | 'vibeCalendarTask';\n\nexport interface VibeCalendarTask {\n  id: string;\n  /**\n   * Set by client-side mappers (e.g. `jobToVibeCalendarTask`). Reading\n   * code branches on this to pick the correct mutation/route. Omitted\n   * for real VibeCalendarTask rows fetched from wspace-calendar-svc —\n   * treat `undefined` as `'vibeCalendarTask'`.\n   */\n  source?: VibeCalendarTaskSource;\n  title: string;\n  description: string | null;\n  calendarId: string;\n  calendarEventId: string;\n  agentId: string;\n  taskConfig: {\n    taskType: string;\n    command?: string | null;\n    script?: string | null;\n    interpreter?: string | null;\n    cwd?: string | null;\n    env?: Record<string, string> | null;\n    timeout?: number | null;\n    webhookUrl?: string | null;\n    webhookMethod?: string | null;\n    webhookHeaders?: Record<string, string> | null;\n    webhookAuthType?: string | null;\n    webhookPayload?: Record<string, unknown> | null;\n  };\n  cronExpression: string | null;\n  rrule: string | null;\n  scheduledAt: string | null;\n  timezone: string;\n  nextExecutionAt: string | null;\n  lastExecutedAt: string | null;\n  status: string;\n  totalExecutions: number;\n  consecutiveFailures: number;\n  createdAt: string;\n  updatedAt: string;\n}\n\nexport interface VibeCalendarExecution {\n  id: string;\n  taskId: string;\n  status: string;\n  output: string | null;\n  exitCode: number | null;\n  webhookStatusCode: number | null;\n  startedAt: string | null;\n  completedAt: string | null;\n  error: string | null;\n}\n\nexport interface CalendarOccurrence {\n  task: VibeCalendarTask;\n  occurrenceAt: string;\n  isPast: boolean;\n  execution: VibeCalendarExecution | null;\n}\n\nexport const STATUS_COLORS: Record<string, string> = {\n  PENDING: 'bg-status-info-bg-subtle text-status-info-text border-status-info-border/30',\n  RUNNING: 'bg-status-warning-bg-subtle text-status-warning-text border-status-warning-border/30',\n  COMPLETED: 'bg-status-success-bg-subtle text-status-success-text border-status-success-border/30',\n  FAILED: 'bg-status-error-bg-subtle text-status-error-text border-status-error-border/30',\n  PAUSED: 'bg-bg-muted/10 text-text-tertiary border-border-subtle/30',\n  CANCELLED: 'bg-bg-muted/10 text-text-tertiary border-border-subtle/30',\n  DRAFT: 'bg-bg-muted/10 text-text-tertiary border-border-subtle/30',\n  TIMEOUT: 'bg-status-warning-bg-subtle text-status-warning-text border-status-warning-border/30',\n  MANUAL: 'bg-accent-purple-subtle text-accent-purple border-accent-purple/30',\n  SCHEDULE: 'bg-status-info-bg-subtle text-status-info-text border-status-info-border/30',\n  // Scheduler-svc JobStatus exclusives — without these the badge\n  // silently falls back to PENDING styling on archived/disabled jobs.\n  ARCHIVED: 'bg-bg-muted/10 text-text-tertiary border-border-subtle/30',\n  DISABLED: 'bg-bg-muted/10 text-text-tertiary border-border-subtle/30',\n};\n"],"mappings":";AAqEA,IAAa,IAAwC;CACnD,SAAS;CACT,SAAS;CACT,WAAW;CACX,QAAQ;CACR,QAAQ;CACR,WAAW;CACX,OAAO;CACP,SAAS;CACT,QAAQ;CACR,UAAU;CAGV,UAAU;CACV,UAAU;CACX"}

package/dist/components/vibedeck/VibeDeckButtonForm.js

@@ -158,7 +158,7 @@ var _ = ({ initialData: _, agents: v, onSubmit: y, onCancel: b, isLoading: x, ti
 		A,
 		z,
 		y
-	]), Z = "w-full px-3 py-2 rounded-lg border border-border-default bg-bg-secondary text-text-primary focus:outline-none focus:ring-2 focus:ring-action-primary-bg", Q = "block text-sm font-medium text-text-secondary mb-1";
+	]), Z = "w-full px-3 py-2 rounded-lg border border-border-default bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-action-primary-bg", Q = "block text-sm font-medium text-text-secondary mb-1";
 	return /* @__PURE__ */ f("div", {
 		className: "fixed inset-0 z-50 flex items-center justify-center bg-bg-overlay backdrop-blur-sm",
 		children: /* @__PURE__ */ p("div", {
@@ -171,7 +171,7 @@ var _ = ({ initialData: _, agents: v, onSubmit: y, onCancel: b, isLoading: x, ti
 				}), /* @__PURE__ */ f("button", {
 					type: "button",
 					onClick: b,
-					className: "p-1 rounded hover:bg-bg-tertiary text-text-tertiary",
+					className: "p-1 rounded hover:bg-bg-sunken text-text-tertiary",
 					children: /* @__PURE__ */ f(d, { size: 18 })
 				})]
 			}), /* @__PURE__ */ p("form", {
@@ -199,7 +199,7 @@ var _ = ({ initialData: _, agents: v, onSubmit: y, onCancel: b, isLoading: x, ti
 							children: [D("vibecontrols.vibedeck.buttonForm.action", "Action"), " *"]
 						}),
 						V ? /* @__PURE__ */ p("div", {
-							className: "flex items-center gap-2 px-3 py-2.5 rounded-lg border border-action-primary-bg/40 bg-bg-secondary",
+							className: "flex items-center gap-2 px-3 py-2.5 rounded-lg border border-[var(--color-accent-soft)] bg-bg-surface",
 							children: [/* @__PURE__ */ p("div", {
 								className: "flex-1 min-w-0",
 								children: [/* @__PURE__ */ f("div", {
@@ -208,7 +208,7 @@ var _ = ({ initialData: _, agents: v, onSubmit: y, onCancel: b, isLoading: x, ti
 								}), /* @__PURE__ */ p("div", {
 									className: "text-xs text-text-tertiary flex items-center gap-1",
 									children: [/* @__PURE__ */ f("span", {
-										className: "inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-semibold bg-action-primary-bg/10 text-action-primary-bg",
+										className: "inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-semibold bg-[var(--color-accent-soft)] text-action-primary-bg",
 										children: V.actionType
 									}), V.command && /* @__PURE__ */ f("span", {
 										className: "font-mono truncate",
@@ -218,7 +218,7 @@ var _ = ({ initialData: _, agents: v, onSubmit: y, onCancel: b, isLoading: x, ti
 							}), /* @__PURE__ */ f("button", {
 								type: "button",
 								onClick: K,
-								className: "p-1.5 rounded hover:bg-bg-tertiary text-text-tertiary hover:text-status-error-text",
+								className: "p-1.5 rounded hover:bg-bg-sunken text-text-tertiary hover:text-status-error-text",
 								title: "Change action",
 								children: /* @__PURE__ */ f(u, { size: 14 })
 							})]
@@ -240,7 +240,7 @@ var _ = ({ initialData: _, agents: v, onSubmit: y, onCancel: b, isLoading: x, ti
 									},
 									onFocus: () => F(!0),
 									onBlur: () => setTimeout(() => F(!1), 200),
-									className: "w-full px-3 py-2 rounded-lg border border-border-default bg-bg-secondary text-text-primary text-sm focus:outline-none focus:ring-2 focus:ring-action-primary-bg",
+									className: "w-full px-3 py-2 rounded-lg border border-border-default bg-bg-surface text-text-primary text-sm focus:outline-none focus:ring-2 focus:ring-action-primary-bg",
 									placeholder: D("vibecontrols.vibedeck.buttonForm.searchActions", "Search existing actions...")
 								}), P && /* @__PURE__ */ f("div", {
 									className: "absolute z-50 mt-1 w-full max-h-48 overflow-y-auto rounded-lg border border-border-default shadow-xl bg-bg-elevated",
@@ -251,7 +251,7 @@ var _ = ({ initialData: _, agents: v, onSubmit: y, onCancel: b, isLoading: x, ti
 										type: "button",
 										onMouseDown: (e) => e.preventDefault(),
 										onClick: () => G(e),
-										className: "w-full text-left px-3 py-2 hover:bg-bg-tertiary",
+										className: "w-full text-left px-3 py-2 hover:bg-bg-sunken",
 										children: [/* @__PURE__ */ f("div", {
 											className: "text-sm font-medium",
 											children: e.displayName || e.name
@@ -274,7 +274,7 @@ var _ = ({ initialData: _, agents: v, onSubmit: y, onCancel: b, isLoading: x, ti
 						})
 					] }),
 					I && /* @__PURE__ */ p("div", {
-						className: "p-4 rounded-lg bg-bg-secondary/50 border border-dashed border-border-default space-y-4",
+						className: "p-4 rounded-lg bg-bg-sunken border border-dashed border-border-default space-y-4",
 						children: [
 							/* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("label", {
 								htmlFor: "vibedeckbuttonform-23",
@@ -412,7 +412,7 @@ var _ = ({ initialData: _, agents: v, onSubmit: y, onCancel: b, isLoading: x, ti
 						children: [/* @__PURE__ */ f("button", {
 							type: "button",
 							onClick: b,
-							className: "px-4 py-2 rounded-lg text-sm text-text-secondary hover:bg-bg-tertiary",
+							className: "px-4 py-2 rounded-lg text-sm text-text-secondary hover:bg-bg-sunken",
 							children: D("vibecontrols.vibedeck.buttonForm.cancel", "Cancel")
 						}), /* @__PURE__ */ f("button", {
 							type: "submit",