@drewsepsi/nextpi 0.1.0

package/components/ui/file-tree.tsx

@@ -0,0 +1,560 @@
+// Styling updated to use globals.css — visual changes only
+"use client"
+
+import React, {
+  createContext,
+  forwardRef,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+} from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import {
+  FolderIcon,
+  FolderOpenIcon,
+  FileCodeIcon,
+  FileJsonIcon,
+  FileTypeIcon,
+  FileTextIcon,
+  FileImageIcon,
+  FileIcon,
+  ChevronRightIcon,
+} from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+// File type icon mapping
+const getFileIcon = (filename: string, isSelected: boolean) => {
+  const ext = filename.split('.').pop()?.toLowerCase()
+  const baseClass = cn("size-4 transition-transform duration-200", isSelected && "scale-110")
+
+  switch (ext) {
+    case 'tsx':
+    case 'ts':
+    case 'jsx':
+    case 'js':
+      return <FileCodeIcon className={cn(baseClass, "text-sky-400")} />
+    case 'json':
+      return <FileJsonIcon className={cn(baseClass, "text-amber-400")} />
+    case 'css':
+    case 'scss':
+    case 'less':
+      return <FileTypeIcon className={cn(baseClass, "text-pink-400")} />
+    case 'md':
+    case 'mdx':
+      return <FileTextIcon className={cn(baseClass, "text-emerald-400")} />
+    case 'png':
+    case 'jpg':
+    case 'jpeg':
+    case 'svg':
+    case 'webp':
+      return <FileImageIcon className={cn(baseClass, "text-purple-400")} />
+    default:
+      return <FileIcon className={cn(baseClass, "text-muted-foreground")} />
+  }
+}
+
+type TreeViewElement = {
+  id: string
+  name: string
+  type?: "file" | "folder"
+  isSelectable?: boolean
+  children?: TreeViewElement[]
+  metadata?: {
+    size?: string
+    modified?: string
+  }
+}
+
+type TreeSortMode =
+  | "default"
+  | "none"
+  | ((a: TreeViewElement, b: TreeViewElement) => number)
+
+type TreeContextProps = {
+  selectedId: string | undefined
+  expandedItems: string[] | undefined
+  indicator: boolean
+  handleExpand: (id: string) => void
+  selectItem: (id: string) => void
+  setExpandedItems?: React.Dispatch<React.SetStateAction<string[] | undefined>>
+  openIcon?: React.ReactNode
+  closeIcon?: React.ReactNode
+  direction: "rtl" | "ltr"
+  onFolderContextMenu?: (e: React.MouseEvent, id: string) => void
+}
+
+const TreeContext = createContext<TreeContextProps | null>(null)
+
+const useTree = () => {
+  const context = useContext(TreeContext)
+  if (!context) {
+    throw new Error("useTree must be used within a TreeProvider")
+  }
+  return context
+}
+
+type Direction = "rtl" | "ltr" | undefined
+
+const isFolderElement = (element: TreeViewElement) => {
+  if (element.type) {
+    return element.type === "folder"
+  }
+
+  return Array.isArray(element.children)
+}
+
+const mergeExpandedItems = (
+  currentItems: string[] | undefined,
+  nextItems: string[]
+) => [...new Set([...(currentItems ?? []), ...nextItems])]
+
+const treeCollator = new Intl.Collator("en", {
+  numeric: true,
+  sensitivity: "base",
+})
+
+const defaultTreeComparator = (a: TreeViewElement, b: TreeViewElement) => {
+  const aIsFolder = isFolderElement(a)
+  const bIsFolder = isFolderElement(b)
+
+  if (aIsFolder !== bIsFolder) {
+    return aIsFolder ? -1 : 1
+  }
+
+  return treeCollator.compare(a.name, b.name)
+}
+
+const getTreeComparator = (sort: TreeSortMode) => {
+  if (sort === "none") {
+    return undefined
+  }
+
+  if (sort === "default") {
+    return defaultTreeComparator
+  }
+
+  return sort
+}
+
+const sortTreeElements = (
+  elements: TreeViewElement[],
+  sort: TreeSortMode
+): TreeViewElement[] => {
+  const comparator = getTreeComparator(sort)
+
+  const nextElements = elements.map((element) => {
+    if (!Array.isArray(element.children)) {
+      return element
+    }
+
+    return {
+      ...element,
+      children: sortTreeElements(element.children, sort),
+    }
+  })
+
+  if (!comparator) {
+    return nextElements
+  }
+
+  return [...nextElements].sort(comparator)
+}
+
+const renderTreeElements = (
+  elements: TreeViewElement[],
+  sort: TreeSortMode,
+  onFolderContextMenu?: (e: React.MouseEvent, id: string) => void
+): React.ReactNode =>
+  sortTreeElements(elements, sort).map((element) => {
+    if (isFolderElement(element)) {
+      return (
+        <Folder
+          key={element.id}
+          value={element.id}
+          element={element.name}
+          isSelectable={element.isSelectable}
+        >
+          {Array.isArray(element.children)
+            ? renderTreeElements(element.children, sort, onFolderContextMenu)
+            : null}
+        </Folder>
+      )
+    }
+
+    return (
+      <File
+        key={element.id}
+        value={element.id}
+        isSelectable={element.isSelectable}
+        fileName={element.name}
+      >
+        {element.name}
+      </File>
+    )
+  })
+
+type TreeViewProps = {
+  initialSelectedId?: string
+  indicator?: boolean
+  elements?: TreeViewElement[]
+  initialExpandedItems?: string[]
+  openIcon?: React.ReactNode
+  closeIcon?: React.ReactNode
+  sort?: TreeSortMode
+  onExpandedItemsChange?: (items: string[] | undefined) => void
+  onSelectedIdChange?: (id: string | undefined) => void
+  onFolderContextMenu?: (e: React.MouseEvent, id: string) => void
+} & Omit<
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Root>,
+  "defaultValue" | "onValueChange" | "type" | "value"
+>
+
+const Tree = forwardRef<HTMLDivElement, TreeViewProps>(
+  (
+    {
+      className,
+      elements,
+      initialSelectedId,
+      initialExpandedItems,
+      onExpandedItemsChange,
+      onSelectedIdChange,
+      onFolderContextMenu,
+      children,
+      indicator = true,
+      openIcon,
+      closeIcon,
+      sort = "default",
+      dir,
+      ...props
+    },
+    ref
+  ) => {
+    const [selectedId, setSelectedId] = useState<string | undefined>(
+      initialSelectedId
+    )
+    const [expandedItems, setExpandedItems] = useState<string[] | undefined>(
+      initialExpandedItems
+    )
+
+    useEffect(() => {
+      setExpandedItems(initialExpandedItems)
+    }, [initialExpandedItems])
+
+    const selectItem = useCallback((id: string) => {
+      setSelectedId(id)
+      onSelectedIdChange?.(id)
+    }, [onSelectedIdChange])
+
+    const handleExpand = useCallback((id: string, expanded?: boolean) => {
+      let next: string[] | undefined
+      
+      setExpandedItems((prev) => {
+        const isCurrentlyExpanded = prev?.includes(id)
+        const shouldExpand = expanded !== undefined ? expanded : !isCurrentlyExpanded
+
+        if (shouldExpand && !isCurrentlyExpanded) {
+          next = [...(prev ?? []), id]
+        } else if (!shouldExpand && isCurrentlyExpanded) {
+          next = prev?.filter((item) => item !== id) ?? []
+        } else {
+          next = prev
+        }
+        return next
+      })
+
+      // Call side effect after state update
+      if (next !== undefined) {
+        onExpandedItemsChange?.(next)
+      }
+    }, [onExpandedItemsChange])
+
+    const expandSpecificTargetedElements = useCallback(
+      (elements?: TreeViewElement[], selectId?: string) => {
+        if (!elements || !selectId) return
+        const findParent = (
+          currentElement: TreeViewElement,
+          currentPath: string[] = []
+        ) => {
+          const isSelectable = currentElement.isSelectable ?? true
+          const newPath = [...currentPath, currentElement.id]
+          if (currentElement.id === selectId) {
+            if (isSelectable) {
+              setExpandedItems((prev) => mergeExpandedItems(prev, newPath))
+            } else {
+              if (newPath.includes(currentElement.id)) {
+                newPath.pop()
+                setExpandedItems((prev) => mergeExpandedItems(prev, newPath))
+              }
+            }
+            return
+          }
+          if (
+            Array.isArray(currentElement.children) &&
+            currentElement.children.length > 0
+          ) {
+            currentElement.children.forEach((child) => {
+              findParent(child, newPath)
+            })
+          }
+        }
+        elements.forEach((element) => {
+          findParent(element)
+        })
+      },
+      []
+    )
+
+    useEffect(() => {
+      if (initialSelectedId) {
+        expandSpecificTargetedElements(elements, initialSelectedId)
+      }
+    }, [initialSelectedId, elements, expandSpecificTargetedElements])
+
+    const direction = dir === "rtl" ? "rtl" : "ltr"
+    const treeChildren =
+      children ?? (elements ? renderTreeElements(elements, sort) : null)
+
+    return (
+      <TreeContext.Provider
+        value={{
+          selectedId,
+          expandedItems,
+          handleExpand,
+          selectItem,
+          setExpandedItems,
+          indicator,
+          openIcon,
+          closeIcon,
+          direction,
+          onFolderContextMenu,
+        }}
+      >
+        <div className={cn("size-full", className)}>
+          <div
+            ref={ref}
+            className="relative h-full overflow-auto scrollbar-thin"
+            dir={dir as Direction}
+          >
+            <AccordionPrimitive.Root
+              {...props}
+              type="multiple"
+              value={expandedItems}
+              onValueChange={(newValue) => {
+                setExpandedItems?.(newValue)
+                onExpandedItemsChange?.(newValue)
+              }}
+              className="flex flex-col"
+              dir={dir as Direction}
+            >
+              {treeChildren}
+            </AccordionPrimitive.Root>
+          </div>
+        </div>
+      </TreeContext.Provider>
+    )
+  }
+)
+
+Tree.displayName = "Tree"
+
+const TreeIndicator = forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const { direction } = useTree()
+
+  return (
+    <div
+      dir={direction}
+      ref={ref}
+      className={cn(
+        "bg-border absolute left-1.5 h-full w-px rounded-md py-3 duration-300 ease-in-out hover:bg-muted-foreground/30 rtl:right-1.5",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+
+TreeIndicator.displayName = "TreeIndicator"
+
+type FolderProps = {
+  expandedItems?: string[]
+  element: string
+  isSelectable?: boolean
+  isSelect?: boolean
+  onContextMenu?: (e: React.MouseEvent) => void
+} & React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+
+const Folder = forwardRef<
+  HTMLDivElement,
+  FolderProps & React.HTMLAttributes<HTMLDivElement>
+>(
+  (
+    {
+      className,
+      element,
+      value,
+      isSelectable = true,
+      isSelect,
+      onContextMenu,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const {
+      direction,
+      handleExpand,
+      expandedItems,
+      setExpandedItems,
+      indicator,
+      selectedId,
+      selectItem,
+      onFolderContextMenu,
+    } = useTree()
+    const isSelected = isSelect ?? selectedId === value
+    const isExpanded = expandedItems?.includes(value)
+
+    return (
+      <AccordionPrimitive.Item
+        ref={ref}
+        {...props}
+        value={value}
+        className="relative overflow-hidden"
+      >
+        <AccordionPrimitive.Trigger
+          className={cn(
+            "group flex items-center gap-2 rounded-lg text-sm px-3 py-1.5 w-full text-left transition-all duration-200 ease-out",
+            "hover:bg-accent hover:translate-x-0.5",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30",
+            className,
+            {
+              "bg-accent": isSelected && isSelectable,
+              "cursor-pointer": isSelectable,
+              "cursor-not-allowed opacity-40": !isSelectable,
+            }
+          )}
+          disabled={!isSelectable}
+          onClick={() => handleExpand(value)}
+          onContextMenu={(e) => {
+            if (onFolderContextMenu) {
+              onFolderContextMenu(e, value);
+            }
+            onContextMenu?.(e);
+          }}
+        >
+          {/* Chevron rotates via Radix data-state so it animates smoothly */}
+          <ChevronRightIcon
+            className="size-3.5 text-muted-foreground/50 transition-transform duration-200 ease-out shrink-0 group-data-[state=open]:rotate-90 group-data-[state=open]:text-muted-foreground"
+          />
+          {isExpanded
+            ? <FolderOpenIcon className="size-4 text-amber-500 dark:text-amber-400/90 transition-colors duration-200" />
+            : <FolderIcon className="size-4 text-amber-500/70 dark:text-amber-400/70 transition-colors duration-200 group-hover:text-amber-500 dark:group-hover:text-amber-400/90" />
+          }
+          <span className={cn(
+            "font-medium truncate transition-colors duration-200",
+            isSelected ? "text-foreground" : "text-foreground/80 group-hover:text-foreground"
+          )}>
+            {element}
+          </span>
+        </AccordionPrimitive.Trigger>
+        <AccordionPrimitive.Content
+          className="overflow-hidden transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+        >
+          <div className="relative">
+            {indicator && (
+              <div className="absolute left-[1.125rem] top-0 bottom-0 w-px bg-gradient-to-b from-border via-border/40 to-transparent" />
+            )}
+            <AccordionPrimitive.Root
+              dir={direction}
+              type="multiple"
+              className="ml-[2.25rem] flex flex-col py-1"
+              value={expandedItems}
+              onValueChange={(newValue) => {
+                // Sync nested accordion changes back to tree context
+                setExpandedItems?.(newValue)
+              }}
+            >
+              {children}
+            </AccordionPrimitive.Root>
+          </div>
+        </AccordionPrimitive.Content>
+      </AccordionPrimitive.Item>
+    )
+  }
+)
+
+Folder.displayName = "Folder"
+
+const File = forwardRef<
+  HTMLButtonElement,
+  {
+    value: string
+    handleSelect?: (id: string) => void
+    isSelectable?: boolean
+    isSelect?: boolean
+    fileIcon?: React.ReactNode
+    fileName?: string
+  } & React.ButtonHTMLAttributes<HTMLButtonElement>
+>(
+  (
+    {
+      value,
+      className,
+      handleSelect,
+      onClick,
+      isSelectable = true,
+      isSelect,
+      fileIcon,
+      fileName,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const { direction, selectedId, selectItem } = useTree()
+    const isSelected = isSelect ?? selectedId === value
+    const displayName = fileName || (typeof children === 'string' ? children : value)
+
+    return (
+      <button
+        ref={ref}
+        type="button"
+        disabled={!isSelectable}
+        className={cn(
+          "group flex items-center gap-2 rounded-lg px-3 py-1.5 text-sm w-full text-left transition-all duration-200 ease-out",
+          "hover:bg-accent hover:translate-x-0.5",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30",
+          {
+            "bg-accent": isSelected && isSelectable,
+          },
+          isSelectable ? "cursor-pointer" : "cursor-not-allowed opacity-40",
+          direction === "rtl" ? "rtl" : "ltr",
+          className
+        )}
+        onClick={(event) => {
+          selectItem(value)
+          handleSelect?.(value)
+          onClick?.(event)
+        }}
+        {...props}
+      >
+        {fileIcon ?? getFileIcon(displayName, isSelected)}
+        <span className={cn(
+          "truncate transition-colors duration-200",
+          isSelected ? "text-foreground" : "text-muted-foreground group-hover:text-foreground"
+        )}>
+          {children}
+        </span>
+      </button>
+    )
+  }
+)
+
+File.displayName = "File"
+
+export { File, Folder, Tree, type TreeViewElement }
+export type { TreeSortMode }

package/lib/agent.ts

@@ -0,0 +1,105 @@
+import { 
+  createAgentSession, 
+  SessionManager, 
+  type AgentSession 
+} from "@mariozechner/pi-coding-agent";
+import { getModel, streamSimple } from "@mariozechner/pi-ai";
+import * as path from "path";
+import * as fs from "fs";
+import { getProjectRoot } from "./root-path";
+import { getEffectiveApiKey } from "./config";
+
+export interface ResearchAgentConfig {
+  sessionDir?: string;
+  sessionFile?: string;
+  modelId?: string;
+  thinkingLevel?: "off" | "minimal" | "low" | "medium" | "high" | "xhigh";
+}
+
+// Default OpenRouter model
+const DEFAULT_MODEL = "openrouter/free";
+
+// Research tools (web search, web fetch)
+const researchTools = [
+  {
+    name: "web_search",
+    description: "Search the web for information using Exa AI",
+    parameters: {
+      type: "object",
+      properties: {
+        query: { type: "string", description: "Search query" },
+        numResults: { type: "number", description: "Number of results (default: 5)" }
+      },
+      required: ["query"]
+    }
+  },
+  {
+    name: "web_fetch",
+    description: "Fetch content from a specific URL",
+    parameters: {
+      type: "object",
+      properties: {
+        url: { type: "string", description: "URL to fetch" }
+      },
+      required: ["url"]
+    }
+  }
+];
+
+export async function createResearchAgent(
+  config: ResearchAgentConfig = {}
+): Promise<AgentSession> {
+  const {
+    sessionDir = path.join(getProjectRoot(), ".sessions"),
+    sessionFile = path.join(sessionDir, "research-agent.jsonl"),
+    modelId = DEFAULT_MODEL,
+    thinkingLevel = "low",
+  } = config;
+
+  // Ensure session directory exists
+  fs.mkdirSync(sessionDir, { recursive: true });
+
+  // Use OpenRouter model
+  const model = getModel("openrouter", modelId as "openrouter/free");
+
+  // Create session with research tools and system prompt
+  const { session } = await createAgentSession({
+    model,
+    thinkingLevel,
+    systemPrompt: RESEARCH_SYSTEM_PROMPT,
+    sessionManager: SessionManager.open(sessionFile),
+    customTools: researchTools as any,
+  } as any);
+
+  // Wrap stream function with OpenRouter headers
+  const originalStreamFn = session.agent.streamFn;
+  session.agent.streamFn = (model, context, options) => {
+    return streamSimple(model, context, {
+      ...options,
+      headers: {
+        ...options?.headers,
+        "X-Title": "NextPi Agent",
+        "HTTP-Referer": "https://github.com/drewsepsi/nextpi",
+      },
+    });
+  };
+
+  return session;
+}
+
+// System prompt for research and coding
+export const RESEARCH_SYSTEM_PROMPT = `You are NextPi, an expert research and coding assistant. You have access to the web and the local file system.
+
+### GUIDELINES
+- ALWAYS start by explaining your plan to the user in the main message or thinking block.
+- BEFORE calling any tool that modifies the file system (write_file, edit_file, etc.), you MUST describe the specific changes you are about to make and why.
+- If you are editing a file, summarize the intended changes first.
+- If you are researching, explain what you hope to find.
+
+### CAPABILITIES
+1. **Web Search**: Search for docs, errors, news, etc.
+2. **Web Fetch**: Read specific URLs.
+3. **File Operations**: Read, write, list (ls), and edit files.
+4. **Shell**: Execute bash commands for testing or exploration.
+
+Always be surgical with edits and transparent with your process.`;

package/lib/config.ts

@@ -0,0 +1,50 @@
+import fs from 'fs';
+import path from 'path';
+import os from 'os';
+
+const CONFIG_DIR = path.join(os.homedir(), '.nextpi');
+const CONFIG_FILE = path.join(CONFIG_DIR, 'config.json');
+
+export interface NextPiConfig {
+  openRouterApiKey?: string;
+  defaultModel?: string;
+}
+
+export function getConfig(): NextPiConfig {
+  try {
+    if (!fs.existsSync(CONFIG_FILE)) {
+      return {};
+    }
+    const data = fs.readFileSync(CONFIG_FILE, 'utf-8');
+    return JSON.parse(data);
+  } catch (err) {
+    console.error('Error reading config:', err);
+    return {};
+  }
+}
+
+export function saveConfig(newConfig: Partial<NextPiConfig>) {
+  try {
+    if (!fs.existsSync(CONFIG_DIR)) {
+      fs.mkdirSync(CONFIG_DIR, { recursive: true });
+    }
+    const current = getConfig();
+    const updated = { ...current, ...newConfig };
+    fs.writeFileSync(CONFIG_FILE, JSON.stringify(updated, null, 2));
+    
+    // Also update current process env for immediate use
+    if (updated.openRouterApiKey) {
+      process.env.OPENROUTER_API_KEY = updated.openRouterApiKey;
+    }
+    
+    return updated;
+  } catch (err) {
+    console.error('Error saving config:', err);
+    throw err;
+  }
+}
+
+export function getEffectiveApiKey(): string | undefined {
+  // Priority: 1. Environment Variable, 2. Config File
+  return process.env.OPENROUTER_API_KEY || getConfig().openRouterApiKey;
+}