feat(kanban): Interactive Kanban board with real-time task tracking (#83)
* feat(kanban): add Kanban board with task-manager skill, modal UI, and desk clutter Implement a full Kanban board system for tracking agent tasks: - Add task-manager skill with shared JSON task store for persistence - Render board as a floating modal over the live 3D office (not immersive) - Auto-create tasks from actionable user messages with heuristic filtering - Sync task status through OpenClaw agent lifecycle events - Collapse task details panel by default, expand on card click - Add dynamic desk clutter (papers, folders, etc.) reflecting active task count - Exclude done tasks from desk clutter count - Extract KANBAN_CLUTTER_OFFSET for easy positioning adjustment - Add install flow with progress bar for the task-manager skill - Include unit and e2e test coverage Made-with: Cursor * feat(kanban): production-harden task board with AI-free classification, resilient persistence, and modal UX - Harden shared task store with atomic writes, payload size limits, and server-side enum validation - Add client resilience: request timeouts (AbortController), exponential backoff retries, poll deduplication - Implement optimistic UI with rollback on all card mutations (update, move, archive) - Add modal accessibility: focus trap, Escape to close, aria-modal, keyboard card navigation - Trust OpenClaw agent lifecycle phase=start as task classification signal instead of regex heuristics - Keep regex heuristic only as lightweight filter for direct chat events (conversational noise) - Expand verb recognition with typo tolerance and broader action vocabulary - Create tasks from agent runs even when no chat event is received (external channel support) - Merge dual header bars into single bar; reposition close button outside modal corner - Exclude done tasks from desk clutter count; make clutter position configurable via KANBAN_CLUTTER_OFFSET - Update default furniture layout to match user configuration - Ensure kanban_board furniture persists in local storage across sessions - Add comprehensive test coverage for store, API route, and controller logic Made-with: Cursor --------- Co-authored-by: iamlukethedev <lucas.guilherme@smartwayslfl.com>
This commit is contained in:
Luke The Dev
@@ -5,6 +5,7 @@ import type { ReactNode } from "react";
|
||||
export type HQSidebarTab =
|
||||
| "inbox"
|
||||
| "history"
|
||||
| "kanban"
|
||||
| "playbooks"
|
||||
| "analytics";
|
||||
|
||||
@@ -19,6 +20,7 @@ type HQSidebarProps = {
|
||||
onOpenCompanyBuilder?: () => void;
|
||||
inboxPanel: ReactNode;
|
||||
historyPanel: ReactNode;
|
||||
kanbanPanel: ReactNode;
|
||||
playbooksPanel: ReactNode;
|
||||
analyticsPanel: ReactNode;
|
||||
};
|
||||
@@ -26,11 +28,12 @@ type HQSidebarProps = {
|
||||
const TAB_LABELS: Record<HQSidebarTab, string> = {
|
||||
inbox: "Inbox",
|
||||
history: "History",
|
||||
kanban: "Kanban",
|
||||
playbooks: "Playbooks",
|
||||
analytics: "Analytics",
|
||||
};
|
||||
|
||||
const PRIMARY_TABS: HQSidebarTab[] = ["inbox", "history", "playbooks"];
|
||||
const PRIMARY_TABS: HQSidebarTab[] = ["inbox", "history", "kanban", "playbooks"];
|
||||
|
||||
export function HQSidebar({
|
||||
open,
|
||||
@@ -43,6 +46,7 @@ export function HQSidebar({
|
||||
onOpenCompanyBuilder,
|
||||
inboxPanel,
|
||||
historyPanel,
|
||||
kanbanPanel,
|
||||
playbooksPanel,
|
||||
analyticsPanel,
|
||||
}: HQSidebarProps) {
|
||||
@@ -53,9 +57,12 @@ export function HQSidebar({
|
||||
? inboxPanel
|
||||
: activeTab === "history"
|
||||
? historyPanel
|
||||
: activeTab === "kanban"
|
||||
? kanbanPanel
|
||||
: activeTab === "playbooks"
|
||||
? playbooksPanel
|
||||
: analyticsPanel;
|
||||
const boardLikeWidth = activeTab === "kanban";
|
||||
|
||||
return (
|
||||
<aside className="pointer-events-none fixed inset-y-0 right-0 z-20 flex justify-end">
|
||||
@@ -108,7 +115,11 @@ export function HQSidebar({
|
||||
</div>
|
||||
|
||||
{open ? (
|
||||
<div className="pointer-events-auto flex h-full w-56 flex-col border-l border-cyan-500/20 bg-black/85 shadow-2xl backdrop-blur">
|
||||
<div
|
||||
className={`pointer-events-auto flex h-full flex-col border-l border-cyan-500/20 bg-black/85 shadow-2xl backdrop-blur ${
|
||||
boardLikeWidth ? "w-[min(94vw,1180px)]" : "w-56"
|
||||
}`}
|
||||
>
|
||||
<div className="border-b border-cyan-500/15 px-4 py-3">
|
||||
<div className="font-mono text-[10px] font-semibold tracking-[0.32em] text-cyan-300/80">
|
||||
{analyticsOnly ? "ANALYTICS" : "HEADQUARTERS"}
|
||||
@@ -151,7 +162,7 @@ export function HQSidebar({
|
||||
<div
|
||||
role="tablist"
|
||||
aria-label="Headquarters panels"
|
||||
className="grid grid-cols-3 border-b border-cyan-500/15"
|
||||
className="grid grid-cols-4 border-b border-cyan-500/15"
|
||||
>
|
||||
{PRIMARY_TABS.map((tab) => {
|
||||
const isActive = tab === activeTab;
|
||||
|
||||
@@ -0,0 +1,88 @@
|
||||
"use client";
|
||||
|
||||
type KanbanDisabledPanelProps = {
|
||||
onClose: () => void;
|
||||
onInstall: () => void;
|
||||
installing?: boolean;
|
||||
progressPercent?: number;
|
||||
progressMessage?: string | null;
|
||||
errorMessage?: string | null;
|
||||
};
|
||||
|
||||
export function KanbanDisabledPanel({
|
||||
onClose,
|
||||
onInstall,
|
||||
installing = false,
|
||||
progressPercent = 0,
|
||||
progressMessage = null,
|
||||
errorMessage = null,
|
||||
}: KanbanDisabledPanelProps) {
|
||||
return (
|
||||
<div className="absolute inset-0 z-50 flex items-center justify-center bg-black/60 p-6">
|
||||
<div className="w-full max-w-sm rounded-3xl border border-slate-700/40 bg-slate-950/95 p-8 text-center shadow-2xl">
|
||||
<div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-2xl border border-slate-700/40 bg-slate-800/60 px-2 text-center text-sm font-semibold uppercase tracking-[0.12em] text-slate-200">
|
||||
Kanban
|
||||
</div>
|
||||
|
||||
<div className="font-mono text-[10px] uppercase tracking-[0.24em] text-slate-500">
|
||||
Task Manager
|
||||
</div>
|
||||
<h2 className="mt-1 text-xl font-semibold text-white">Kanban Skill Not Installed</h2>
|
||||
<p className="mt-3 text-sm leading-relaxed text-slate-400">
|
||||
Install the <span className="text-cyan-400">TASK-MANAGER</span> skill to let your
|
||||
agents capture work as tasks and open the Kanban desk.
|
||||
</p>
|
||||
|
||||
{installing ? (
|
||||
<div className="mt-5 rounded-2xl border border-cyan-500/20 bg-cyan-500/5 p-4 text-left">
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<span className="font-mono text-[10px] uppercase tracking-[0.18em] text-cyan-300/80">
|
||||
Installing
|
||||
</span>
|
||||
<span className="font-mono text-[10px] text-cyan-100/70">
|
||||
{Math.max(0, Math.min(100, Math.round(progressPercent)))}%
|
||||
</span>
|
||||
</div>
|
||||
<div className="mt-3 h-2 overflow-hidden rounded-full bg-slate-800/90">
|
||||
<div
|
||||
className="h-full rounded-full bg-cyan-400 transition-[width] duration-500 ease-out"
|
||||
style={{ width: `${Math.max(6, Math.min(100, progressPercent))}%` }}
|
||||
/>
|
||||
</div>
|
||||
<p className="mt-3 text-sm leading-relaxed text-slate-300">
|
||||
{progressMessage?.trim() || "Installing the task-manager skill."}
|
||||
</p>
|
||||
<p className="mt-2 text-xs leading-relaxed text-slate-500">
|
||||
Once it's installed, Claw3D will refresh the task-manager state.
|
||||
</p>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{errorMessage ? (
|
||||
<div className="mt-4 rounded-2xl border border-rose-500/20 bg-rose-500/8 px-4 py-3 text-sm text-rose-200">
|
||||
{errorMessage}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<div className="mt-6 flex flex-col gap-3">
|
||||
<button
|
||||
type="button"
|
||||
className="rounded-xl bg-cyan-500 px-5 py-2.5 text-sm font-medium text-slate-950 transition hover:bg-cyan-400 active:scale-95 disabled:cursor-not-allowed disabled:bg-cyan-700/60 disabled:text-slate-200"
|
||||
onClick={onInstall}
|
||||
disabled={installing}
|
||||
>
|
||||
{installing ? "Installing TASK-MANAGER skill..." : "Install TASK-MANAGER skill"}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="rounded-xl border border-slate-700/40 px-5 py-2.5 text-sm text-slate-400 transition hover:bg-slate-800/50 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
onClick={onClose}
|
||||
disabled={installing}
|
||||
>
|
||||
Dismiss
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,60 @@
|
||||
"use client";
|
||||
|
||||
import type { ComponentProps } from "react";
|
||||
import type { AgentState } from "@/features/agents/state/store";
|
||||
import { TaskBoardView } from "@/features/office/tasks/TaskBoardView";
|
||||
import type { TaskBoardCard, TaskBoardStatus } from "@/features/office/tasks/types";
|
||||
import type { CronJobSummary } from "@/lib/cron/types";
|
||||
|
||||
export function TaskBoardPanel({
|
||||
agents,
|
||||
cardsByStatus,
|
||||
selectedCard,
|
||||
activeRuns,
|
||||
cronJobs,
|
||||
cronLoading,
|
||||
cronError,
|
||||
taskCaptureDebug,
|
||||
onCreateCard,
|
||||
onMoveCard,
|
||||
onSelectCard,
|
||||
onUpdateCard,
|
||||
onDeleteCard,
|
||||
onRefreshCronJobs,
|
||||
}: {
|
||||
agents: AgentState[];
|
||||
cardsByStatus: Record<TaskBoardStatus, TaskBoardCard[]>;
|
||||
selectedCard: TaskBoardCard | null;
|
||||
activeRuns: Array<{ runId: string; agentId: string; label: string }>;
|
||||
cronJobs: CronJobSummary[];
|
||||
cronLoading: boolean;
|
||||
cronError: string | null;
|
||||
taskCaptureDebug?: ComponentProps<typeof TaskBoardView>["taskCaptureDebug"];
|
||||
onCreateCard: () => void;
|
||||
onMoveCard: (cardId: string, status: TaskBoardStatus) => void;
|
||||
onSelectCard: (cardId: string | null) => void;
|
||||
onUpdateCard: (cardId: string, patch: Partial<TaskBoardCard>) => void;
|
||||
onDeleteCard: (cardId: string) => void;
|
||||
onRefreshCronJobs: () => void;
|
||||
}) {
|
||||
return (
|
||||
<TaskBoardView
|
||||
title="Kanban"
|
||||
subtitle="Manual tasks, inferred requests, and scheduled playbooks."
|
||||
agents={agents}
|
||||
cardsByStatus={cardsByStatus}
|
||||
selectedCard={selectedCard}
|
||||
activeRuns={activeRuns}
|
||||
cronJobs={cronJobs}
|
||||
cronLoading={cronLoading}
|
||||
cronError={cronError}
|
||||
taskCaptureDebug={taskCaptureDebug}
|
||||
onCreateCard={onCreateCard}
|
||||
onMoveCard={onMoveCard}
|
||||
onSelectCard={onSelectCard}
|
||||
onUpdateCard={onUpdateCard}
|
||||
onDeleteCard={onDeleteCard}
|
||||
onRefreshCronJobs={onRefreshCronJobs}
|
||||
/>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user