feat(extension): add VS Code extension with kanban board interface

- Complete VS Code extension with React-based kanban board UI
- MCP integration for real-time Task Master synchronization
- Professional CI/CD workflows for marketplace publishing
- Comprehensive configuration system with user preferences
- ShadCN UI components with VS Code theme integration
- Drag-and-drop task management with status transitions
- AI-powered task features via MCP protocol
- Robust error handling and connection management
- Multi-registry publishing (VS Code Marketplace + Open VSX)
- Security audit completed with hardcoded paths removed

BREAKING CHANGE: Extension requires publisher setup and marketplace keys

Publisher and extension naming decisions required:
- Update publisher field from placeholder 'DavidMaliglowka'
- Choose unique extension name (currently 'taskr-kanban')
- Select appropriate extension icon
- Configure CI secrets (VSCE_PAT, OVSX_PAT) for publishing

See apps/extension/docs/ for detailed setup instructions

apps/extension/src/components/ui/shadcn-io/kanban/index.tsx

@@ -0,0 +1,186 @@
+'use client';
+
+import React from 'react';
+import { Card } from '@/components/ui/card';
+import { cn } from '@/lib/utils';
+import {
+  DndContext,
+  DragOverlay,
+  MouseSensor,
+  TouchSensor,
+  rectIntersection,
+  useDraggable,
+  useDroppable,
+  useSensor,
+  useSensors,
+} from '@dnd-kit/core';
+import type { DragEndEvent } from '@dnd-kit/core';
+import type { ReactNode } from 'react';
+
+export type { DragEndEvent } from '@dnd-kit/core';
+
+export type Status = {
+  id: string;
+  name: string;
+  color: string;
+};
+
+export type Feature = {
+  id: string;
+  name: string;
+  startAt: Date;
+  endAt: Date;
+  status: Status;
+};
+
+export type KanbanBoardProps = {
+  id: Status['id'];
+  children: ReactNode;
+  className?: string;
+};
+
+export const KanbanBoard = ({ id, children, className }: KanbanBoardProps) => {
+  const { isOver, setNodeRef } = useDroppable({ id });
+
+  return (
+    <div
+      className={cn(
+        'flex h-full min-h-40 flex-col gap-2 rounded-md border bg-secondary p-2 text-xs shadow-sm outline transition-all',
+        isOver ? 'outline-primary' : 'outline-transparent',
+        className
+      )}
+      ref={setNodeRef}
+    >
+      {children}
+    </div>
+  );
+};
+
+export type KanbanCardProps = Pick<Feature, 'id' | 'name'> & {
+  index: number;
+  parent: string;
+  children?: ReactNode;
+  className?: string;
+  onClick?: (event: React.MouseEvent) => void;
+  onDoubleClick?: (event: React.MouseEvent) => void;
+};
+
+export const KanbanCard = ({
+  id,
+  name,
+  index,
+  parent,
+  children,
+  className,
+  onClick,
+  onDoubleClick,
+}: KanbanCardProps) => {
+  const { attributes, listeners, setNodeRef, transform, isDragging } =
+    useDraggable({
+      id,
+      data: { index, parent },
+    });
+
+
+
+  return (
+    <Card
+      className={cn(
+        'rounded-md p-3 shadow-sm',
+        isDragging && 'cursor-grabbing opacity-0',
+        !isDragging && 'cursor-pointer',
+        className
+      )}
+      style={{
+        transform: transform
+          ? `translateX(${transform.x}px) translateY(${transform.y}px)`
+          : 'none',
+      }}
+      {...attributes}
+      {...listeners}
+      onClick={(e) => !isDragging && onClick?.(e)}
+      onDoubleClick={onDoubleClick}
+      ref={setNodeRef}
+    >
+      {children ?? <p className="m-0 font-medium text-sm">{name}</p>}
+    </Card>
+  );
+};
+
+export type KanbanCardsProps = {
+  children: ReactNode;
+  className?: string;
+};
+
+export const KanbanCards = ({ children, className }: KanbanCardsProps) => (
+  <div className={cn('flex flex-1 flex-col gap-2', className)}>{children}</div>
+);
+
+export type KanbanHeaderProps =
+  | {
+      children: ReactNode;
+    }
+  | {
+      name: Status['name'];
+      color: Status['color'];
+      className?: string;
+    };
+
+export const KanbanHeader = (props: KanbanHeaderProps) =>
+  'children' in props ? (
+    props.children
+  ) : (
+    <div className={cn('flex shrink-0 items-center gap-2', props.className)}>
+      <div
+        className="h-2 w-2 rounded-full"
+        style={{ backgroundColor: props.color }}
+      />
+      <p className="m-0 font-semibold text-sm">{props.name}</p>
+    </div>
+  );
+
+export type KanbanProviderProps = {
+  children: ReactNode;
+  onDragEnd: (event: DragEndEvent) => void;
+  onDragStart?: (event: DragEndEvent) => void;
+  className?: string;
+  dragOverlay?: ReactNode;
+};
+
+export const KanbanProvider = ({
+  children,
+  onDragEnd,
+  onDragStart,
+  className,
+  dragOverlay,
+}: KanbanProviderProps) => {
+  // Configure sensors with activation constraints to prevent accidental drags
+  const sensors = useSensors(
+    // Only start a drag if you've moved more than 8px
+    useSensor(MouseSensor, {
+      activationConstraint: { distance: 8 },
+    }),
+    // On touch devices, require a short press + small move
+    useSensor(TouchSensor, {
+      activationConstraint: { delay: 150, tolerance: 5 },
+    })
+  );
+
+  return (
+    <DndContext 
+      sensors={sensors}
+      collisionDetection={rectIntersection} 
+      onDragEnd={onDragEnd}
+      onDragStart={onDragStart}
+    >
+      <div
+        className={cn('grid w-full auto-cols-fr grid-flow-col gap-4', className)}
+      >
+        {children}
+      </div>
+      <DragOverlay>
+        {dragOverlay}
+      </DragOverlay>
+    </DndContext>
+  );
+};