automagik-forge 0.1.11 → 0.1.13

package/frontend/src/lib/keyboard-shortcuts.ts

@@ -0,0 +1,266 @@
+import { useCallback, useEffect } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+
+// Define available keyboard shortcuts
+export interface KeyboardShortcut {
+  key: string;
+  description: string;
+  action: (context?: KeyboardShortcutContext) => void;
+  requiresModifier?: boolean;
+  disabled?: boolean;
+}
+
+export interface KeyboardShortcutContext {
+  navigate?: ReturnType<typeof useNavigate>;
+  closeDialog?: () => void;
+  onC?: () => void;
+  currentPath?: string;
+  hasOpenDialog?: boolean;
+  location?: ReturnType<typeof useLocation>;
+  stopExecution?: () => void;
+  newAttempt?: () => void;
+  onEnter?: () => void;
+  ignoreEscape?: boolean;
+}
+
+// Centralized shortcut definitions
+export const createKeyboardShortcuts = (
+  context: KeyboardShortcutContext
+): Record<string, KeyboardShortcut> => ({
+  Escape: {
+    key: 'Escape',
+    description: 'Go back or close dialog',
+    action: () => {
+      if (context.ignoreEscape) {
+        return;
+      }
+
+      // If there's an open dialog, close it
+      if (context.hasOpenDialog && context.closeDialog) {
+        context.closeDialog();
+        return;
+      }
+
+      // Otherwise, navigate back
+      if (context.navigate) {
+        const currentPath =
+          context.currentPath || context.location?.pathname || '/';
+
+        // Navigate back based on current path
+        if (
+          currentPath.includes('/tasks/') &&
+          !currentPath.endsWith('/tasks')
+        ) {
+          // From task details, go back to project tasks
+          const projectPath = currentPath.split('/tasks/')[0] + '/tasks';
+          context.navigate(projectPath);
+        } else if (
+          currentPath.includes('/projects/') &&
+          currentPath.includes('/tasks')
+        ) {
+          // From project tasks, go back to projects
+          context.navigate('/projects');
+        } else if (currentPath !== '/' && currentPath !== '/projects') {
+          // Default: go to projects page
+          context.navigate('/projects');
+        }
+      }
+    },
+  },
+  Enter: {
+    key: 'Enter',
+    description: 'Enter or submit',
+    action: () => {
+      if (context.onEnter) {
+        context.onEnter();
+      }
+    },
+  },
+  KeyC: {
+    key: 'c',
+    description: 'Create new task',
+    action: () => {
+      if (context.onC) {
+        context.onC();
+      }
+    },
+  },
+  KeyS: {
+    key: 's',
+    description: 'Stop all executions',
+    action: () => {
+      context.stopExecution && context.stopExecution();
+    },
+  },
+  KeyN: {
+    key: 'n',
+    description: 'Create new task attempt',
+    action: () => {
+      context.newAttempt && context.newAttempt();
+    },
+  },
+});
+
+// Hook to register global keyboard shortcuts
+export function useKeyboardShortcuts(context: KeyboardShortcutContext) {
+  const shortcuts = createKeyboardShortcuts(context);
+
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent) => {
+      // Don't trigger shortcuts when typing in input fields
+      const target = event.target as HTMLElement;
+      if (
+        target.tagName === 'INPUT' ||
+        target.tagName === 'TEXTAREA' ||
+        target.isContentEditable
+      ) {
+        return;
+      }
+
+      // Don't trigger shortcuts when modifier keys are pressed (except for specific shortcuts)
+      if (event.ctrlKey || event.metaKey || event.altKey) {
+        return;
+      }
+
+      const shortcut = shortcuts[event.code] || shortcuts[event.key];
+
+      if (shortcut && !shortcut.disabled) {
+        event.preventDefault();
+        shortcut.action(context);
+      }
+    },
+    [shortcuts, context]
+  );
+
+  useEffect(() => {
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [handleKeyDown]);
+
+  return shortcuts;
+}
+
+// Hook for dialog-specific keyboard shortcuts
+export function useDialogKeyboardShortcuts(onClose: () => void) {
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        event.preventDefault();
+        onClose();
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [onClose]);
+}
+
+// Kanban board keyboard navigation hook
+export function useKanbanKeyboardNavigation({
+  focusedTaskId,
+  setFocusedTaskId,
+  focusedStatus,
+  setFocusedStatus,
+  groupedTasks,
+  filteredTasks,
+  allTaskStatuses,
+  onViewTaskDetails,
+  preserveIndexOnColumnSwitch = false,
+}: {
+  focusedTaskId: string | null;
+  setFocusedTaskId: (id: string | null) => void;
+  focusedStatus: string | null;
+  setFocusedStatus: (status: string | null) => void;
+  groupedTasks: Record<string, any[]>;
+  filteredTasks: any[];
+  allTaskStatuses: string[];
+  onViewTaskDetails?: (task: any) => void;
+  preserveIndexOnColumnSwitch?: boolean;
+}) {
+  useEffect(() => {
+    function handleKeyDown(e: KeyboardEvent) {
+      // Don't handle if typing in input, textarea, or select
+      const tag = (e.target as HTMLElement)?.tagName;
+      if (
+        tag === 'INPUT' ||
+        tag === 'TEXTAREA' ||
+        tag === 'SELECT' ||
+        (e.target as HTMLElement)?.isContentEditable
+      )
+        return;
+      if (!focusedTaskId || !focusedStatus) return;
+      const currentColumn = groupedTasks[focusedStatus];
+      const currentIndex = currentColumn.findIndex(
+        (t: any) => t.id === focusedTaskId
+      );
+      let newStatus = focusedStatus;
+      let newTaskId = focusedTaskId;
+      if (e.key === 'ArrowDown') {
+        if (currentIndex < currentColumn.length - 1) {
+          newTaskId = currentColumn[currentIndex + 1].id;
+        }
+      } else if (e.key === 'ArrowUp') {
+        if (currentIndex > 0) {
+          newTaskId = currentColumn[currentIndex - 1].id;
+        }
+      } else if (e.key === 'ArrowRight') {
+        let colIdx = allTaskStatuses.indexOf(focusedStatus);
+        while (colIdx < allTaskStatuses.length - 1) {
+          colIdx++;
+          const nextStatus = allTaskStatuses[colIdx];
+          if (groupedTasks[nextStatus] && groupedTasks[nextStatus].length > 0) {
+            newStatus = nextStatus;
+            if (preserveIndexOnColumnSwitch) {
+              const nextCol = groupedTasks[nextStatus];
+              const idx = Math.min(currentIndex, nextCol.length - 1);
+              newTaskId = nextCol[idx].id;
+            } else {
+              newTaskId = groupedTasks[nextStatus][0].id;
+            }
+            break;
+          }
+        }
+      } else if (e.key === 'ArrowLeft') {
+        let colIdx = allTaskStatuses.indexOf(focusedStatus);
+        while (colIdx > 0) {
+          colIdx--;
+          const prevStatus = allTaskStatuses[colIdx];
+          if (groupedTasks[prevStatus] && groupedTasks[prevStatus].length > 0) {
+            newStatus = prevStatus;
+            if (preserveIndexOnColumnSwitch) {
+              const prevCol = groupedTasks[prevStatus];
+              const idx = Math.min(currentIndex, prevCol.length - 1);
+              newTaskId = prevCol[idx].id;
+            } else {
+              newTaskId = groupedTasks[prevStatus][0].id;
+            }
+            break;
+          }
+        }
+      } else if ((e.key === 'Enter' || e.key === ' ') && onViewTaskDetails) {
+        const task = filteredTasks.find((t: any) => t.id === focusedTaskId);
+        if (task) {
+          onViewTaskDetails(task);
+        }
+      } else {
+        return;
+      }
+      e.preventDefault();
+      setFocusedTaskId(newTaskId);
+      setFocusedStatus(newStatus);
+    }
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [
+    focusedTaskId,
+    focusedStatus,
+    groupedTasks,
+    filteredTasks,
+    onViewTaskDetails,
+    allTaskStatuses,
+    setFocusedTaskId,
+    setFocusedStatus,
+    preserveIndexOnColumnSwitch,
+  ]);
+}

package/frontend/src/lib/responsive-config.ts

@@ -0,0 +1,70 @@
+/**
+ * Centralized responsive configuration for TaskDetailsPanel
+ * Adjust these values to change when the panel switches between overlay and side-by-side modes
+ */
+
+// The breakpoint at which we switch from overlay to side-by-side mode
+// Change this value to adjust when the panel switches to side-by-side mode:
+// 'sm' = 640px, 'md' = 768px, 'lg' = 1024px, 'xl' = 1280px, '2xl' = 1536px
+export const PANEL_SIDE_BY_SIDE_BREAKPOINT = 'xl' as const;
+
+// Panel widths for different screen sizes (in overlay mode)
+export const PANEL_WIDTHS = {
+  base: 'w-full', // < 640px
+  sm: 'sm:w-[560px]', // 640px+
+  md: 'md:w-[600px]', // 768px+
+  lg: 'lg:w-[650px]', // 1024px+ (smaller to start transitioning)
+  xl: 'xl:w-[750px]', // 1280px+
+  '2xl': '2xl:w-[800px]', // 1536px+ (side-by-side mode)
+} as const;
+
+// Generate classes for TaskDetailsPanel
+export const getTaskPanelClasses = () => {
+  const overlayClasses = [
+    'fixed inset-y-0 right-0 z-50',
+    PANEL_WIDTHS.base,
+    PANEL_WIDTHS.sm,
+    PANEL_WIDTHS.md,
+    PANEL_WIDTHS.lg,
+    PANEL_WIDTHS.xl,
+  ].join(' ');
+
+  const sideBySideClasses = [
+    `${PANEL_SIDE_BY_SIDE_BREAKPOINT}:relative`,
+    `${PANEL_SIDE_BY_SIDE_BREAKPOINT}:inset-auto`,
+    `${PANEL_SIDE_BY_SIDE_BREAKPOINT}:z-auto`,
+    `${PANEL_SIDE_BY_SIDE_BREAKPOINT}:h-full`,
+    `${PANEL_SIDE_BY_SIDE_BREAKPOINT}:w-[800px]`,
+  ].join(' ');
+
+  return `${overlayClasses} ${sideBySideClasses} bg-background border-l shadow-lg overflow-hidden`;
+};
+
+// Generate classes for backdrop (only show in overlay mode)
+export const getBackdropClasses = () => {
+  return `fixed inset-0 z-40 bg-background/80 backdrop-blur-sm ${PANEL_SIDE_BY_SIDE_BREAKPOINT}:hidden`;
+};
+
+// Generate classes for main container (enable flex layout in side-by-side mode)
+export const getMainContainerClasses = (isPanelOpen: boolean) => {
+  if (!isPanelOpen) return 'w-full';
+
+  return `w-full ${PANEL_SIDE_BY_SIDE_BREAKPOINT}:flex ${PANEL_SIDE_BY_SIDE_BREAKPOINT}:h-full`;
+};
+
+// Generate classes for kanban section
+export const getKanbanSectionClasses = (isPanelOpen: boolean) => {
+  if (!isPanelOpen) return 'w-full';
+
+  const overlayClasses = 'w-full opacity-50 pointer-events-none';
+  const sideBySideClasses = [
+    `${PANEL_SIDE_BY_SIDE_BREAKPOINT}:flex-1`,
+    `${PANEL_SIDE_BY_SIDE_BREAKPOINT}:min-w-0`,
+    `${PANEL_SIDE_BY_SIDE_BREAKPOINT}:h-full`,
+    `${PANEL_SIDE_BY_SIDE_BREAKPOINT}:overflow-y-auto`,
+    `${PANEL_SIDE_BY_SIDE_BREAKPOINT}:opacity-100`,
+    `${PANEL_SIDE_BY_SIDE_BREAKPOINT}:pointer-events-auto`,
+  ].join(' ');
+
+  return `${overlayClasses} ${sideBySideClasses}`;
+};

package/frontend/src/lib/types.ts

@@ -0,0 +1,39 @@
+import {
+  DiffChunkType,
+  ExecutionProcess,
+  ExecutionProcessSummary,
+  ProcessLogsResponse,
+} from 'shared/types.ts';
+
+export type AttemptData = {
+  processes: ExecutionProcessSummary[];
+  runningProcessDetails: Record<string, ExecutionProcess>;
+  allLogs: ProcessLogsResponse[];
+};
+
+export interface ProcessedLine {
+  content: string;
+  chunkType: DiffChunkType;
+  oldLineNumber?: number;
+  newLineNumber?: number;
+}
+
+export interface ProcessedSection {
+  type: 'context' | 'change' | 'expanded';
+  lines: ProcessedLine[];
+  expandKey?: string;
+  expandedAbove?: boolean;
+  expandedBelow?: boolean;
+}
+
+export interface ConversationEntryDisplayType {
+  entry: any;
+  processId: string;
+  processPrompt?: string;
+  processStatus: string;
+  processIsRunning: boolean;
+  process: any;
+  isFirstInProcess: boolean;
+  processIndex: number;
+  entryIndex: number;
+}

package/frontend/src/lib/utils.ts

@@ -0,0 +1,10 @@
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+export function is_planning_executor_type(executorType: string): boolean {
+  return executorType === 'claude-plan';
+}

package/frontend/src/main.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App.tsx';
+import './index.css';
+import { ClickToComponent } from 'click-to-react-component';
+import * as Sentry from '@sentry/react';
+import {
+  useLocation,
+  useNavigationType,
+  createRoutesFromChildren,
+  matchRoutes,
+} from 'react-router-dom';
+
+// Only initialize Sentry if telemetry is not disabled
+if (!import.meta.env.VITE_DISABLE_TELEMETRY) {
+  Sentry.init({
+    dsn: import.meta.env.VITE_SENTRY_DSN || "https://fa5e961d24021da4e6df30e5beee03af@o4509714066571264.ingest.us.sentry.io/4509714113495040",
+    tracesSampleRate: 1.0,
+    environment: import.meta.env.MODE === 'development' ? 'dev' : 'production',
+    integrations: [
+      Sentry.reactRouterV6BrowserTracingIntegration({
+        useEffect: React.useEffect,
+        useLocation,
+        useNavigationType,
+        createRoutesFromChildren,
+        matchRoutes,
+      }),
+    ],
+  });
+  Sentry.setTag('source', 'frontend');
+}
+
+const AppContent = () => (
+  <>
+    <ClickToComponent />
+    <App />
+  </>
+);
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    {!import.meta.env.VITE_DISABLE_TELEMETRY ? (
+      <Sentry.ErrorBoundary fallback={<p>An error has occurred</p>} showDialog>
+        <AppContent />
+      </Sentry.ErrorBoundary>
+    ) : (
+      <AppContent />
+    )}
+  </React.StrictMode>
+);