bps-kit 1.0.1 → 1.0.2

package/templates/vault/loki-mode/examples/todo-app-generated/frontend/src/App.tsx

@@ -0,0 +1,81 @@
+import { useState } from 'react';
+import { useTodos } from './hooks/useTodos';
+import { TodoForm } from './components/TodoForm';
+import { TodoList } from './components/TodoList';
+import { EmptyState } from './components/EmptyState';
+import { ConfirmDialog } from './components/ConfirmDialog';
+import './App.css';
+
+function App() {
+  const { todos, loading, error, addTodo, toggleTodo, removeTodo } = useTodos();
+  const [confirmDialog, setConfirmDialog] = useState<{
+    isOpen: boolean;
+    todoId: number | null;
+  }>({
+    isOpen: false,
+    todoId: null,
+  });
+
+  const handleDeleteClick = (todoId: number) => {
+    setConfirmDialog({
+      isOpen: true,
+      todoId,
+    });
+  };
+
+  const handleConfirmDelete = async () => {
+    if (confirmDialog.todoId !== null) {
+      await removeTodo(confirmDialog.todoId);
+      setConfirmDialog({
+        isOpen: false,
+        todoId: null,
+      });
+    }
+  };
+
+  const handleCancelDelete = () => {
+    setConfirmDialog({
+      isOpen: false,
+      todoId: null,
+    });
+  };
+
+  return (
+    <div className="app">
+      <header className="app-header">
+        <h1>Todo App</h1>
+      </header>
+
+      <main className="app-main">
+        <TodoForm onAddTodo={addTodo} />
+
+        {error && (
+          <div className="error-message">
+            {error}
+          </div>
+        )}
+
+        {loading ? (
+          <div className="loading">Loading todos...</div>
+        ) : todos.length === 0 ? (
+          <EmptyState />
+        ) : (
+          <TodoList
+            todos={todos}
+            onToggle={toggleTodo}
+            onDelete={handleDeleteClick}
+          />
+        )}
+      </main>
+
+      <ConfirmDialog
+        isOpen={confirmDialog.isOpen}
+        message="Are you sure you want to delete this todo?"
+        onConfirm={handleConfirmDelete}
+        onCancel={handleCancelDelete}
+      />
+    </div>
+  );
+}
+
+export default App;

package/templates/vault/loki-mode/examples/todo-app-generated/frontend/src/api/todos.ts

@@ -0,0 +1,57 @@
+const API_BASE = '/api';
+
+export interface Todo {
+  id: number;
+  title: string;
+  completed: boolean;
+  createdAt: string;
+}
+
+export interface CreateTodoRequest {
+  title: string;
+}
+
+export const fetchTodos = async (): Promise<Todo[]> => {
+  const response = await fetch(`${API_BASE}/todos`);
+  if (!response.ok) {
+    throw new Error('Failed to fetch todos');
+  }
+  return response.json();
+};
+
+export const createTodo = async (title: string): Promise<Todo> => {
+  const response = await fetch(`${API_BASE}/todos`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({ title }),
+  });
+  if (!response.ok) {
+    throw new Error('Failed to create todo');
+  }
+  return response.json();
+};
+
+export const updateTodo = async (id: number, completed: boolean): Promise<Todo> => {
+  const response = await fetch(`${API_BASE}/todos/${id}`, {
+    method: 'PATCH',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({ completed }),
+  });
+  if (!response.ok) {
+    throw new Error('Failed to update todo');
+  }
+  return response.json();
+};
+
+export const deleteTodo = async (id: number): Promise<void> => {
+  const response = await fetch(`${API_BASE}/todos/${id}`, {
+    method: 'DELETE',
+  });
+  if (!response.ok) {
+    throw new Error('Failed to delete todo');
+  }
+};

package/templates/vault/loki-mode/examples/todo-app-generated/frontend/src/components/ConfirmDialog.tsx

@@ -0,0 +1,26 @@
+interface ConfirmDialogProps {
+  isOpen: boolean;
+  message: string;
+  onConfirm: () => void;
+  onCancel: () => void;
+}
+
+export const ConfirmDialog = ({ isOpen, message, onConfirm, onCancel }: ConfirmDialogProps) => {
+  if (!isOpen) return null;
+
+  return (
+    <div className="dialog-overlay">
+      <div className="dialog-content">
+        <p className="dialog-message">{message}</p>
+        <div className="dialog-buttons">
+          <button onClick={onCancel} className="cancel-button">
+            Cancel
+          </button>
+          <button onClick={onConfirm} className="confirm-button">
+            Confirm
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};

package/templates/vault/loki-mode/examples/todo-app-generated/frontend/src/components/EmptyState.tsx

@@ -0,0 +1,8 @@
+export const EmptyState = () => {
+  return (
+    <div className="empty-state">
+      <p className="empty-message">No todos yet!</p>
+      <p className="empty-hint">Add your first todo above to get started.</p>
+    </div>
+  );
+};

package/templates/vault/loki-mode/examples/todo-app-generated/frontend/src/components/TodoForm.tsx

@@ -0,0 +1,43 @@
+import { useState, FormEvent } from 'react';
+
+interface TodoFormProps {
+  onAddTodo: (title: string) => Promise<void>;
+}
+
+export const TodoForm = ({ onAddTodo }: TodoFormProps) => {
+  const [title, setTitle] = useState('');
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+
+    const trimmedTitle = title.trim();
+    if (!trimmedTitle) return;
+
+    try {
+      setIsSubmitting(true);
+      await onAddTodo(trimmedTitle);
+      setTitle('');
+    } catch (err) {
+      console.error('Failed to add todo:', err);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="todo-form">
+      <input
+        type="text"
+        value={title}
+        onChange={(e) => setTitle(e.target.value)}
+        placeholder="Add a new todo..."
+        disabled={isSubmitting}
+        className="todo-input"
+      />
+      <button type="submit" disabled={isSubmitting || !title.trim()} className="add-button">
+        {isSubmitting ? 'Adding...' : 'Add Todo'}
+      </button>
+    </form>
+  );
+};

package/templates/vault/loki-mode/examples/todo-app-generated/frontend/src/components/TodoItem.tsx

@@ -0,0 +1,36 @@
+import { Todo } from '../api/todos';
+
+interface TodoItemProps {
+  todo: Todo;
+  onToggle: (id: number) => Promise<void>;
+  onDelete: (id: number) => Promise<void>;
+}
+
+export const TodoItem = ({ todo, onToggle, onDelete }: TodoItemProps) => {
+  const handleToggle = () => {
+    onToggle(todo.id);
+  };
+
+  const handleDelete = () => {
+    onDelete(todo.id);
+  };
+
+  return (
+    <div className="todo-item">
+      <div className="todo-content">
+        <input
+          type="checkbox"
+          checked={todo.completed}
+          onChange={handleToggle}
+          className="todo-checkbox"
+        />
+        <span className={todo.completed ? 'todo-title completed' : 'todo-title'}>
+          {todo.title}
+        </span>
+      </div>
+      <button onClick={handleDelete} className="delete-button">
+        Delete
+      </button>
+    </div>
+  );
+};

package/templates/vault/loki-mode/examples/todo-app-generated/frontend/src/components/TodoList.tsx

@@ -0,0 +1,27 @@
+import { Todo } from '../api/todos';
+import { TodoItem } from './TodoItem';
+
+interface TodoListProps {
+  todos: Todo[];
+  onToggle: (id: number) => Promise<void>;
+  onDelete: (id: number) => Promise<void>;
+}
+
+export const TodoList = ({ todos, onToggle, onDelete }: TodoListProps) => {
+  if (todos.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="todo-list">
+      {todos.map(todo => (
+        <TodoItem
+          key={todo.id}
+          todo={todo}
+          onToggle={onToggle}
+          onDelete={onDelete}
+        />
+      ))}
+    </div>
+  );
+};

package/templates/vault/loki-mode/examples/todo-app-generated/frontend/src/hooks/useTodos.ts

@@ -0,0 +1,81 @@
+import { useState, useEffect } from 'react';
+import { Todo, fetchTodos, createTodo, updateTodo, deleteTodo } from '../api/todos';
+
+interface UseTodosReturn {
+  todos: Todo[];
+  loading: boolean;
+  error: string | null;
+  addTodo: (title: string) => Promise<void>;
+  toggleTodo: (id: number) => Promise<void>;
+  removeTodo: (id: number) => Promise<void>;
+}
+
+export const useTodos = (): UseTodosReturn => {
+  const [todos, setTodos] = useState<Todo[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  // Fetch todos on mount
+  useEffect(() => {
+    const loadTodos = async () => {
+      try {
+        setLoading(true);
+        setError(null);
+        const data = await fetchTodos();
+        setTodos(data);
+      } catch (err) {
+        setError('Failed to load todos');
+        console.error(err);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    loadTodos();
+  }, []);
+
+  const addTodo = async (title: string) => {
+    try {
+      const newTodo = await createTodo(title);
+      setTodos([newTodo, ...todos]);
+    } catch (err) {
+      setError('Failed to create todo');
+      console.error(err);
+      throw err;
+    }
+  };
+
+  const toggleTodo = async (id: number) => {
+    const todo = todos.find(t => t.id === id);
+    if (!todo) return;
+
+    try {
+      const updatedTodo = await updateTodo(id, !todo.completed);
+      setTodos(todos.map(t => t.id === id ? updatedTodo : t));
+    } catch (err) {
+      setError('Failed to update todo');
+      console.error(err);
+      throw err;
+    }
+  };
+
+  const removeTodo = async (id: number) => {
+    try {
+      await deleteTodo(id);
+      setTodos(todos.filter(t => t.id !== id));
+    } catch (err) {
+      setError('Failed to delete todo');
+      console.error(err);
+      throw err;
+    }
+  };
+
+  return {
+    todos,
+    loading,
+    error,
+    addTodo,
+    toggleTodo,
+    removeTodo,
+  };
+};

package/templates/vault/loki-mode/examples/todo-app-generated/frontend/src/index.css

@@ -0,0 +1,48 @@
+:root {
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+
+a:hover {
+  color: #535bf2;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+
+button:hover {
+  border-color: #646cff;
+}
+
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}

package/templates/vault/loki-mode/examples/todo-app-generated/frontend/src/main.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.tsx'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)

package/templates/vault/loki-mode/examples/todo-app-generated/frontend/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/templates/vault/loki-mode/scripts/export-to-vibe-kanban.sh

@@ -0,0 +1,178 @@
+#!/bin/bash
+# Export Loki Mode tasks to Vibe Kanban format
+# Usage: ./scripts/export-to-vibe-kanban.sh [export_dir]
+
+set -uo pipefail
+
+LOKI_DIR=".loki"
+EXPORT_DIR="${1:-${VIBE_KANBAN_DIR:-$HOME/.vibe-kanban/loki-tasks}}"
+
+# Colors
+GREEN='\033[0;32m'
+YELLOW='\033[1;33m'
+NC='\033[0m'
+
+log_info() { echo -e "${GREEN}[INFO]${NC} $*"; }
+log_warn() { echo -e "${YELLOW}[WARN]${NC} $*"; }
+
+# Check if .loki directory exists
+if [ ! -d "$LOKI_DIR" ]; then
+    log_warn "No .loki directory found. Run Loki Mode first."
+    exit 1
+fi
+
+mkdir -p "$EXPORT_DIR"
+
+# Get current phase from orchestrator
+CURRENT_PHASE="UNKNOWN"
+if [ -f "$LOKI_DIR/state/orchestrator.json" ]; then
+    CURRENT_PHASE=$(python3 -c "import json; print(json.load(open('$LOKI_DIR/state/orchestrator.json')).get('currentPhase', 'UNKNOWN'))" 2>/dev/null || echo "UNKNOWN")
+fi
+
+# Map Loki phases to Vibe Kanban columns
+phase_to_column() {
+    case "$1" in
+        BOOTSTRAP|DISCOVERY|ARCHITECTURE) echo "planning" ;;
+        INFRASTRUCTURE|DEVELOPMENT) echo "in-progress" ;;
+        QA) echo "review" ;;
+        DEPLOYMENT) echo "deploying" ;;
+        BUSINESS_OPS|GROWTH|COMPLETED) echo "done" ;;
+        *) echo "backlog" ;;
+    esac
+}
+
+# Export tasks from all queues
+export_queue() {
+    local queue_file="$1"
+    local status="$2"
+
+    if [ ! -f "$queue_file" ]; then
+        return
+    fi
+
+    python3 << EOF
+import json
+import os
+from datetime import datetime
+
+try:
+    with open("$queue_file") as f:
+        content = f.read().strip()
+        if not content or content == "[]":
+            tasks = []
+        else:
+            tasks = json.loads(content)
+except (json.JSONDecodeError, FileNotFoundError):
+    tasks = []
+
+export_dir = os.path.expanduser("$EXPORT_DIR")
+exported = 0
+
+for task in tasks:
+    task_id = task.get('id', 'unknown')
+
+    # Determine status based on queue and claimed state
+    if "$status" == "pending":
+        vibe_status = "todo"
+    elif "$status" == "in-progress":
+        vibe_status = "doing"
+    elif "$status" == "completed":
+        vibe_status = "done"
+    elif "$status" == "failed":
+        vibe_status = "blocked"
+    else:
+        vibe_status = "todo"
+
+    # Build description from payload
+    payload = task.get('payload', {})
+    if isinstance(payload, dict):
+        desc_parts = []
+        if 'action' in payload:
+            desc_parts.append(f"Action: {payload['action']}")
+        if 'description' in payload:
+            desc_parts.append(payload['description'])
+        if 'command' in payload:
+            desc_parts.append(f"Command: {payload['command']}")
+        description = "\n".join(desc_parts) if desc_parts else json.dumps(payload, indent=2)
+    else:
+        description = str(payload)
+
+    # Get agent type for tagging
+    agent_type = task.get('type', 'unknown')
+    swarm = agent_type.split('-')[0] if '-' in agent_type else 'general'
+
+    # Priority mapping (Loki uses 1-10, higher is more important)
+    priority = task.get('priority', 5)
+    if priority >= 8:
+        priority_tag = "priority-high"
+    elif priority >= 5:
+        priority_tag = "priority-medium"
+    else:
+        priority_tag = "priority-low"
+
+    vibe_task = {
+        "id": f"loki-{task_id}",
+        "title": f"[{agent_type}] {payload.get('action', 'Task')}",
+        "description": description,
+        "status": vibe_status,
+        "agent": "claude-code",
+        "tags": [
+            agent_type,
+            f"swarm-{swarm}",
+            priority_tag,
+            f"phase-$CURRENT_PHASE".lower()
+        ],
+        "metadata": {
+            "lokiTaskId": task_id,
+            "lokiType": agent_type,
+            "lokiPriority": priority,
+            "lokiPhase": "$CURRENT_PHASE",
+            "lokiRetries": task.get('retries', 0),
+            "createdAt": task.get('createdAt', datetime.utcnow().isoformat() + 'Z'),
+            "claimedBy": task.get('claimedBy'),
+            "lastError": task.get('lastError')
+        }
+    }
+
+    # Write task file
+    task_file = os.path.join(export_dir, f"{task_id}.json")
+    with open(task_file, 'w') as out:
+        json.dump(vibe_task, out, indent=2)
+    exported += 1
+
+print(f"EXPORTED:{exported}")
+EOF
+}
+
+log_info "Exporting Loki Mode tasks to Vibe Kanban..."
+log_info "Export directory: $EXPORT_DIR"
+log_info "Current phase: $CURRENT_PHASE"
+
+TOTAL=0
+
+# Export from each queue
+for queue in pending in-progress completed failed dead-letter; do
+    queue_file="$LOKI_DIR/queue/${queue}.json"
+    if [ -f "$queue_file" ]; then
+        result=$(export_queue "$queue_file" "$queue")
+        count=$(echo "$result" | grep "EXPORTED:" | cut -d: -f2)
+        if [ -n "$count" ] && [ "$count" -gt 0 ]; then
+            log_info "  $queue: $count tasks"
+            TOTAL=$((TOTAL + count))
+        fi
+    fi
+done
+
+# Create summary file
+cat > "$EXPORT_DIR/_loki_summary.json" << EOF
+{
+    "exportedAt": "$(date -u +%Y-%m-%dT%H:%M:%SZ)",
+    "currentPhase": "$CURRENT_PHASE",
+    "totalTasks": $TOTAL,
+    "lokiVersion": "$(cat VERSION 2>/dev/null || echo 'unknown')",
+    "column": "$(phase_to_column "$CURRENT_PHASE")"
+}
+EOF
+
+log_info "Exported $TOTAL tasks total"
+log_info "Summary written to $EXPORT_DIR/_loki_summary.json"