@positronic/cli 0.0.2

package/src/components/project-list.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+import type { ProjectConfigManager } from '../commands/project-config-manager.js';
+
+interface ProjectListProps {
+  projectConfig: ProjectConfigManager;
+}
+
+export const ProjectList = ({ projectConfig }: ProjectListProps) => {
+  const { projects, current } = projectConfig.listProjects();
+
+  if (projects.length === 0) {
+    return (
+      <Box flexDirection="column">
+        <Text>No projects configured.</Text>
+        <Box marginTop={1}>
+          <Text dimColor>
+            Add a project with "px project add &lt;name&gt; --url &lt;url&gt;"
+          </Text>
+        </Box>
+      </Box>
+    );
+  }
+
+  // Calculate column widths for table display
+  const maxNameLength = Math.max(...projects.map(p => p.name.length), 4); // min 4 for "Name"
+  const nameColWidth = Math.min(maxNameLength + 2, 30); // cap at 30
+
+  return (
+    <Box flexDirection="column" paddingTop={1} paddingBottom={1}>
+      <Text bold>
+        Found {projects.length} project{projects.length === 1 ? '' : 's'}:
+      </Text>
+
+      <Box marginTop={1} flexDirection="column">
+        {/* Header row */}
+        <Box>
+          <Text bold color="cyan">{padRight('Name', nameColWidth)}</Text>
+          <Text>  </Text>
+          <Text bold color="cyan">URL</Text>
+        </Box>
+
+        {/* Separator */}
+        <Box>
+          <Text dimColor>{'─'.repeat(nameColWidth + 2 + 40)}</Text>
+        </Box>
+
+        {/* Project rows */}
+        {projects.map((project) => {
+          const isCurrent = project.name === current;
+
+          return (
+            <Box key={project.name}>
+              <Text color={isCurrent ? 'green' : undefined}>
+                {padRight(truncate(project.name, nameColWidth - 2), nameColWidth)}
+              </Text>
+              <Text>  </Text>
+              <Text dimColor={!isCurrent}>{project.url}</Text>
+              {isCurrent && <Text color="green"> ← current</Text>}
+            </Box>
+          );
+        })}
+      </Box>
+
+      {!current && projects.length > 0 && (
+        <Box marginTop={1}>
+          <Text dimColor>
+            No project selected. Use "px project select &lt;name&gt;" to select one.
+          </Text>
+        </Box>
+      )}
+    </Box>
+  );
+};
+
+function padRight(text: string, width: number): string {
+  return text + ' '.repeat(Math.max(0, width - text.length));
+}
+
+function truncate(text: string, maxWidth: number): string {
+  if (text.length <= maxWidth) return text;
+  return text.substring(0, maxWidth - 3) + '...';
+}

package/src/components/project-remove.tsx

@@ -0,0 +1,55 @@
+import React, { useEffect, useState } from 'react';
+import { Box, Text } from 'ink';
+import type { ProjectConfigManager } from '../commands/project-config-manager.js';
+
+interface ProjectRemoveProps {
+  name: string;
+  projectConfig: ProjectConfigManager;
+}
+
+export const ProjectRemove = ({ name, projectConfig }: ProjectRemoveProps) => {
+  const [result, setResult] = useState<{ success: boolean; error?: string } | null>(null);
+
+  useEffect(() => {
+    const removeResult = projectConfig.removeProject(name);
+    setResult(removeResult);
+  }, [name, projectConfig]);
+
+  if (!result) {
+    return <Text>Removing project...</Text>;
+  }
+
+  if (result.success) {
+    const config = projectConfig.read();
+    const currentProject = config.currentProject;
+
+    return (
+      <Box flexDirection="column">
+        <Text color="green">✅ Project "{name}" removed successfully!</Text>
+        {currentProject && (
+          <Box marginTop={1} paddingLeft={2}>
+            <Text>
+              <Text bold>Current project:</Text> <Text color="cyan">{currentProject}</Text>
+            </Text>
+          </Box>
+        )}
+        <Box marginTop={1}>
+          <Text dimColor>
+            {currentProject
+              ? `Your active project is now "${currentProject}".`
+              : 'No active project selected. Use "px project select <name>" to choose one.'}
+          </Text>
+        </Box>
+      </Box>
+    );
+  }
+
+  return (
+    <Box flexDirection="column">
+      <Text color="red">❌ Failed to remove project</Text>
+      <Box paddingLeft={2}>
+        <Text color="red">{result.error}</Text>
+      </Box>
+    </Box>
+  );
+};

package/src/components/project-select.tsx

@@ -0,0 +1,200 @@
+import React, { useState, useEffect } from 'react';
+import { Box, Text, useInput, useApp, useStdin } from 'ink';
+import type { Project, ProjectConfigManager } from '../commands/project-config-manager.js';
+
+interface ProjectSelectProps {
+  name?: string;
+  projectConfig: ProjectConfigManager;
+}
+
+// Separate component for interactive selection that uses useInput
+const InteractiveProjectSelect = ({
+  projects,
+  currentProject,
+  projectConfig
+}: {
+  projects: Project[];
+  currentProject: string | null;
+  projectConfig: ProjectConfigManager;
+}) => {
+  const [selectedIndex, setSelectedIndex] = useState(() => {
+    const currentIndex = projects.findIndex(p => p.name === currentProject);
+    return currentIndex >= 0 ? currentIndex : 0;
+  });
+  const [result, setResult] = useState<{ success: boolean; error?: string } | null>(null);
+  const { exit } = useApp();
+
+  useInput((input, key) => {
+    if (key.upArrow) {
+      setSelectedIndex((prev) => (prev - 1 + projects.length) % projects.length);
+    } else if (key.downArrow) {
+      setSelectedIndex((prev) => (prev + 1) % projects.length);
+    } else if (key.return) {
+      const selectedProject = projects[selectedIndex];
+      const selectResult = projectConfig.selectProject(selectedProject.name);
+      setResult(selectResult);
+    } else if (input === 'q' || key.escape) {
+      exit();
+    }
+  });
+
+  // If selection was made, show success
+  if (result && result.success) {
+    const selectedProject = projects[selectedIndex];
+    return (
+      <Box flexDirection="column">
+        <Text color="green">✅ Project switched successfully!</Text>
+        <Box marginTop={1} paddingLeft={2} flexDirection="column">
+          <Text>
+            <Text bold>Current project:</Text> {selectedProject.name}
+          </Text>
+          <Text>
+            <Text bold>URL:</Text> {selectedProject.url}
+          </Text>
+        </Box>
+      </Box>
+    );
+  }
+
+  // Show interactive selection UI
+  return (
+    <Box flexDirection="column">
+      <Text bold>Select a project:</Text>
+      <Box marginTop={1} flexDirection="column">
+        {projects.map((project, index) => {
+          const isSelected = index === selectedIndex;
+          const isCurrent = project.name === currentProject;
+
+          return (
+            <Box key={project.name}>
+              <Text color={isSelected ? 'cyan' : undefined}>
+                {isSelected ? '▶ ' : '  '}
+                {project.name}
+                {isCurrent && <Text color="green"> (current)</Text>}
+              </Text>
+            </Box>
+          );
+        })}
+      </Box>
+      <Box marginTop={1}>
+        <Text dimColor>
+          Use arrow keys to navigate, Enter to select, q to quit
+        </Text>
+      </Box>
+    </Box>
+  );
+};
+
+export const ProjectSelect = ({ name, projectConfig }: ProjectSelectProps) => {
+  const [projects, setProjects] = useState<Project[]>([]);
+  const [currentProject, setCurrentProject] = useState<string | null>(null);
+  const [result, setResult] = useState<{ success: boolean; error?: string } | null>(null);
+  const [isInteractive] = useState(!name);
+  const { isRawModeSupported } = useStdin();
+
+  useEffect(() => {
+    const { projects: projectList, current } = projectConfig.listProjects();
+    setProjects(projectList);
+    setCurrentProject(current);
+
+    // If name is provided, select it directly
+    if (name) {
+      const selectResult = projectConfig.selectProject(name);
+      setResult(selectResult);
+    }
+  }, [name, projectConfig]);
+
+  // Handle no projects case
+  if (projects.length === 0) {
+    return (
+      <Box flexDirection="column">
+        <Text color="red">❌ No projects configured</Text>
+        <Box marginTop={1}>
+          <Text dimColor>
+            Add a project first with "px project add &lt;name&gt; --url &lt;url&gt;"
+          </Text>
+        </Box>
+      </Box>
+    );
+  }
+
+  // Direct selection mode - show result
+  if (!isInteractive && result) {
+    if (result.success) {
+      const selectedProject = projects.find(p => p.name === name);
+      return (
+        <Box flexDirection="column">
+          <Text color="green">✅ Project switched successfully!</Text>
+          <Box marginTop={1} paddingLeft={2} flexDirection="column">
+            <Text>
+              <Text bold>Current project:</Text> {name}
+            </Text>
+            {selectedProject && (
+              <Text>
+                <Text bold>URL:</Text> {selectedProject.url}
+              </Text>
+            )}
+          </Box>
+        </Box>
+      );
+    } else {
+      return (
+        <Box flexDirection="column">
+          <Text color="red">❌ Failed to select project</Text>
+          <Box paddingLeft={2}>
+            <Text color="red">{result.error}</Text>
+          </Box>
+          {projects.length > 0 && (
+            <Box marginTop={1} flexDirection="column">
+              <Text>Available projects:</Text>
+              {projects.map(p => (
+                <Box key={p.name} paddingLeft={2}>
+                  <Text dimColor>• {p.name}</Text>
+                </Box>
+              ))}
+            </Box>
+          )}
+        </Box>
+      );
+    }
+  }
+
+  // Interactive selection mode
+  if (isInteractive) {
+    // If raw mode is not supported (e.g., in tests), show a non-interactive list
+    if (!isRawModeSupported) {
+      return (
+        <Box flexDirection="column">
+          <Text bold>Available projects:</Text>
+          <Box marginTop={1} flexDirection="column">
+            {projects.map((project) => {
+              const isCurrent = project.name === currentProject;
+              return (
+                <Box key={project.name} paddingLeft={2}>
+                  <Text>
+                    • {project.name}
+                    {isCurrent && <Text color="green"> (current)</Text>}
+                  </Text>
+                </Box>
+              );
+            })}
+          </Box>
+          <Box marginTop={1}>
+            <Text dimColor>
+              Interactive mode not available. Use "px project select &lt;name&gt;" to select a project.
+            </Text>
+          </Box>
+        </Box>
+      );
+    }
+
+    // Use the interactive component that has useInput
+    return <InteractiveProjectSelect
+      projects={projects}
+      currentProject={currentProject}
+      projectConfig={projectConfig}
+    />;
+  }
+
+  return <Text>Processing...</Text>;
+};

package/src/components/project-show.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+import type { ProjectConfigManager } from '../commands/project-config-manager.js';
+
+interface ProjectShowProps {
+  projectConfig: ProjectConfigManager;
+}
+
+export const ProjectShow = ({ projectConfig }: ProjectShowProps) => {
+  const currentProject = projectConfig.getCurrentProject();
+  const { projects } = projectConfig.listProjects();
+
+  if (!currentProject) {
+    return (
+      <Box flexDirection="column">
+        <Text>No project currently selected.</Text>
+        {projects.length > 0 ? (
+          <Box marginTop={1}>
+            <Text dimColor>
+              Use "px project select" to choose from {projects.length} available project{projects.length === 1 ? '' : 's'}.
+            </Text>
+          </Box>
+        ) : (
+          <Box marginTop={1}>
+            <Text dimColor>
+              Add a project with "px project add &lt;name&gt; --url &lt;url&gt;"
+            </Text>
+          </Box>
+        )}
+      </Box>
+    );
+  }
+
+  return (
+    <Box flexDirection="column" paddingTop={1} paddingBottom={1}>
+      <Text bold>Current Project</Text>
+      <Box marginTop={1} paddingLeft={2} flexDirection="column">
+        <Text>
+          <Text bold>Name:</Text> {currentProject.name}
+        </Text>
+        <Text>
+          <Text bold>URL:</Text> {currentProject.url}
+        </Text>
+        <Text>
+          <Text bold>Added:</Text> {new Date(currentProject.addedAt).toLocaleString()}
+        </Text>
+      </Box>
+
+      {projects.length > 1 && (
+        <Box marginTop={1}>
+          <Text dimColor>
+            {projects.length - 1} other project{projects.length - 1 === 1 ? '' : 's'} available. Use "px project list" to see all.
+          </Text>
+        </Box>
+      )}
+    </Box>
+  );
+};

package/src/components/resource-clear.tsx

@@ -0,0 +1,127 @@
+import React, { useState, useEffect } from 'react';
+import { Box, Text, useApp, useInput } from 'ink';
+import { ErrorComponent } from './error.js';
+import { useApiGet, useApiDelete } from '../hooks/useApi.js';
+
+interface ResourcesResponse {
+  resources: Array<{
+    key: string;
+    type: string;
+    path?: string;
+    size: number;
+    lastModified: string;
+  }>;
+  truncated: boolean;
+  count: number;
+}
+
+export const ResourceClear = () => {
+  const [confirmed, setConfirmed] = useState(false);
+  const [deleted, setDeleted] = useState(false);
+  const [selectedOption, setSelectedOption] = useState<'cancel' | 'delete'>('cancel');
+  const { exit } = useApp();
+
+  const { data: resourcesData, loading: listLoading, error: listError } = useApiGet<ResourcesResponse>('/resources');
+  const { execute: deleteResources, loading: deleteLoading, error: deleteError } = useApiDelete('resources');
+
+  useInput((input, key) => {
+    if (!confirmed && !deleted && resourcesData && resourcesData.count > 0) {
+      if (key.upArrow || key.downArrow) {
+        setSelectedOption(prev => prev === 'cancel' ? 'delete' : 'cancel');
+      } else if (key.return) {
+        if (selectedOption === 'delete') {
+          setConfirmed(true);
+        } else {
+          exit();
+        }
+      } else if (key.escape || (key.ctrl && input === 'c')) {
+        exit();
+      }
+    }
+  });
+
+  useEffect(() => {
+    if (confirmed && !deleteLoading && !deleteError && !deleted) {
+      deleteResources('/resources')
+        .then(() => {
+          setDeleted(true);
+        })
+    }
+  }, [confirmed, deleteLoading, deleteError, deleted, deleteResources]);
+
+  useEffect(() => {
+    if (deleted) {
+      // Exit after showing success message for a moment
+      const timer = setTimeout(() => {
+        exit();
+      }, 1500);
+      
+      return () => clearTimeout(timer);
+    }
+  }, [deleted, exit]);
+
+  if (listError) {
+    return <ErrorComponent error={listError} />;
+  }
+
+  if (deleteError) {
+    return <ErrorComponent error={deleteError} />;
+  }
+
+  if (listLoading) {
+    return (
+      <Box>
+        <Text>📋 Loading resources...</Text>
+      </Box>
+    );
+  }
+
+  if (resourcesData && resourcesData.count === 0) {
+    return (
+      <Box>
+        <Text>No resources to delete.</Text>
+      </Box>
+    );
+  }
+
+  if (!confirmed) {
+    return (
+      <Box flexDirection="column">
+        <Text bold color="red">🚨 DANGER: This will permanently delete ALL resources!</Text>
+        <Box marginTop={1} marginBottom={1} paddingLeft={2} flexDirection="column">
+          <Text>This action will delete {resourcesData?.count || 0} resource(s).</Text>
+          <Text dimColor>This cannot be undone.</Text>
+        </Box>
+        <Box marginTop={1} flexDirection="column">
+          <Text>Use arrow keys to select, Enter to confirm:</Text>
+          <Box marginTop={1} flexDirection="column">
+            <Text color={selectedOption === 'cancel' ? 'green' : undefined}>
+              {selectedOption === 'cancel' ? '▶ ' : '  '}Cancel (keep resources)
+            </Text>
+            <Text color={selectedOption === 'delete' ? 'red' : undefined}>
+              {selectedOption === 'delete' ? '▶ ' : '  '}Delete all resources
+            </Text>
+          </Box>
+        </Box>
+      </Box>
+    );
+  }
+
+  if (deleteLoading) {
+    return (
+      <Box>
+        <Text>🗑️  Deleting all resources...</Text>
+      </Box>
+    );
+  }
+
+  if (deleted) {
+    return (
+      <Box>
+        <Text color="green">✅ Successfully deleted all resources</Text>
+      </Box>
+    );
+  }
+
+  return null;
+};

package/src/components/resource-delete.tsx

@@ -0,0 +1,160 @@
+import React, { useState, useEffect } from 'react';
+import { Box, Text, useStdin, useApp } from 'ink';
+import { ErrorComponent } from './error.js';
+import { useApiDelete, useApiGet } from '../hooks/useApi.js';
+import { generateTypes } from '../commands/helpers.js';
+
+interface ApiResourceEntry {
+  key: string;
+  type: 'text' | 'binary';
+  size: number;
+  lastModified: string;
+  local: boolean;
+}
+
+interface ResourcesResponse {
+  resources: ApiResourceEntry[];
+  truncated: boolean;
+  count: number;
+}
+
+interface ResourceDeleteProps {
+  resourceKey: string;
+  resourcePath: string;
+  projectRootPath?: string;
+  force?: boolean;
+}
+
+export const ResourceDelete = ({ resourceKey, resourcePath, projectRootPath, force = false }: ResourceDeleteProps) => {
+  const [confirmed, setConfirmed] = useState(force); // Auto-confirm if force is true
+  const [deleted, setDeleted] = useState(false);
+  const [input, setInput] = useState('');
+  const [isLocalResource, setIsLocalResource] = useState<boolean | null>(null);
+  const { stdin, setRawMode } = useStdin();
+  const { exit } = useApp();
+
+  const {
+    data: resourcesData, loading: listLoading, error: listError,
+  } = useApiGet<ResourcesResponse>('/resources');
+  const { execute: deleteResource, loading, error } = useApiDelete('resource');
+
+  // Check if the resource is local
+  useEffect(() => {
+    if (resourcesData) {
+      const resource = resourcesData.resources.find(r => r.key === resourceKey);
+      if (resource) {
+        setIsLocalResource(resource.local);
+      } else {
+        setIsLocalResource(false); // Resource doesn't exist
+      }
+    }
+  }, [resourcesData, resourceKey]);
+
+  useEffect(() => {
+    if (stdin && !confirmed && !deleted && !force) {
+      setRawMode(true);
+
+      const handleData = (data: Buffer) => {
+        const char = data.toString();
+
+        if (char === '\r' || char === '\n') {
+          if (input.toLowerCase() === 'yes') {
+            setConfirmed(true);
+          } else {
+            exit();
+          }
+        } else if (char === '\u0003') { // Ctrl+C
+          exit();
+        } else if (char === '\u007F' || char === '\b') { // Backspace
+          setInput(prev => prev.slice(0, -1));
+        } else {
+          setInput(prev => prev + char);
+        }
+      };
+
+      stdin.on('data', handleData);
+
+      return () => {
+        stdin.off('data', handleData);
+        setRawMode(false);
+      };
+    }
+  }, [stdin, setRawMode, confirmed, deleted, input, exit, force]);
+
+  useEffect(() => {
+    if (confirmed && !loading && !error && !deleted) {
+      // URL encode the key for the API endpoint
+      const encodedKey = encodeURIComponent(resourceKey);
+      deleteResource(`/resources/${encodedKey}`)
+        .then(() => {
+          setDeleted(true);
+
+          // Generate types after successful deletion if in local dev mode
+          if (projectRootPath) {
+            generateTypes(projectRootPath)
+              .catch((typeError) => {              // Don't fail the delete if type generation fails
+                console.error('Failed to generate types:', typeError);
+              });
+          }
+        });
+    }
+  }, [confirmed, loading, error, deleted, deleteResource, resourceKey, projectRootPath]);
+
+  if (listError) {
+    return <ErrorComponent error={listError} />;
+  }
+
+  if (error) {
+    return <ErrorComponent error={error} />;
+  }
+
+  if (listLoading || isLocalResource === null) {
+    return (
+      <Box>
+        <Text>Checking resource...</Text>
+      </Box>
+    );
+  }
+
+  if (isLocalResource) {
+    return (
+      <Box flexDirection="column">
+        <Text color="red" bold>❌ Cannot Delete Local Resource</Text>
+        <Box marginTop={1} paddingLeft={2} flexDirection="column">
+          <Text>This resource was synced from your local filesystem.</Text>
+          <Text dimColor>To remove it, delete the file locally and run 'px resources sync'.</Text>
+        </Box>
+      </Box>
+    );
+  }
+
+  if (!confirmed && !force) {
+    return (
+      <Box flexDirection="column">
+        <Text bold color="yellow">⚠️  Warning: This will permanently delete the following resource:</Text>
+        <Box marginTop={1} marginBottom={1} paddingLeft={2}>
+          <Text>{resourcePath}</Text>
+        </Box>
+        <Text>Type "yes" to confirm deletion: {input}</Text>
+      </Box>
+    );
+  }
+
+  if (loading) {
+    return (
+      <Box>
+        <Text>🗑️  Deleting {resourcePath}...</Text>
+      </Box>
+    );
+  }
+
+  if (deleted) {
+    return (
+      <Box flexDirection="column">
+        <Text color="green">✅ Successfully deleted: {resourcePath}</Text>
+      </Box>
+    );
+  }
+
+  return null;
+};