@hicoders/devkit 1.0.0

package/pkg/tui/theme-context.tsx

@@ -0,0 +1,30 @@
+// Theme context — provides the active Theme to every screen and a `cycle()` to
+// switch it. The choice is loaded from and saved to ~/.devkit.json, so it sticks
+// across runs and across tools. Components read colors via useTheme(); the
+// shared ListSelect calls useThemeControls().cycle() on the `t` key.
+
+import { createContext, useCallback, useContext, useState, type ReactNode } from "react";
+import { defaultTheme, nextTheme, themeByName, type Theme } from "./theme";
+import { loadConfig, saveConfig } from "../core/config";
+
+interface ThemeControls {
+  theme: Theme;
+  cycle: () => void;
+}
+
+const ThemeCtx = createContext<ThemeControls>({ theme: defaultTheme, cycle: () => {} });
+
+export const useTheme = (): Theme => useContext(ThemeCtx).theme;
+export const useThemeControls = (): ThemeControls => useContext(ThemeCtx);
+
+export function ThemeProvider({ children }: { children: ReactNode }) {
+  const [theme, setTheme] = useState<Theme>(() => themeByName(loadConfig().theme));
+  const cycle = useCallback(() => {
+    setTheme((cur) => {
+      const next = nextTheme(cur.name);
+      saveConfig({ theme: next.name });
+      return next;
+    });
+  }, []);
+  return <ThemeCtx.Provider value={{ theme, cycle }}>{children}</ThemeCtx.Provider>;
+}

package/pkg/tui/theme.ts

@@ -0,0 +1,97 @@
+// Shared visual tokens for every devkit TUI screen, so the suite looks uniform.
+// Multiple named presets; the active one is chosen via the theme context and
+// cycled with `t` (persisted in ~/.devkit.json). Add a preset by appending to
+// THEMES — every screen picks it up automatically.
+
+export interface Theme {
+  name: string;
+  accent: string; // primary brand / highlight color
+  accentDim: string; // section headers, secondary accent
+  fg: string; // normal text
+  dim: string; // muted/secondary text
+  muted: string; // between fg and dim
+  green: string; // success
+  red: string; // danger
+  yellow: string; // warning / confirm
+  selBg: string; // highlighted-row background
+  selFg: string; // highlighted-row text
+}
+
+export const THEMES: Theme[] = [
+  {
+    name: "midnight",
+    accent: "#7C9CF4",
+    accentDim: "#5566AA",
+    fg: "#E6E6E6",
+    dim: "#7A7A7A",
+    muted: "#9AA0AA",
+    green: "#5BD75B",
+    red: "#FF6B6B",
+    yellow: "#E5C07B",
+    selBg: "#293356",
+    selFg: "#FFFFFF",
+  },
+  {
+    name: "matrix",
+    accent: "#4AE24A",
+    accentDim: "#2E8B2E",
+    fg: "#C8F7C8",
+    dim: "#5A7A5A",
+    muted: "#79A079",
+    green: "#5BD75B",
+    red: "#FF6B6B",
+    yellow: "#D7D75B",
+    selBg: "#143314",
+    selFg: "#EAFFEA",
+  },
+  {
+    name: "amber",
+    accent: "#E5A94B",
+    accentDim: "#A0762E",
+    fg: "#F0E6D6",
+    dim: "#8A7A5A",
+    muted: "#B0A080",
+    green: "#9BD75B",
+    red: "#FF7B6B",
+    yellow: "#E5C07B",
+    selBg: "#3A2E14",
+    selFg: "#FFF6E6",
+  },
+  {
+    name: "rose",
+    accent: "#FF6B9D",
+    accentDim: "#AA4470",
+    fg: "#F5E0EA",
+    dim: "#8A6A7A",
+    muted: "#B080A0",
+    green: "#5BD75B",
+    red: "#FF6B6B",
+    yellow: "#E5C07B",
+    selBg: "#3A1428",
+    selFg: "#FFF0F6",
+  },
+  {
+    name: "mono",
+    accent: "#FFFFFF",
+    accentDim: "#888888",
+    fg: "#DDDDDD",
+    dim: "#777777",
+    muted: "#999999",
+    green: "#BBBBBB",
+    red: "#FF6B6B",
+    yellow: "#CCCCCC",
+    selBg: "#333333",
+    selFg: "#FFFFFF",
+  },
+];
+
+export const defaultTheme = THEMES[0]!;
+
+export function themeByName(name: string | undefined): Theme {
+  return THEMES.find((t) => t.name === name) ?? defaultTheme;
+}
+
+export function nextTheme(current: string): Theme {
+  const i = THEMES.findIndex((t) => t.name === current);
+  return THEMES[(i + 1) % THEMES.length]!;
+}

package/pkg/tui/tools.tsx

@@ -0,0 +1,27 @@
+// Registry of tools shown in the `devkit` hub. Each entry points at a screen
+// file in this folder that the hub spawns as a child process.
+//
+// Adding a tool: build pkg/core/<tool>.ts + pkg/tui/<tool>.tsx, then add a row
+// here and a bin/<tool>.bat shim.
+
+export interface ToolDef {
+  id: string;
+  label: string;
+  description: string;
+  file: string; // filename within pkg/tui (spawned via `bun`)
+}
+
+export const TOOLS: ToolDef[] = [
+  {
+    id: "killport",
+    label: "killport",
+    description: "Find and kill processes by port",
+    file: "killport.tsx",
+  },
+  {
+    id: "launch",
+    label: "launch",
+    description: "Start your dev projects",
+    file: "launch.tsx",
+  },
+];

package/pkg/tui/winmouse.ts

@@ -0,0 +1,70 @@
+// winmouse — work around Bun #25663 on Windows.
+//
+// On Windows, `process.stdin.setRawMode(true)` OVERWRITES the console input mode
+// with just ENABLE_VIRTUAL_TERMINAL_INPUT (0x200) instead of preserving the
+// existing flags. That wipes ENABLE_MOUSE_INPUT, so OpenTUI (which enables mouse
+// and then calls setRawMode) never receives any mouse events — and it also wipes
+// ENABLE_QUICK_EDIT_MODE, which is why terminal text selection stops working.
+//
+// Fix: monkey-patch setRawMode so that after Bun flips raw mode on, we re-apply
+// the mouse flags via the Win32 console API. Doing it in the patch (not once)
+// means it survives every later raw-mode toggle by OpenTUI. No-op off Windows.
+//
+// Ref: https://github.com/oven-sh/bun/issues/25663
+
+import { dlopen, FFIType, ptr } from "bun:ffi";
+
+const STD_INPUT_HANDLE = -10;
+const ENABLE_MOUSE_INPUT = 0x0010;
+const ENABLE_QUICK_EDIT_MODE = 0x0040;
+const ENABLE_EXTENDED_FLAGS = 0x0080;
+const ENABLE_VIRTUAL_TERMINAL_INPUT = 0x0200;
+
+let installed = false;
+
+export function enableWindowsMouse(): void {
+  if (installed || process.platform !== "win32") return;
+  installed = true;
+
+  let k32;
+  try {
+    k32 = dlopen("kernel32.dll", {
+      GetStdHandle: { args: [FFIType.i32], returns: FFIType.ptr },
+      GetConsoleMode: { args: [FFIType.ptr, FFIType.ptr], returns: FFIType.i32 },
+      SetConsoleMode: { args: [FFIType.ptr, FFIType.u32], returns: FFIType.i32 },
+    });
+  } catch {
+    return; // FFI unavailable — silently skip (keyboard still works)
+  }
+
+  const hIn = k32.symbols.GetStdHandle(STD_INPUT_HANDLE);
+
+  // Add the mouse flags back to whatever mode is currently set, keeping VT input
+  // and ensuring QuickEdit stays off (so mouse goes to the app, not selection).
+  const applyMouseFlags = () => {
+    try {
+      const buf = new Uint32Array(1);
+      if (!k32.symbols.GetConsoleMode(hIn, ptr(buf))) return;
+      const mode =
+        ((buf[0]! | ENABLE_EXTENDED_FLAGS | ENABLE_MOUSE_INPUT | ENABLE_VIRTUAL_TERMINAL_INPUT) &
+          ~ENABLE_QUICK_EDIT_MODE) >>>
+        0;
+      k32.symbols.SetConsoleMode(hIn, mode);
+    } catch {
+      /* ignore — non-console stdin, etc. */
+    }
+  };
+
+  const stdin = process.stdin as NodeJS.ReadStream & {
+    setRawMode?: (mode: boolean) => unknown;
+  };
+  const original = stdin.setRawMode?.bind(stdin);
+  if (original) {
+    stdin.setRawMode = (mode: boolean) => {
+      const result = original(mode);
+      if (mode) applyMouseFlags(); // re-add the flags Bun's setRawMode just wiped
+      return result;
+    };
+  }
+  applyMouseFlags(); // in case raw mode is already on
+}

package/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "lib": ["ESNext"],
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "types": ["bun"],
+    "allowJs": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "verbatimModuleSyntax": true,
+    "jsx": "react-jsx",
+    "jsxImportSource": "@opentui/react"
+  },
+  "include": ["pkg/**/*.ts", "pkg/**/*.tsx"]
+}