otherwise-cli 0.1.0

package/src/ui/components/index.js

@@ -0,0 +1,82 @@
+/**
+ * UI components index
+ */
+
+export { App } from './App.jsx';
+
+// Header components
+export { 
+  Header, 
+  Banner, 
+  AnimatedBanner,
+  StatusBar, 
+  ConnectionStatus, 
+  ModelIndicator, 
+  ChatTitle,
+  Divider,
+  WelcomeMessage,
+} from './Header.jsx';
+
+// Message components
+export { 
+  MessageList, 
+  Message, 
+  UserMessage, 
+  AssistantMessage, 
+  SystemMessage, 
+  MessageDivider, 
+  GenerationStats,
+} from './MessageList.jsx';
+
+// Streaming components
+export { StreamingResponse, StreamingText } from './StreamingResponse.jsx';
+
+// Indicator components
+export { 
+  ThinkingIndicator, 
+  CompletedThinking,
+  GradientSpinner,
+  PulsingDots,
+  ShimmerText,
+  LoadingIndicator,
+  SuccessIndicator,
+  ErrorIndicator,
+  WarningIndicator,
+  InfoIndicator,
+} from './ThinkingIndicator.jsx';
+
+// Tool execution components
+export { 
+  ToolExecution, 
+  ToolHeader, 
+  ToolResult, 
+  ToolError, 
+  StreamingProgress,
+  AnimatedProgressBar,
+  DiffView,
+  DirectoryTree,
+  ShellOutput,
+  ToolSummary,
+  CollapsibleToolExecution,
+  CompactToolList,
+} from './ToolExecution.jsx';
+
+// Input components
+export { 
+  PromptInput, 
+  FileChip, 
+  FileChips,
+  CommandAutocomplete,
+  TokenEstimate,
+  MultilineIndicator,
+  useInputHistory,
+  SimplePrompt,
+  TypingIndicator,
+  QuickActions,
+} from './PromptInput.jsx';
+
+// Overlay components
+export { FilePicker } from './FilePicker.jsx';
+export { ModelSelector } from './ModelSelector.jsx';
+export { HelpPanel } from './HelpPanel.jsx';
+export { HistoryPanel } from './HistoryPanel.jsx';

package/src/ui/context/TerminalContext.jsx

@@ -0,0 +1,150 @@
+/**
+ * TerminalContext - React Context for terminal dimensions
+ * Provides reactive terminal size to all Ink components without prop drilling
+ */
+
+import React, { createContext, useContext, useMemo } from 'react';
+import { useTerminalSize } from '../hooks/useTerminalSize.js';
+
+/**
+ * Context for terminal dimensions
+ */
+const TerminalContext = createContext(null);
+
+/**
+ * Default terminal values for SSR/testing or when outside provider
+ */
+const DEFAULT_TERMINAL = {
+  columns: 80,
+  rows: 24,
+  isNarrow: false,
+  isMedium: true,
+  isWide: false,
+  isExtraWide: false,
+  contentWidth: 76,
+  textWidth: 76,
+  uiWidth: 50,
+  useCompactMode: false,
+  rawWidth: 80,
+  rawHeight: 24,
+};
+
+/**
+ * TerminalProvider component
+ * Wrap your Ink app with this to provide terminal dimensions to all children
+ * 
+ * @param {object} props
+ * @param {React.ReactNode} props.children - Child components
+ * @param {object} props.options - Options to pass to useTerminalSize
+ */
+export function TerminalProvider({ children, options = {} }) {
+  const terminalSize = useTerminalSize(options);
+
+  // Memoize to prevent unnecessary re-renders
+  const value = useMemo(() => terminalSize, [
+    terminalSize.columns,
+    terminalSize.rows,
+    terminalSize.contentWidth,
+    terminalSize.textWidth,
+    terminalSize.uiWidth,
+  ]);
+
+  return (
+    <TerminalContext.Provider value={value}>
+      {children}
+    </TerminalContext.Provider>
+  );
+}
+
+/**
+ * Hook to access terminal dimensions from context
+ * Falls back to default values if used outside provider
+ * 
+ * @returns {object} Terminal size information
+ */
+export function useTerminal() {
+  const context = useContext(TerminalContext);
+  
+  if (!context) {
+    // Fallback for usage outside provider (e.g., during testing)
+    // Return a sensible default that won't break rendering
+    return DEFAULT_TERMINAL;
+  }
+  
+  return context;
+}
+
+/**
+ * Higher-order component to inject terminal dimensions as props
+ * Useful for class components or when you need terminal props directly
+ * 
+ * @param {React.Component} Component - Component to wrap
+ * @returns {React.Component} Wrapped component with terminal props
+ */
+export function withTerminal(Component) {
+  const WrappedComponent = (props) => {
+    const terminal = useTerminal();
+    return <Component {...props} terminal={terminal} />;
+  };
+  
+  WrappedComponent.displayName = `withTerminal(${Component.displayName || Component.name || 'Component'})`;
+  
+  return WrappedComponent;
+}
+
+/**
+ * Responsive component helper - renders different content based on terminal width
+ * 
+ * @param {object} props
+ * @param {React.ReactNode} props.narrow - Content for narrow terminals (<60 cols)
+ * @param {React.ReactNode} props.medium - Content for medium terminals (60-100 cols)
+ * @param {React.ReactNode} props.wide - Content for wide terminals (>100 cols)
+ * @param {React.ReactNode} props.children - Default/fallback content
+ */
+export function Responsive({ narrow, medium, wide, children }) {
+  const { isNarrow, isWide } = useTerminal();
+  
+  if (isNarrow && narrow) return narrow;
+  if (isWide && wide) return wide;
+  if (medium) return medium;
+  
+  return children || null;
+}
+
+/**
+ * Component that only renders when terminal is wide enough
+ * 
+ * @param {object} props
+ * @param {number} props.minWidth - Minimum terminal width to render
+ * @param {React.ReactNode} props.children - Content to render
+ * @param {React.ReactNode} props.fallback - Fallback content for narrow terminals
+ */
+export function WideOnly({ minWidth = 60, children, fallback = null }) {
+  const { columns } = useTerminal();
+  
+  if (columns < minWidth) {
+    return fallback;
+  }
+  
+  return children;
+}
+
+/**
+ * Component that shows compact version on narrow terminals
+ * 
+ * @param {object} props
+ * @param {React.ReactNode} props.children - Full content
+ * @param {React.ReactNode} props.compact - Compact version
+ * @param {number} props.threshold - Width threshold (default: 60)
+ */
+export function Compact({ children, compact, threshold = 60 }) {
+  const { columns } = useTerminal();
+  
+  if (columns < threshold && compact) {
+    return compact;
+  }
+  
+  return children;
+}
+
+export default TerminalContext;

package/src/ui/context/index.js

@@ -0,0 +1,13 @@
+/**
+ * Context index
+ * Export all context providers and hooks
+ */
+
+export {
+  TerminalProvider,
+  useTerminal,
+  withTerminal,
+  Responsive,
+  WideOnly,
+  Compact,
+} from './TerminalContext.jsx';

package/src/ui/hooks/index.js

@@ -0,0 +1,16 @@
+/**
+ * UI hooks index
+ */
+
+export { useWebSocket, ConnectionState } from './useWebSocket.js';
+export { useChatState, MessageRole, GenerationState, ToolState } from './useChatState.js';
+export { useFileAttachments, FileType } from './useFileAttachments.js';
+export { useCommands, parseCommand, COMMANDS, CommandAction } from './useCommands.js';
+export { useKeyboardShortcuts, formatKeyCombo, DEFAULT_SHORTCUTS } from './useKeyboardShortcuts.js';
+export { useNotifications, notifyGenerationComplete } from './useNotifications.js';
+export { 
+  useTerminalSize, 
+  getTerminalWidth, 
+  getTerminalHeight, 
+  calculateResponsiveWidth 
+} from './useTerminalSize.js';