@hasna/terminal 0.1.4 → 0.1.5

package/src/Browse.tsx

@@ -0,0 +1,103 @@
+import React, { useState, useCallback } from "react";
+import { Box, Text, useInput } from "ink";
+import { readdirSync, statSync } from "fs";
+import { join, dirname } from "path";
+
+interface BrowseProps {
+  cwd: string;
+  onCd: (path: string) => void;
+  onSelect: (path: string) => void;
+  onExit: () => void;
+}
+
+interface Entry {
+  name: string;
+  isDir: boolean;
+}
+
+function readDir(dir: string): Entry[] {
+  try {
+    const names = readdirSync(dir);
+    const entries: Entry[] = [];
+    for (const name of names) {
+      try {
+        const stat = statSync(join(dir, name));
+        entries.push({ name, isDir: stat.isDirectory() });
+      } catch {
+        entries.push({ name, isDir: false });
+      }
+    }
+    entries.sort((a, b) => {
+      if (a.isDir !== b.isDir) return a.isDir ? -1 : 1;
+      return a.name.localeCompare(b.name);
+    });
+    return entries;
+  } catch {
+    return [];
+  }
+}
+
+const PAGE = 20;
+
+export default function Browse({ cwd, onCd, onSelect, onExit }: BrowseProps) {
+  const [cursor, setCursor] = useState(0);
+
+  const entries = readDir(cwd);
+  const total = entries.length;
+
+  const safeIndex = Math.min(cursor, Math.max(0, total - 1));
+
+  const start = Math.max(0, Math.min(safeIndex - Math.floor(PAGE / 2), total - PAGE));
+  const slice = entries.slice(Math.max(0, start), Math.max(0, start) + PAGE);
+
+  useInput(useCallback((_input: string, key: any) => {
+    if (key.upArrow) {
+      setCursor(c => (c <= 0 ? Math.max(0, total - 1) : c - 1));
+      return;
+    }
+    if (key.downArrow) {
+      setCursor(c => (total === 0 ? 0 : (c >= total - 1 ? 0 : c + 1)));
+      return;
+    }
+    if (key.return) {
+      if (total === 0) return;
+      const entry = entries[safeIndex];
+      if (!entry) return;
+      const full = join(cwd, entry.name);
+      if (entry.isDir) {
+        setCursor(0);
+        onCd(full);
+      } else {
+        onSelect(full);
+      }
+      return;
+    }
+    if (key.backspace || key.delete || key.leftArrow) {
+      setCursor(0);
+      onCd(dirname(cwd));
+      return;
+    }
+    if (key.escape) {
+      onExit();
+      return;
+    }
+  }, [cwd, entries, safeIndex, total, onCd, onSelect, onExit]));
+
+  return (
+    <Box flexDirection="column">
+      <Text dimColor>{cwd}</Text>
+      {total === 0 && <Text dimColor>  (empty)</Text>}
+      {slice.map((entry, i) => {
+        const absIdx = Math.max(0, start) + i;
+        const selected = absIdx === safeIndex;
+        const icon = entry.isDir ? "▸" : "·";
+        return (
+          <Box key={entry.name}>
+            <Text inverse={selected}>{` ${icon} ${entry.name}${entry.isDir ? "/" : ""} `}</Text>
+          </Box>
+        );
+      })}
+      <Text dimColor>{"  enter  backspace  esc"}</Text>
+    </Box>
+  );
+}

package/src/FuzzyPicker.tsx

@@ -0,0 +1,69 @@
+import React, { useState, useCallback } from "react";
+import { Box, Text, useInput } from "ink";
+
+interface FuzzyPickerProps {
+  history: string[];
+  onSelect: (nl: string) => void;
+  onExit: () => void;
+}
+
+const MAX_MATCHES = 10;
+
+export default function FuzzyPicker({ history, onSelect, onExit }: FuzzyPickerProps) {
+  const [query, setQuery] = useState("");
+  const [cursor, setCursor] = useState(0);
+
+  const matches = query === ""
+    ? history.slice().reverse().slice(0, MAX_MATCHES)
+    : history.slice().reverse().filter(h => h.toLowerCase().includes(query.toLowerCase())).slice(0, MAX_MATCHES);
+
+  const safeCursor = Math.min(cursor, Math.max(0, matches.length - 1));
+
+  useInput(useCallback((_input: string, key: any) => {
+    if (key.escape || key.ctrl && _input === "c") {
+      onExit();
+      return;
+    }
+    if (key.return) {
+      if (matches.length > 0) {
+        onSelect(matches[safeCursor]);
+      }
+      return;
+    }
+    if (key.upArrow) {
+      setCursor(c => Math.max(0, c - 1));
+      return;
+    }
+    if (key.downArrow) {
+      setCursor(c => Math.min(matches.length - 1, c + 1));
+      return;
+    }
+    if (key.backspace || key.delete) {
+      setQuery(q => q.slice(0, -1));
+      setCursor(0);
+      return;
+    }
+    if (!key.ctrl && !key.meta && _input && _input.length === 1) {
+      setQuery(q => q + _input);
+      setCursor(0);
+    }
+  }, [matches, safeCursor, onSelect, onExit]));
+
+  return (
+    <Box flexDirection="column">
+      <Text>{`  / ${query}_`}</Text>
+      {matches.length === 0
+        ? <Text dimColor>{"  no matches"}</Text>
+        : matches.map((m, i) => {
+            const selected = i === safeCursor;
+            return (
+              <Box key={i}>
+                <Text inverse={selected} dimColor={!selected}>{`  ${m} `}</Text>
+              </Box>
+            );
+          })
+      }
+      <Text dimColor>{"  enter  esc"}</Text>
+    </Box>
+  );
+}

package/src/StatusBar.tsx

@@ -4,64 +4,58 @@ import { execSync } from "child_process";
 import { homedir } from "os";
 import { type Permissions } from "./history.js";
 
-function getCwd(): string {
-  const cwd = process.cwd();
+function formatCwd(cwd: string): string {
   const home = homedir();
   return cwd.startsWith(home) ? "~" + cwd.slice(home.length) : cwd;
 }
 
-function getGitBranch(): string | null {
+function getGitBranch(cwd: string): string | null {
   try {
-    return execSync("git branch --show-current 2>/dev/null", { stdio: ["ignore", "pipe", "ignore"] })
-      .toString()
-      .trim() || null;
-  } catch {
-    return null;
-  }
+    return execSync("git branch --show-current 2>/dev/null", {
+      cwd,
+      stdio: ["ignore", "pipe", "ignore"],
+    }).toString().trim() || null;
+  } catch { return null; }
 }
 
-function getGitDirty(): boolean {
+function getGitDirty(cwd: string): boolean {
   try {
-    const out = execSync("git status --porcelain 2>/dev/null", { stdio: ["ignore", "pipe", "ignore"] }).toString();
-    return out.trim().length > 0;
-  } catch {
-    return false;
-  }
+    return execSync("git status --porcelain 2>/dev/null", {
+      cwd,
+      stdio: ["ignore", "pipe", "ignore"],
+    }).toString().trim().length > 0;
+  } catch { return false; }
 }
 
 function activePerms(perms: Permissions): string[] {
   const labels: Array<[keyof Permissions, string]> = [
     ["destructive", "del"],
-    ["network", "net"],
-    ["sudo", "sudo"],
-    ["install", "pkg"],
+    ["network",     "net"],
+    ["sudo",        "sudo"],
+    ["install",     "pkg"],
     ["write_outside_cwd", "write"],
   ];
-  return labels.filter(([k]) => perms[k]).map(([, l]) => l);
+  // only show disabled ones — full access is the default so no need to clutter
+  const disabled = labels.filter(([k]) => !perms[k]).map(([, l]) => `no-${l}`);
+  return disabled;
 }
 
 interface Props {
   permissions: Permissions;
+  cwd?: string;
 }
 
-export default function StatusBar({ permissions }: Props) {
-  const cwd = getCwd();
-  const branch = getGitBranch();
-  const dirty = branch ? getGitDirty() : false;
-  const perms = activePerms(permissions);
+export default function StatusBar({ permissions, cwd: cwdProp }: Props) {
+  const cwd = cwdProp ?? process.cwd();
+  const branch = getGitBranch(cwd);
+  const dirty = branch ? getGitDirty(cwd) : false;
+  const restricted = activePerms(permissions);
 
   return (
     <Box gap={2} paddingLeft={2} marginTop={1}>
-      <Text dimColor>{cwd}</Text>
-      {branch && (
-        <Text dimColor>
-          {branch}
-          {dirty ? " ●" : ""}
-        </Text>
-      )}
-      {perms.length > 0 && (
-        <Text dimColor>{perms.join(" · ")}</Text>
-      )}
+      <Text dimColor>{formatCwd(cwd)}</Text>
+      {branch && <Text dimColor>{branch}{dirty ? " ●" : ""}</Text>}
+      {restricted.length > 0 && <Text dimColor>{restricted.join(" · ")}</Text>}
     </Box>
   );
 }