@skillkit/tui 1.5.0 → 1.6.0

package/dist/index.js

@@ -2,8 +2,8 @@
 import { render } from "ink";
 
 // src/App.tsx
-import { useState as useState19 } from "react";
-import { Box as Box17, Text as Text17, useInput as useInput15, useApp, useStdout } from "ink";
+import { useState as useState21 } from "react";
+import { Box as Box19, Text as Text19, useInput as useInput17, useApp, useStdout } from "ink";
 
 // src/components/Sidebar.tsx
 import { Box, Text } from "ink";
@@ -58,6 +58,9 @@ var NAV = [
   // Collaboration
   { id: "team", label: "Team", key: "a" },
   { id: "plugins", label: "Plugins", key: "p" },
+  // Methodology
+  { id: "methodology", label: "Methodology", key: "o" },
+  { id: "plan", label: "Plans", key: "n" },
   // Tools
   { id: "recommend", label: "Recommend", key: "r" },
   { id: "translate", label: "Translate", key: "t" },
@@ -86,12 +89,17 @@ function Sidebar({ screen }) {
       item.label
     ] }, item.id)),
     /* @__PURE__ */ jsx(Text, { children: " " }),
-    NAV.slice(8, 12).map((item) => /* @__PURE__ */ jsxs(Text, { inverse: screen === item.id, children: [
+    NAV.slice(8, 10).map((item) => /* @__PURE__ */ jsxs(Text, { inverse: screen === item.id, children: [
       screen === item.id ? symbols.bullet : " ",
       item.label
     ] }, item.id)),
     /* @__PURE__ */ jsx(Text, { children: " " }),
-    NAV.slice(12).map((item) => /* @__PURE__ */ jsxs(Text, { inverse: screen === item.id, children: [
+    NAV.slice(10, 14).map((item) => /* @__PURE__ */ jsxs(Text, { inverse: screen === item.id, children: [
+      screen === item.id ? symbols.bullet : " ",
+      item.label
+    ] }, item.id)),
+    /* @__PURE__ */ jsx(Text, { children: " " }),
+    NAV.slice(14).map((item) => /* @__PURE__ */ jsxs(Text, { inverse: screen === item.id, children: [
       screen === item.id ? symbols.bullet : " ",
       item.label
     ] }, item.id)),
@@ -2777,9 +2785,9 @@ function Plugins({ rows = 24 }) {
     setError(null);
     try {
       const { createPluginManager, loadPluginsFromDirectory } = await import("@skillkit/core");
-      const { join: join6 } = await import("path");
+      const { join: join7 } = await import("path");
       const manager = createPluginManager(process.cwd());
-      const pluginsDir = join6(process.cwd(), ".skillkit", "plugins");
+      const pluginsDir = join7(process.cwd(), ".skillkit", "plugins");
       try {
         const loadedPlugins = await loadPluginsFromDirectory(pluginsDir);
         for (const plugin of loadedPlugins) {
@@ -2817,9 +2825,9 @@ function Plugins({ rows = 24 }) {
     setMessage(null);
     try {
       const { createPluginManager, loadPluginsFromDirectory } = await import("@skillkit/core");
-      const { join: join6 } = await import("path");
+      const { join: join7 } = await import("path");
       const manager = createPluginManager(process.cwd());
-      const pluginsDir = join6(process.cwd(), ".skillkit", "plugins");
+      const pluginsDir = join7(process.cwd(), ".skillkit", "plugins");
       try {
         const loadedPlugins = await loadPluginsFromDirectory(pluginsDir);
         for (const plugin of loadedPlugins) {
@@ -2934,10 +2942,456 @@ function Plugins({ rows = 24 }) {
   ] });
 }
 
+// src/screens/Methodology.tsx
+import { useState as useState19, useEffect as useEffect16, useMemo } from "react";
+import { Box as Box17, Text as Text17, useInput as useInput15 } from "ink";
+import {
+  MethodologyManager
+} from "@skillkit/core";
+import { Fragment as Fragment2, jsx as jsx17, jsxs as jsxs17 } from "react/jsx-runtime";
+function Methodology({ rows = 24 }) {
+  const [packs, setPacks] = useState19([]);
+  const [selectedPack, setSelectedPack] = useState19(null);
+  const [skills, setSkills] = useState19([]);
+  const [loading, setLoading] = useState19(true);
+  const [view, setView] = useState19("packs");
+  const [sel, setSel] = useState19(0);
+  const [error, setError] = useState19(null);
+  const [message, setMessage] = useState19(null);
+  const manager = useMemo(() => new MethodologyManager({
+    projectPath: process.cwd()
+  }), []);
+  const maxVisible = Math.max(5, rows - 10);
+  useEffect16(() => {
+    loadPacks();
+  }, []);
+  const loadPacks = async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const loadedPacks = await manager.listAvailablePacks();
+      setPacks(loadedPacks);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Failed to load methodology packs");
+    }
+    setLoading(false);
+  };
+  const loadSkills = async (pack) => {
+    setLoading(true);
+    setError(null);
+    try {
+      const loader = manager.getLoader();
+      const loadedSkills = await loader.loadPackSkills(pack.name);
+      setSkills(loadedSkills);
+      setSelectedPack(pack);
+      setView("skills");
+      setSel(0);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Failed to load skills");
+    }
+    setLoading(false);
+  };
+  const installPack = async (pack) => {
+    setLoading(true);
+    setMessage(null);
+    try {
+      await manager.installPack(pack.name);
+      setMessage(`Installed ${pack.name} methodology pack`);
+      await loadPacks();
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Failed to install pack");
+    }
+    setLoading(false);
+  };
+  const items = view === "packs" ? packs : skills;
+  const start = Math.max(0, Math.min(sel - Math.floor(maxVisible / 2), items.length - maxVisible));
+  const visible = items.slice(start, start + maxVisible);
+  useInput15((input, key) => {
+    if (loading) return;
+    if (key.upArrow) setSel((i) => Math.max(0, i - 1));
+    else if (key.downArrow) setSel((i) => Math.min(items.length - 1, i + 1));
+    else if (input === "r") {
+      if (view === "packs") loadPacks();
+      else if (selectedPack) loadSkills(selectedPack);
+    } else if (key.escape || input === "b") {
+      if (view === "skills") {
+        setView("packs");
+        setSel(0);
+        setSelectedPack(null);
+      }
+    } else if (key.return) {
+      if (view === "packs" && packs[sel]) {
+        loadSkills(packs[sel]);
+      }
+    } else if (input === "i" && view === "packs" && packs[sel]) {
+      installPack(packs[sel]);
+    }
+  });
+  const renderPackItem = (pack, idx) => {
+    const isSel = idx === sel;
+    return /* @__PURE__ */ jsxs17(Box17, { flexDirection: "column", children: [
+      /* @__PURE__ */ jsxs17(Text17, { inverse: isSel, children: [
+        isSel ? symbols.pointer : " ",
+        " ",
+        pack.name,
+        " ",
+        /* @__PURE__ */ jsxs17(Text17, { dimColor: true, children: [
+          "v",
+          pack.version
+        ] })
+      ] }),
+      isSel && /* @__PURE__ */ jsxs17(Fragment2, { children: [
+        /* @__PURE__ */ jsxs17(Text17, { dimColor: true, children: [
+          "   ",
+          pack.description
+        ] }),
+        /* @__PURE__ */ jsxs17(Text17, { dimColor: true, children: [
+          "   ",
+          pack.skills.length,
+          " skill(s) | Tags: ",
+          pack.tags?.join(", ") || "none"
+        ] })
+      ] })
+    ] }, pack.name);
+  };
+  const renderSkillItem = (skill, idx) => {
+    const isSel = idx === sel;
+    return /* @__PURE__ */ jsxs17(Box17, { flexDirection: "column", children: [
+      /* @__PURE__ */ jsxs17(Text17, { inverse: isSel, children: [
+        isSel ? symbols.pointer : " ",
+        " ",
+        skill.name
+      ] }),
+      isSel && skill.description && /* @__PURE__ */ jsxs17(Text17, { dimColor: true, children: [
+        "   ",
+        skill.description
+      ] }),
+      isSel && skill.tags && /* @__PURE__ */ jsxs17(Text17, { dimColor: true, children: [
+        "   Tags: ",
+        skill.tags.join(", ")
+      ] })
+    ] }, skill.name);
+  };
+  return /* @__PURE__ */ jsxs17(Box17, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsx17(Text17, { bold: true, color: colors.primary, children: view === "packs" ? "METHODOLOGY PACKS" : `${selectedPack?.name.toUpperCase()} SKILLS` }),
+    /* @__PURE__ */ jsx17(Text17, { dimColor: true, children: view === "packs" ? `${packs.length} pack(s) available` : `${skills.length} skill(s) in pack` }),
+    loading && /* @__PURE__ */ jsx17(Text17, { color: "yellow", children: "Loading..." }),
+    error && /* @__PURE__ */ jsxs17(Text17, { color: "red", children: [
+      symbols.error,
+      " ",
+      error
+    ] }),
+    message && /* @__PURE__ */ jsxs17(Text17, { color: "green", children: [
+      symbols.success,
+      " ",
+      message
+    ] }),
+    !loading && items.length === 0 && /* @__PURE__ */ jsx17(Box17, { marginTop: 1, children: /* @__PURE__ */ jsxs17(Text17, { dimColor: true, children: [
+      "No ",
+      view === "packs" ? "methodology packs" : "skills",
+      " found."
+    ] }) }),
+    !loading && items.length > 0 && /* @__PURE__ */ jsxs17(Box17, { marginTop: 1, flexDirection: "column", children: [
+      start > 0 && /* @__PURE__ */ jsxs17(Text17, { dimColor: true, children: [
+        "  ",
+        symbols.arrowUp,
+        " ",
+        start,
+        " more"
+      ] }),
+      view === "packs" ? visible.map((pack, i) => renderPackItem(pack, start + i)) : visible.map((skill, i) => renderSkillItem(skill, start + i)),
+      start + maxVisible < items.length && /* @__PURE__ */ jsxs17(Text17, { dimColor: true, children: [
+        "  ",
+        symbols.arrowDown,
+        " ",
+        items.length - start - maxVisible,
+        " more"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx17(Box17, { marginTop: 1, flexDirection: "column", children: view === "packs" ? /* @__PURE__ */ jsx17(Text17, { dimColor: true, children: "Enter=view skills  i=install  r=refresh  q=quit" }) : /* @__PURE__ */ jsx17(Text17, { dimColor: true, children: "b/Esc=back  r=refresh  q=quit" }) })
+  ] });
+}
+
+// src/screens/Plan.tsx
+import { useState as useState20, useEffect as useEffect17, useMemo as useMemo2 } from "react";
+import { Box as Box18, Text as Text18, useInput as useInput16 } from "ink";
+import {
+  PlanParser,
+  PlanValidator,
+  PlanExecutor
+} from "@skillkit/core";
+import * as fs from "fs";
+import * as path from "path";
+import { Fragment as Fragment3, jsx as jsx18, jsxs as jsxs18 } from "react/jsx-runtime";
+function Plan({ rows = 24 }) {
+  const [planFiles, setPlanFiles] = useState20([]);
+  const [selectedPlan, setSelectedPlan] = useState20(null);
+  const [selectedTask, setSelectedTask] = useState20(null);
+  const [loading, setLoading] = useState20(true);
+  const [view, setView] = useState20("plans");
+  const [sel, setSel] = useState20(0);
+  const [error, setError] = useState20(null);
+  const [executing, setExecuting] = useState20(false);
+  const [message, setMessage] = useState20(null);
+  const parser = useMemo2(() => new PlanParser(), []);
+  const validator = useMemo2(() => new PlanValidator(), []);
+  const maxVisible = Math.max(5, rows - 10);
+  useEffect17(() => {
+    loadPlans();
+  }, []);
+  const loadPlans = async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const cwd = process.cwd();
+      const files = [];
+      const searchPaths = [
+        cwd,
+        path.join(cwd, "plans"),
+        path.join(cwd, ".skillkit", "plans")
+      ];
+      for (const searchPath of searchPaths) {
+        if (fs.existsSync(searchPath)) {
+          const entries = fs.readdirSync(searchPath, { withFileTypes: true });
+          for (const entry of entries) {
+            if (entry.isFile() && (entry.name.endsWith(".plan.md") || entry.name.endsWith("-plan.md"))) {
+              const filePath = path.join(searchPath, entry.name);
+              const content = fs.readFileSync(filePath, "utf-8");
+              try {
+                const plan = parser.parse(content);
+                const validation = validator.validate(plan);
+                const errorIssue = validation.issues.find((i) => i.type === "error");
+                files.push({
+                  name: entry.name,
+                  path: filePath,
+                  plan,
+                  valid: validation.valid,
+                  error: errorIssue?.message
+                });
+              } catch {
+                files.push({
+                  name: entry.name,
+                  path: filePath,
+                  valid: false,
+                  error: "Failed to parse plan"
+                });
+              }
+            }
+          }
+        }
+      }
+      setPlanFiles(files);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Failed to load plans");
+    }
+    setLoading(false);
+  };
+  const selectPlan = (planFile) => {
+    if (planFile.plan) {
+      setSelectedPlan(planFile);
+      setView("tasks");
+      setSel(0);
+    }
+  };
+  const selectTask = (task) => {
+    setSelectedTask(task);
+    setView("steps");
+    setSel(0);
+  };
+  const executePlan = async (planFile) => {
+    if (!planFile.plan) return;
+    setExecuting(true);
+    setMessage(null);
+    try {
+      const executor = new PlanExecutor();
+      await executor.execute(planFile.plan, { dryRun: true });
+      setMessage(`Executed plan: ${planFile.plan.name} (dry run)`);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Failed to execute plan");
+    }
+    setExecuting(false);
+  };
+  const getItems = () => {
+    if (view === "plans") return planFiles;
+    if (view === "tasks" && selectedPlan?.plan) return selectedPlan.plan.tasks;
+    if (view === "steps" && selectedTask) return selectedTask.steps;
+    return [];
+  };
+  const items = getItems();
+  const start = Math.max(0, Math.min(sel - Math.floor(maxVisible / 2), items.length - maxVisible));
+  const visible = items.slice(start, start + maxVisible);
+  useInput16((input, key) => {
+    if (loading || executing) return;
+    if (key.upArrow) setSel((i) => Math.max(0, i - 1));
+    else if (key.downArrow) setSel((i) => Math.min(items.length - 1, i + 1));
+    else if (input === "r") loadPlans();
+    else if (key.escape || input === "b") {
+      if (view === "steps") {
+        setView("tasks");
+        setSelectedTask(null);
+        setSel(0);
+      } else if (view === "tasks") {
+        setView("plans");
+        setSelectedPlan(null);
+        setSel(0);
+      }
+    } else if (key.return) {
+      if (view === "plans" && planFiles[sel]) {
+        selectPlan(planFiles[sel]);
+      } else if (view === "tasks" && selectedPlan?.plan?.tasks[sel]) {
+        selectTask(selectedPlan.plan.tasks[sel]);
+      }
+    } else if (input === "x" && view === "plans" && planFiles[sel]?.plan) {
+      executePlan(planFiles[sel]);
+    }
+  });
+  const renderPlanItem = (planFile, idx) => {
+    const isSel = idx === sel;
+    const statusIcon = planFile.valid ? symbols.success : symbols.error;
+    const statusColor = planFile.valid ? "green" : "red";
+    return /* @__PURE__ */ jsxs18(Box18, { flexDirection: "column", children: [
+      /* @__PURE__ */ jsxs18(Text18, { inverse: isSel, children: [
+        isSel ? symbols.pointer : " ",
+        " ",
+        /* @__PURE__ */ jsx18(Text18, { color: statusColor, children: statusIcon }),
+        " ",
+        planFile.name
+      ] }),
+      isSel && planFile.plan && /* @__PURE__ */ jsxs18(Fragment3, { children: [
+        /* @__PURE__ */ jsxs18(Text18, { dimColor: true, children: [
+          "   ",
+          planFile.plan.goal
+        ] }),
+        /* @__PURE__ */ jsxs18(Text18, { dimColor: true, children: [
+          "   ",
+          planFile.plan.tasks.length,
+          " task(s) | ",
+          planFile.plan.techStack?.join(", ") || "No stack"
+        ] })
+      ] }),
+      isSel && planFile.error && /* @__PURE__ */ jsxs18(Text18, { color: "red", children: [
+        "   ",
+        planFile.error
+      ] })
+    ] }, planFile.path);
+  };
+  const renderTaskItem = (task, idx) => {
+    const isSel = idx === sel;
+    return /* @__PURE__ */ jsxs18(Box18, { flexDirection: "column", children: [
+      /* @__PURE__ */ jsxs18(Text18, { inverse: isSel, children: [
+        isSel ? symbols.pointer : " ",
+        " [",
+        task.id,
+        "] ",
+        task.name
+      ] }),
+      isSel && /* @__PURE__ */ jsxs18(Fragment3, { children: [
+        /* @__PURE__ */ jsxs18(Text18, { dimColor: true, children: [
+          "   ",
+          task.steps.length,
+          " step(s)"
+        ] }),
+        task.files?.create && /* @__PURE__ */ jsxs18(Text18, { dimColor: true, children: [
+          "   Create: ",
+          task.files.create.join(", ")
+        ] }),
+        task.files?.modify && /* @__PURE__ */ jsxs18(Text18, { dimColor: true, children: [
+          "   Modify: ",
+          task.files.modify.join(", ")
+        ] }),
+        task.files?.test && /* @__PURE__ */ jsxs18(Text18, { dimColor: true, children: [
+          "   Test: ",
+          task.files.test.join(", ")
+        ] })
+      ] })
+    ] }, task.id);
+  };
+  const renderStepItem = (step, idx) => {
+    const isSel = idx === sel;
+    const typeColors = {
+      test: "yellow",
+      verify: "cyan",
+      implement: "green",
+      commit: "magenta"
+    };
+    return /* @__PURE__ */ jsxs18(Box18, { flexDirection: "column", children: [
+      /* @__PURE__ */ jsxs18(Text18, { inverse: isSel, children: [
+        isSel ? symbols.pointer : " ",
+        " ",
+        /* @__PURE__ */ jsxs18(Text18, { color: typeColors[step.type] || "white", children: [
+          "[",
+          step.type,
+          "]"
+        ] }),
+        " Step ",
+        step.number
+      ] }),
+      isSel && /* @__PURE__ */ jsxs18(Text18, { dimColor: true, children: [
+        "   ",
+        step.description
+      ] })
+    ] }, step.number);
+  };
+  const getTitle = () => {
+    if (view === "plans") return "PLANS";
+    if (view === "tasks") return `TASKS: ${selectedPlan?.plan?.name || ""}`;
+    if (view === "steps") return `STEPS: Task ${selectedTask?.id}`;
+    return "PLANS";
+  };
+  return /* @__PURE__ */ jsxs18(Box18, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsx18(Text18, { bold: true, color: colors.primary, children: getTitle() }),
+    /* @__PURE__ */ jsxs18(Text18, { dimColor: true, children: [
+      view === "plans" && `${planFiles.length} plan(s) found`,
+      view === "tasks" && selectedPlan?.plan && `${selectedPlan.plan.tasks.length} task(s)`,
+      view === "steps" && selectedTask && `${selectedTask.steps.length} step(s)`
+    ] }),
+    loading && /* @__PURE__ */ jsx18(Text18, { color: "yellow", children: "Loading plans..." }),
+    executing && /* @__PURE__ */ jsx18(Text18, { color: "yellow", children: "Executing plan..." }),
+    error && /* @__PURE__ */ jsxs18(Text18, { color: "red", children: [
+      symbols.error,
+      " ",
+      error
+    ] }),
+    message && /* @__PURE__ */ jsxs18(Text18, { color: "green", children: [
+      symbols.success,
+      " ",
+      message
+    ] }),
+    !loading && !executing && items.length === 0 && /* @__PURE__ */ jsxs18(Box18, { marginTop: 1, flexDirection: "column", children: [
+      /* @__PURE__ */ jsxs18(Text18, { dimColor: true, children: [
+        "No ",
+        view,
+        " found."
+      ] }),
+      view === "plans" && /* @__PURE__ */ jsx18(Text18, { dimColor: true, children: "Create a plan file: *.plan.md or *-plan.md" })
+    ] }),
+    !loading && !executing && items.length > 0 && /* @__PURE__ */ jsxs18(Box18, { marginTop: 1, flexDirection: "column", children: [
+      start > 0 && /* @__PURE__ */ jsxs18(Text18, { dimColor: true, children: [
+        "  \u2191 ",
+        start,
+        " more"
+      ] }),
+      view === "plans" && visible.map((pf, i) => renderPlanItem(pf, start + i)),
+      view === "tasks" && visible.map((t, i) => renderTaskItem(t, start + i)),
+      view === "steps" && visible.map((s, i) => renderStepItem(s, start + i)),
+      start + maxVisible < items.length && /* @__PURE__ */ jsxs18(Text18, { dimColor: true, children: [
+        "  \u2193 ",
+        items.length - start - maxVisible,
+        " more"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs18(Box18, { marginTop: 1, children: [
+      view === "plans" && /* @__PURE__ */ jsx18(Text18, { dimColor: true, children: "Enter=view tasks  x=execute (dry-run)  r=refresh  q=quit" }),
+      view === "tasks" && /* @__PURE__ */ jsx18(Text18, { dimColor: true, children: "Enter=view steps  b/Esc=back  q=quit" }),
+      view === "steps" && /* @__PURE__ */ jsx18(Text18, { dimColor: true, children: "b/Esc=back  q=quit" })
+    ] })
+  ] });
+}
+
 // src/App.tsx
-import { jsx as jsx17, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs19 } from "react/jsx-runtime";
 function App() {
-  const [screen, setScreen] = useState19("home");
+  const [screen, setScreen] = useState21("home");
   const { exit } = useApp();
   const { stdout } = useStdout();
   const cols = stdout?.columns || 80;
@@ -2958,9 +3412,11 @@ function App() {
     s: "sync",
     a: "team",
     p: "plugins",
+    o: "methodology",
+    n: "plan",
     ",": "settings"
   };
-  useInput15((input, key) => {
+  useInput17((input, key) => {
     if (input === "q") {
       exit();
       return;
@@ -2977,67 +3433,71 @@ function App() {
   const renderScreen = () => {
     switch (screen) {
       case "home":
-        return /* @__PURE__ */ jsx17(Home, { onNavigate: setScreen, cols, rows });
+        return /* @__PURE__ */ jsx19(Home, { onNavigate: setScreen, cols, rows });
       case "browse":
-        return /* @__PURE__ */ jsx17(Browse, { cols, rows });
+        return /* @__PURE__ */ jsx19(Browse, { cols, rows });
       case "installed":
-        return /* @__PURE__ */ jsx17(Installed, { cols, rows });
+        return /* @__PURE__ */ jsx19(Installed, { cols, rows });
       case "sync":
-        return /* @__PURE__ */ jsx17(Sync, { cols, rows });
+        return /* @__PURE__ */ jsx19(Sync, { cols, rows });
       case "settings":
-        return /* @__PURE__ */ jsx17(Settings, { cols, rows });
+        return /* @__PURE__ */ jsx19(Settings, { cols, rows });
       case "recommend":
-        return /* @__PURE__ */ jsx17(Recommend, { cols, rows });
+        return /* @__PURE__ */ jsx19(Recommend, { cols, rows });
       case "translate":
-        return /* @__PURE__ */ jsx17(Translate, { cols, rows });
+        return /* @__PURE__ */ jsx19(Translate, { cols, rows });
       case "context":
-        return /* @__PURE__ */ jsx17(Context, { cols, rows });
+        return /* @__PURE__ */ jsx19(Context, { cols, rows });
       case "workflow":
-        return /* @__PURE__ */ jsx17(Workflow, { cols, rows });
+        return /* @__PURE__ */ jsx19(Workflow, { cols, rows });
       case "execute":
-        return /* @__PURE__ */ jsx17(Execute, { cols, rows });
+        return /* @__PURE__ */ jsx19(Execute, { cols, rows });
       case "history":
-        return /* @__PURE__ */ jsx17(History, { cols, rows });
+        return /* @__PURE__ */ jsx19(History, { cols, rows });
       case "marketplace":
-        return /* @__PURE__ */ jsx17(Marketplace, { cols, rows });
+        return /* @__PURE__ */ jsx19(Marketplace, { cols, rows });
       case "memory":
-        return /* @__PURE__ */ jsx17(Memory, { cols, rows });
+        return /* @__PURE__ */ jsx19(Memory, { cols, rows });
       case "team":
-        return /* @__PURE__ */ jsx17(Team, { cols, rows });
+        return /* @__PURE__ */ jsx19(Team, { cols, rows });
       case "plugins":
-        return /* @__PURE__ */ jsx17(Plugins, { cols, rows });
+        return /* @__PURE__ */ jsx19(Plugins, { cols, rows });
+      case "methodology":
+        return /* @__PURE__ */ jsx19(Methodology, { cols, rows });
+      case "plan":
+        return /* @__PURE__ */ jsx19(Plan, { cols, rows });
     }
   };
   const contentHeight = rows - 2;
-  return /* @__PURE__ */ jsxs17(Box17, { flexDirection: "column", height: rows, children: [
-    /* @__PURE__ */ jsxs17(Box17, { flexDirection: "row", height: contentHeight, children: [
-      showSidebar && /* @__PURE__ */ jsx17(Sidebar, { screen, onNavigate: setScreen }),
-      /* @__PURE__ */ jsx17(Box17, { flexDirection: "column", flexGrow: 1, marginLeft: 1, children: renderScreen() })
+  return /* @__PURE__ */ jsxs19(Box19, { flexDirection: "column", height: rows, children: [
+    /* @__PURE__ */ jsxs19(Box19, { flexDirection: "row", height: contentHeight, children: [
+      showSidebar && /* @__PURE__ */ jsx19(Sidebar, { screen, onNavigate: setScreen }),
+      /* @__PURE__ */ jsx19(Box19, { flexDirection: "column", flexGrow: 1, marginLeft: 1, children: renderScreen() })
     ] }),
-    /* @__PURE__ */ jsx17(Box17, { children: /* @__PURE__ */ jsx17(Text17, { dimColor: true, children: "h Home  m Market  b Browse  i Inst  w Wflow  x Exec  a Team  p Plug  r Rec  t Trans  c Ctx  e Mem  s Sync  , Cfg  q Quit" }) })
+    /* @__PURE__ */ jsx19(Box19, { children: /* @__PURE__ */ jsx19(Text19, { dimColor: true, children: "h Home  m Market  b Browse  w Wflow  x Exec  a Team  p Plug  o Meth  n Plan  r Rec  t Trans  c Ctx  e Mem  i Inst  s Sync  q Quit" }) })
   ] });
 }
 
 // src/components/Header.tsx
-import { Box as Box18, Text as Text18 } from "ink";
-import { jsx as jsx18, jsxs as jsxs18 } from "react/jsx-runtime";
+import { Box as Box20, Text as Text20 } from "ink";
+import { jsx as jsx20, jsxs as jsxs20 } from "react/jsx-runtime";
 function Header({ title, subtitle, count }) {
-  return /* @__PURE__ */ jsxs18(Box18, { flexDirection: "column", marginBottom: 1, children: [
-    /* @__PURE__ */ jsxs18(Box18, { justifyContent: "space-between", children: [
-      /* @__PURE__ */ jsx18(Text18, { color: colors.primary, bold: true, children: title.toUpperCase() }),
-      count !== void 0 && /* @__PURE__ */ jsxs18(Text18, { color: colors.secondaryDim, children: [
+  return /* @__PURE__ */ jsxs20(Box20, { flexDirection: "column", marginBottom: 1, children: [
+    /* @__PURE__ */ jsxs20(Box20, { justifyContent: "space-between", children: [
+      /* @__PURE__ */ jsx20(Text20, { color: colors.primary, bold: true, children: title.toUpperCase() }),
+      count !== void 0 && /* @__PURE__ */ jsxs20(Text20, { color: colors.secondaryDim, children: [
         symbols.star,
         " ",
         count
       ] })
     ] }),
-    subtitle && /* @__PURE__ */ jsx18(Text18, { color: colors.secondaryDim, dimColor: true, children: subtitle })
+    subtitle && /* @__PURE__ */ jsx20(Text20, { color: colors.secondaryDim, dimColor: true, children: subtitle })
   ] });
 }
 
 // src/components/SkillList.tsx
-import { Box as Box19, Text as Text19 } from "ink";
-import { jsx as jsx19, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Box as Box21, Text as Text21 } from "ink";
+import { jsx as jsx21, jsxs as jsxs21 } from "react/jsx-runtime";
 function formatInstalls(count) {
   if (count >= 1e3) {
     return `${(count / 1e3).toFixed(1)}K`;
@@ -3053,13 +3513,13 @@ function SkillList({
   maxVisible = 10
 }) {
   if (skills.length === 0) {
-    return /* @__PURE__ */ jsx19(Box19, { children: /* @__PURE__ */ jsx19(Text19, { color: colors.secondaryDim, dimColor: true, children: "No skills found" }) });
+    return /* @__PURE__ */ jsx21(Box21, { children: /* @__PURE__ */ jsx21(Text21, { color: colors.secondaryDim, dimColor: true, children: "No skills found" }) });
   }
   const startIndex = Math.max(0, selectedIndex - Math.floor(maxVisible / 2));
   const visibleSkills = skills.slice(startIndex, startIndex + maxVisible);
   const actualStartIndex = startIndex;
-  return /* @__PURE__ */ jsxs19(Box19, { flexDirection: "column", children: [
-    showRank && /* @__PURE__ */ jsx19(Box19, { marginBottom: 1, children: /* @__PURE__ */ jsxs19(Text19, { color: colors.secondaryDim, children: [
+  return /* @__PURE__ */ jsxs21(Box21, { flexDirection: "column", children: [
+    showRank && /* @__PURE__ */ jsx21(Box21, { marginBottom: 1, children: /* @__PURE__ */ jsxs21(Text21, { color: colors.secondaryDim, children: [
       "  #  SKILL",
       showSource && "                         SOURCE",
       showInstalls && "        INSTALLS"
@@ -3069,9 +3529,9 @@ function SkillList({
       const isSelected = realIndex === selectedIndex;
       const skillName = skill.name.padEnd(28).slice(0, 28);
       const sourceName = skill.source ? skill.source.slice(0, 25) : "";
-      return /* @__PURE__ */ jsxs19(Box19, { children: [
-        /* @__PURE__ */ jsxs19(
-          Text19,
+      return /* @__PURE__ */ jsxs21(Box21, { children: [
+        /* @__PURE__ */ jsxs21(
+          Text21,
           {
             color: isSelected ? colors.primary : colors.secondary,
             bold: isSelected,
@@ -3084,14 +3544,14 @@ function SkillList({
             ]
           }
         ),
-        showSource && /* @__PURE__ */ jsxs19(Text19, { color: colors.secondaryDim, dimColor: !isSelected, children: [
+        showSource && /* @__PURE__ */ jsxs21(Text21, { color: colors.secondaryDim, dimColor: !isSelected, children: [
           " ",
           sourceName
         ] }),
-        showInstalls && skill.installs !== void 0 && /* @__PURE__ */ jsx19(Text19, { color: colors.secondaryDim, children: formatInstalls(skill.installs).padStart(8) })
+        showInstalls && skill.installs !== void 0 && /* @__PURE__ */ jsx21(Text21, { color: colors.secondaryDim, children: formatInstalls(skill.installs).padStart(8) })
       ] }, `${skill.source}-${skill.name}`);
     }),
-    skills.length > maxVisible && /* @__PURE__ */ jsx19(Box19, { marginTop: 1, children: /* @__PURE__ */ jsxs19(Text19, { color: colors.secondaryDim, dimColor: true, children: [
+    skills.length > maxVisible && /* @__PURE__ */ jsx21(Box21, { marginTop: 1, children: /* @__PURE__ */ jsxs21(Text21, { color: colors.secondaryDim, dimColor: true, children: [
       "Showing ",
       startIndex + 1,
       "-",
@@ -3103,11 +3563,11 @@ function SkillList({
 }
 
 // src/components/StatusBar.tsx
-import { Box as Box20, Text as Text20 } from "ink";
-import { jsx as jsx20, jsxs as jsxs20 } from "react/jsx-runtime";
+import { Box as Box22, Text as Text22 } from "ink";
+import { jsx as jsx22, jsxs as jsxs22 } from "react/jsx-runtime";
 function StatusBar({ shortcuts, message }) {
-  return /* @__PURE__ */ jsxs20(
-    Box20,
+  return /* @__PURE__ */ jsxs22(
+    Box22,
     {
       borderStyle: "single",
       borderColor: colors.borderDim,
@@ -3118,11 +3578,11 @@ function StatusBar({ shortcuts, message }) {
       paddingX: 1,
       justifyContent: "space-between",
       children: [
-        /* @__PURE__ */ jsx20(Box20, { gap: 2, children: shortcuts.map((shortcut, idx) => /* @__PURE__ */ jsxs20(Box20, { gap: 1, children: [
-          /* @__PURE__ */ jsx20(Text20, { color: colors.primary, bold: true, children: shortcut.key }),
-          /* @__PURE__ */ jsx20(Text20, { color: colors.secondaryDim, children: shortcut.label })
+        /* @__PURE__ */ jsx22(Box22, { gap: 2, children: shortcuts.map((shortcut, idx) => /* @__PURE__ */ jsxs22(Box22, { gap: 1, children: [
+          /* @__PURE__ */ jsx22(Text22, { color: colors.primary, bold: true, children: shortcut.key }),
+          /* @__PURE__ */ jsx22(Text22, { color: colors.secondaryDim, children: shortcut.label })
         ] }, idx)) }),
-        message && /* @__PURE__ */ jsxs20(Text20, { color: colors.success, children: [
+        message && /* @__PURE__ */ jsxs22(Text22, { color: colors.success, children: [
           symbols.check,
           " ",
           message
@@ -3133,44 +3593,44 @@ function StatusBar({ shortcuts, message }) {
 }
 
 // src/components/SearchInput.tsx
-import { Box as Box21, Text as Text21 } from "ink";
+import { Box as Box23, Text as Text23 } from "ink";
 import TextInput2 from "ink-text-input";
-import { jsx as jsx21, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs23 } from "react/jsx-runtime";
 function SearchInput({
   value,
   onChange,
   placeholder = "Search skills...",
   isFocused = false
 }) {
-  return /* @__PURE__ */ jsxs21(
-    Box21,
+  return /* @__PURE__ */ jsxs23(
+    Box23,
     {
       borderStyle: "single",
       borderColor: isFocused ? colors.primary : colors.borderDim,
       paddingX: 1,
       children: [
-        /* @__PURE__ */ jsx21(Text21, { color: colors.secondaryDim, children: "/ " }),
-        isFocused ? /* @__PURE__ */ jsx21(
+        /* @__PURE__ */ jsx23(Text23, { color: colors.secondaryDim, children: "/ " }),
+        isFocused ? /* @__PURE__ */ jsx23(
           TextInput2,
           {
             value,
             onChange,
             placeholder
           }
-        ) : /* @__PURE__ */ jsx21(Text21, { color: value ? colors.secondary : colors.secondaryDim, children: value || placeholder }),
-        /* @__PURE__ */ jsx21(Box21, { flexGrow: 1 }),
-        /* @__PURE__ */ jsx21(Text21, { color: colors.secondaryDim, children: "/" })
+        ) : /* @__PURE__ */ jsx23(Text23, { color: value ? colors.secondary : colors.secondaryDim, children: value || placeholder }),
+        /* @__PURE__ */ jsx23(Box23, { flexGrow: 1 }),
+        /* @__PURE__ */ jsx23(Text23, { color: colors.secondaryDim, children: "/" })
       ]
     }
   );
 }
 
 // src/hooks/useKeyboard.ts
-import { useState as useState20, useCallback as useCallback3, useEffect as useEffect16 } from "react";
-import { useInput as useInput16, useApp as useApp2 } from "ink";
+import { useState as useState22, useCallback as useCallback3, useEffect as useEffect18 } from "react";
+import { useInput as useInput18, useApp as useApp2 } from "ink";
 function useKeyboard(options = {}) {
   const { exit } = useApp2();
-  useInput16((input, key) => {
+  useInput18((input, key) => {
     if (options.disabled) return;
     if (input === "q" || key.ctrl && input === "c") {
       exit();
@@ -3214,8 +3674,8 @@ function useKeyboard(options = {}) {
   });
 }
 function useListNavigation(listLength, initialIndex = 0) {
-  const [selectedIndex, setSelectedIndex] = useState20(initialIndex);
-  useEffect16(() => {
+  const [selectedIndex, setSelectedIndex] = useState22(initialIndex);
+  useEffect18(() => {
     if (selectedIndex >= listLength && listLength > 0) {
       setSelectedIndex(listLength - 1);
     }
@@ -3233,7 +3693,7 @@ function useListNavigation(listLength, initialIndex = 0) {
 }
 
 // src/hooks/useMemory.ts
-import { useState as useState21, useEffect as useEffect17, useCallback as useCallback4 } from "react";
+import { useState as useState23, useEffect as useEffect19, useCallback as useCallback4 } from "react";
 import {
   LearningStore as LearningStore2,
   ObservationStore as ObservationStore2,
@@ -3241,12 +3701,12 @@ import {
   createMemoryInjector as createMemoryInjector2
 } from "@skillkit/core";
 function useMemory() {
-  const [learnings, setLearnings] = useState21([]);
-  const [observations, setObservations] = useState21([]);
-  const [status, setStatus] = useState21(null);
-  const [loading, setLoading] = useState21(true);
-  const [error, setError] = useState21(null);
-  const [isGlobal, setIsGlobal] = useState21(false);
+  const [learnings, setLearnings] = useState23([]);
+  const [observations, setObservations] = useState23([]);
+  const [status, setStatus] = useState23(null);
+  const [loading, setLoading] = useState23(true);
+  const [error, setError] = useState23(null);
+  const [isGlobal, setIsGlobal] = useState23(false);
   const projectPath = process.cwd();
   const refresh = useCallback4(() => {
     setLoading(true);
@@ -3325,7 +3785,7 @@ function useMemory() {
     },
     [projectPath, refresh]
   );
-  useEffect17(() => {
+  useEffect19(() => {
     refresh();
   }, [refresh]);
   return {
@@ -3344,10 +3804,10 @@ function useMemory() {
 }
 
 // src/index.tsx
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { jsx as jsx24 } from "react/jsx-runtime";
 function startTUI() {
   process.stdout.write("\x1B[2J\x1B[0f");
-  const { waitUntilExit, clear } = render(/* @__PURE__ */ jsx22(App, {}), {
+  const { waitUntilExit, clear } = render(/* @__PURE__ */ jsx24(App, {}), {
     exitOnCtrlC: true
   });
   return waitUntilExit().then(() => {
@@ -3365,6 +3825,8 @@ export {
   Installed,
   Marketplace,
   Memory,
+  Methodology,
+  Plan,
   Plugins,
   Recommend,
   SearchInput,