git-stack-cli 0.3.1 → 0.5.0

package/dist/app/ManualRebase copy.js

@@ -0,0 +1,127 @@
+import * as React from "react";
+import * as Ink from "ink";
+import * as CommitMetadata from "../core/CommitMetadata.js";
+import * as Metadata from "../core/Metadata.js";
+import { cli } from "../core/cli.js";
+import * as github from "../core/github.js";
+import { invariant } from "../core/invariant.js";
+import { short_id } from "../core/short_id.js";
+import { Await } from "./Await.js";
+import { Brackets } from "./Brackets.js";
+import { Store } from "./Store.js";
+export function ManualRebase(props) {
+    return (React.createElement(Await, { fallback: React.createElement(Ink.Text, { color: "yellow" }, "Rebasing commits..."), function: () => run(props) }));
+}
+async function run(props) {
+    const state = Store.getState();
+    const actions = state.actions;
+    const branch_name = state.branch_name;
+    const merge_base = state.merge_base;
+    const commit_map = state.commit_map;
+    invariant(branch_name, "branch_name must exist");
+    invariant(merge_base, "merge_base must exist");
+    invariant(commit_map, "commit_map must exist");
+    // always listen for SIGINT event and restore git state
+    process.once("SIGINT", handle_exit);
+    const temp_branch_name = `${branch_name}_${short_id()}`;
+    const commit_range = await CommitMetadata.range(commit_map);
+    // reverse commit list so that we can cherry-pick in order
+    commit_range.group_list.reverse();
+    let rebase_merge_base = merge_base;
+    let rebase_group_index = 0;
+    for (let i = 0; i < commit_range.group_list.length; i++) {
+        const group = commit_range.group_list[i];
+        if (!group.dirty) {
+            continue;
+        }
+        if (i > 0) {
+            const last_group = commit_range.group_list[i - 1];
+            const last_commit = last_group.commits[last_group.commits.length - 1];
+            rebase_merge_base = last_commit.sha;
+            rebase_group_index = i;
+        }
+        break;
+    }
+    try {
+        // create temporary branch based on merge base
+        await cli(`git checkout -b ${temp_branch_name} ${rebase_merge_base}`);
+        for (let i = rebase_group_index; i < commit_range.group_list.length; i++) {
+            const group = commit_range.group_list[i];
+            invariant(group.base, "group.base must exist");
+            // cherry-pick and amend commits one by one
+            for (const commit of group.commits) {
+                await cli(`git cherry-pick ${commit.sha}`);
+                if (commit.branch_id !== group.id) {
+                    const new_message = await Metadata.write(commit.message, group.id);
+                    await cli(`git commit --amend -m "${new_message}"`);
+                }
+            }
+            actions.output(React.createElement(Ink.Text, { color: "yellow", wrap: "truncate-end" },
+                "Syncing ",
+                React.createElement(Brackets, null, group.pr?.title || group.id),
+                "..."));
+            if (!props.skipSync) {
+                // push to origin since github requires commit shas to line up perfectly
+                await cli(`git push -f origin HEAD:${group.id}`);
+                if (group.pr) {
+                    // ensure base matches pr in github
+                    await github.pr_base(group.id, group.base);
+                }
+                else {
+                    // delete local group branch if leftover
+                    await cli(`git branch -D ${group.id}`, { ignoreExitCode: true });
+                    // move to temporary branch for creating pr
+                    await cli(`git checkout -b ${group.id}`);
+                    // create pr in github
+                    await github.pr_create(group.id, group.base);
+                    // move back to temp branch
+                    await cli(`git checkout ${temp_branch_name}`);
+                }
+            }
+        }
+        // after all commits have been cherry-picked and amended
+        // move the branch pointer to the newly created temporary branch
+        // now we are in locally in sync with github and on the original branch
+        await cli(`git branch -f ${branch_name} ${temp_branch_name}`);
+        restore_git();
+        actions.set((state) => {
+            state.step = "post-rebase-status";
+        });
+    }
+    catch (err) {
+        actions.output(React.createElement(Ink.Text, { color: "#ef4444" }, "Error during rebase."));
+        if (err instanceof Error) {
+            actions.debug(React.createElement(Ink.Text, { color: "#ef4444" }, err.message));
+        }
+        handle_exit();
+    }
+    // cleanup git operations if cancelled during manual rebase
+    function restore_git() {
+        // signint handler MUST run synchronously
+        // trying to use `await cli(...)` here will silently fail since
+        // all children processes receive the SIGINT signal
+        const spawn_options = { ignoreExitCode: true };
+        // always put self back in original branch
+        cli.sync(`git checkout ${branch_name}`, spawn_options);
+        // ...and cleanup temporary branch
+        cli.sync(`git branch -D ${temp_branch_name}`, spawn_options);
+        if (commit_range) {
+            // ...and cleanup pr group branches
+            for (const group of commit_range.group_list) {
+                cli.sync(`git branch -D ${group.id}`, spawn_options);
+            }
+        }
+    }
+    function handle_exit() {
+        actions.output(React.createElement(Ink.Text, { color: "yellow" },
+            "Restoring ",
+            React.createElement(Brackets, null, branch_name),
+            "..."));
+        restore_git();
+        actions.output(React.createElement(Ink.Text, { color: "yellow" },
+            "Restored ",
+            React.createElement(Brackets, null, branch_name),
+            "."));
+        actions.exit(5);
+    }
+}

package/dist/app/ManualRebase.js

@@ -1,13 +1,14 @@
 import * as React from "react";
 import * as Ink from "ink";
-import { v4 as uuid_v4 } from "uuid";
 import * as CommitMetadata from "../core/CommitMetadata.js";
 import * as Metadata from "../core/Metadata.js";
 import { cli } from "../core/cli.js";
 import * as github from "../core/github.js";
 import { invariant } from "../core/invariant.js";
+import { short_id } from "../core/short_id.js";
 import { Await } from "./Await.js";
 import { Brackets } from "./Brackets.js";
+import { FormatText } from "./FormatText.js";
 import { Store } from "./Store.js";
 export function ManualRebase(props) {
     return (React.createElement(Await, { fallback: React.createElement(Ink.Text, { color: "yellow" }, "Rebasing commits..."), function: () => run(props) }));
@@ -15,17 +16,18 @@ export function ManualRebase(props) {
 async function run(props) {
     const state = Store.getState();
     const actions = state.actions;
+    const argv = state.argv;
     const branch_name = state.branch_name;
     const merge_base = state.merge_base;
     const commit_map = state.commit_map;
+    invariant(argv, "argv must exist");
     invariant(branch_name, "branch_name must exist");
     invariant(merge_base, "merge_base must exist");
     invariant(commit_map, "commit_map must exist");
     // always listen for SIGINT event and restore git state
     process.once("SIGINT", handle_exit);
-    const temp_branch_name = `${branch_name}_${uuid_v4()}`;
-    let commit_range;
-    commit_range = await CommitMetadata.range(commit_map);
+    const temp_branch_name = `${branch_name}_${short_id()}`;
+    const commit_range = await CommitMetadata.range(commit_map);
     // reverse commit list so that we can cherry-pick in order
     commit_range.group_list.reverse();
     let rebase_merge_base = merge_base;
@@ -57,13 +59,16 @@ async function run(props) {
                     await cli(`git commit --amend -m "${new_message}"`);
                 }
             }
-            actions.output(React.createElement(Ink.Text, { color: "yellow", wrap: "truncate-end" },
-                "Syncing ",
-                React.createElement(Brackets, null, group.pr?.title || group.id),
-                "..."));
+            actions.output(React.createElement(FormatText, { wrapper: React.createElement(Ink.Text, { color: "yellow", wrap: "truncate-end" }), message: "Syncing {group}\u2026", values: {
+                    group: (React.createElement(Brackets, null, group.pr?.title || group.title || group.id)),
+                } }));
             if (!props.skipSync) {
                 // push to origin since github requires commit shas to line up perfectly
-                await cli(`git push -f origin HEAD:${group.id}`);
+                const git_push_command = [`git push -f origin HEAD:${group.id}`];
+                if (argv["no-verify"]) {
+                    git_push_command.push("--no-verify");
+                }
+                await cli(git_push_command.join(" "));
                 if (group.pr) {
                     // ensure base matches pr in github
                     await github.pr_base(group.id, group.base);
@@ -74,7 +79,11 @@ async function run(props) {
                     // move to temporary branch for creating pr
                     await cli(`git checkout -b ${group.id}`);
                     // create pr in github
-                    await github.pr_create(group.id, group.base);
+                    await github.pr_create({
+                        branch: group.id,
+                        base: group.base,
+                        title: group.title,
+                    });
                     // move back to temp branch
                     await cli(`git checkout ${temp_branch_name}`);
                 }
@@ -90,9 +99,11 @@ async function run(props) {
         });
     }
     catch (err) {
-        actions.output(React.createElement(Ink.Text, { color: "#ef4444" }, "Error during rebase."));
+        actions.error("Unable to rebase.");
         if (err instanceof Error) {
-            actions.debug(React.createElement(Ink.Text, { color: "#ef4444" }, err.message));
+            if (actions.isDebug()) {
+                actions.error(err.message);
+            }
         }
         handle_exit();
     }

package/dist/app/MultiSelect.js

@@ -87,7 +87,7 @@ export function MultiSelect(props) {
         const active = i === index;
         const selected = selected_set.has(i);
         const disabled = item.disabled || false;
-        return (React.createElement(ItemRow, { key: item.label, label: item.label, active: active, selected: selected, disabled: disabled }));
+        return (React.createElement(ItemRow, { key: item.label, label: item.label, active: active, selected: selected, disabled: disabled, maxWidth: props.maxWidth }));
     })));
 }
 function ItemRow(props) {
@@ -111,7 +111,7 @@ function ItemRow(props) {
     }
     return (React.createElement(Ink.Box, { flexDirection: "row", gap: 1 },
         React.createElement(Radio, { selected: props.selected, disabled: props.disabled }),
-        React.createElement(Ink.Box, null,
+        React.createElement(Ink.Box, { width: props.maxWidth },
             React.createElement(Ink.Text, { bold: bold, underline: underline, color: color, dimColor: dimColor, wrap: "truncate-end" }, props.label))));
 }
 function Radio(props) {

package/dist/app/NPMAutoUpdate.js

@@ -0,0 +1,34 @@
+import * as React from "react";
+import fs from "node:fs";
+import * as Ink from "ink";
+export function AutoUpdate(props) {
+    const props_ref = React.useRef(props);
+    props_ref.current = props;
+    React.useEffect(() => {
+        async function auto_update() {
+            try {
+                const npm_res = await fetch(`https://registry.npmjs.org/${props.name}`);
+                const npm_json = await npm_res.json();
+                const latest = npm_json["dist-tags"].latest;
+                console.debug({ latest });
+                const script_path = process.argv[1];
+                const path_list = [process.argv[1]];
+                const real_path_list = path_list.map((p) => fs.realpathSync(p));
+                console.debug({ real_path_list, path_list });
+                // const winner = await Promise.race([
+                //   sleep(Math.random() * 5000).then(() => "a"),
+                //   sleep(Math.random() * 5000).then(() => "b"),
+                // ]);
+                // console.debug({ winner });
+            }
+            catch (err) {
+                console.debug({ err });
+                // handled by catch below
+                throw err;
+            }
+        }
+        const onError = props_ref.current.onError || (() => { });
+        auto_update().catch(onError);
+    }, []);
+    return React.createElement(Ink.Text, { color: "yellow" }, "Checking for latest version...");
+}

package/dist/app/Parens copy.js

@@ -1,7 +1,7 @@
 import * as React from "react";
 import * as Ink from "ink";
 export function Parens(props) {
-    const color = "#06b6d4";
+    const color = "#38bdf8";
     return (React.createElement(Ink.Text, null,
         React.createElement(Ink.Text, { color: color }, "("),
         props.children,

package/dist/app/PreLocalMergeRebase.js

@@ -0,0 +1,21 @@
+import * as React from "react";
+import { invariant } from "../core/invariant.js";
+import { Store } from "./Store.js";
+import { YesNoPrompt } from "./YesNoPrompt.js";
+export function PreLocalMergeRebase() {
+    const actions = Store.useActions();
+    const argv = Store.useState((state) => state.argv);
+    invariant(argv, "argv must exist");
+    React.useEffect(() => {
+        if (argv.force) {
+            Store.setState((state) => {
+                state.step = "local-merge-rebase";
+            });
+        }
+    }, [argv]);
+    return (React.createElement(YesNoPrompt, { message: "Local branch needs to be rebased, would you like to rebase to update your local branch?", onYes: () => {
+            actions.set((state) => {
+                state.step = "local-merge-rebase";
+            });
+        }, onNo: () => actions.exit(0) }));
+}

package/dist/app/PreSelectCommitRanges copy.js

@@ -1,29 +1,21 @@
 import * as React from "react";
-import * as Ink from "ink";
-import { Exit } from "./Exit.js";
+import { invariant } from "../core/invariant.js";
 import { Store } from "./Store.js";
+import { YesNoPrompt } from "./YesNoPrompt.js";
 export function PreSelectCommitRanges() {
     const actions = Store.useActions();
-    Ink.useInput((input) => {
-        const inputLower = input.toLowerCase();
-        switch (inputLower) {
-            case "n":
-                return actions.output(React.createElement(Exit, { clear: true, code: 0 }));
-            case "y":
-                return actions.set((state) => {
-                    state.step = "select-commit-ranges";
-                });
+    const argv = Store.useState((state) => state.argv);
+    invariant(argv, "argv must exist");
+    React.useEffect(() => {
+        if (argv.force) {
+            Store.setState((state) => {
+                state.step = "select-commit-ranges";
+            });
         }
-    });
-    return (React.createElement(Ink.Box, { flexDirection: "column" },
-        React.createElement(Ink.Box, { marginTop: 1 },
-            React.createElement(Ink.Text, { color: "yellow" }, "Some commits are new or outdated, would you like to select new commit ranges?"),
-            React.createElement(Ink.Text, null, " "),
-            React.createElement(Ink.Text, { color: "blue" },
-                "(",
-                React.createElement(Ink.Text, { color: "gray" },
-                    React.createElement(Ink.Text, { color: "green", dimColor: true }, "Y"),
-                    "/",
-                    React.createElement(Ink.Text, { color: "red", dimColor: true }, "n")),
-                ")"))));
+    }, [argv]);
+    return (React.createElement(YesNoPrompt, { message: "Some commits are new or outdated, would you like to select new commit ranges?", onYes: () => {
+            actions.set((state) => {
+                state.step = "select-commit-ranges";
+            });
+        }, onNo: () => actions.exit(0) }));
 }

package/dist/app/PreSelectCommitRanges.js

@@ -1,8 +1,18 @@
 import * as React from "react";
+import { invariant } from "../core/invariant.js";
 import { Store } from "./Store.js";
 import { YesNoPrompt } from "./YesNoPrompt.js";
 export function PreSelectCommitRanges() {
     const actions = Store.useActions();
+    const argv = Store.useState((state) => state.argv);
+    invariant(argv, "argv must exist");
+    React.useEffect(() => {
+        if (argv.force) {
+            Store.setState((state) => {
+                state.step = "select-commit-ranges";
+            });
+        }
+    }, [argv]);
     return (React.createElement(YesNoPrompt, { message: "Some commits are new or outdated, would you like to select new commit ranges?", onYes: () => {
             actions.set((state) => {
                 state.step = "select-commit-ranges";

package/dist/app/SelectCommitRanges.js

@@ -1,12 +1,14 @@
 import * as React from "react";
 import * as Ink from "ink";
-import { v4 as uuid_v4 } from "uuid";
 import { invariant } from "../core/invariant.js";
+import { short_id } from "../core/short_id.js";
 import { wrap_index } from "../core/wrap_index.js";
+import { Brackets } from "./Brackets.js";
 import { FormatText } from "./FormatText.js";
 import { MultiSelect } from "./MultiSelect.js";
 import { Parens } from "./Parens.js";
 import { Store } from "./Store.js";
+import { TextInput } from "./TextInput.js";
 export function SelectCommitRanges() {
     const commit_range = Store.useState((state) => state.commit_range);
     invariant(commit_range, "commit_range must exist");
@@ -14,11 +16,10 @@ export function SelectCommitRanges() {
 }
 function SelectCommitRangesInternal(props) {
     const actions = Store.useActions();
-    const [new_group_list, create_group] = React.useReducer((group_list, id) => {
-        return group_list.concat({
-            id,
-            title: id,
-        });
+    const [selected_group_id, set_selected_group_id] = React.useState(props.commit_range.UNASSIGNED);
+    const [group_input, set_group_input] = React.useState(false);
+    const [new_group_list, create_group] = React.useReducer((group_list, group) => {
+        return group_list.concat(group);
     }, []);
     const [commit_map, update_commit_map] = React.useReducer((map, args) => {
         map.set(args.key, args.value);
@@ -32,7 +33,6 @@ function SelectCommitRangesInternal(props) {
     });
     const group_list = [];
     // detect if there are unassigned commits
-    // unshift an unassigned group if so to collect them
     let unassigned_count = 0;
     for (const [, group_id] of commit_map.entries()) {
         if (group_id === null) {
@@ -40,53 +40,56 @@ function SelectCommitRangesInternal(props) {
             unassigned_count++;
         }
     }
-    if (unassigned_count) {
-        group_list.push({
-            id: "unassigned",
-            title: "Unassigned",
-        });
-    }
     group_list.push(...new_group_list);
+    const total_group_count = new_group_list.length + props.commit_range.group_list.length;
     for (const group of props.commit_range.group_list) {
-        if (group.id !== props.commit_range.UNASSIGNED) {
-            group_list.push({
-                id: group.id,
-                title: group.pr?.title || group.id,
-            });
+        if (group.pr?.state === "MERGED")
+            continue;
+        if (group.id === props.commit_range.UNASSIGNED) {
+            // only include unassigned group when there are no other groups
+            if (total_group_count === 1) {
+                group_list.push({
+                    id: group.id,
+                    title: "Unassigned",
+                });
+            }
+            continue;
         }
+        group_list.push({
+            id: group.id,
+            title: group.pr?.title || group.id,
+        });
+    }
+    let current_index = group_list.findIndex((g) => g.id === selected_group_id);
+    if (current_index === -1) {
+        current_index = 0;
     }
-    const [selected_group_id, set_selected_group_id] = React.useState(group_list[0].id);
-    const isUnassigned = selected_group_id === "unassigned";
-    const current_index = group_list.findIndex((g) => g.id === selected_group_id);
     Ink.useInput((input, key) => {
         const inputLower = input.toLowerCase();
         const hasUnassignedCommits = unassigned_count > 0;
-        if (!hasUnassignedCommits && (inputLower === "r" || inputLower === "s")) {
+        if (!hasUnassignedCommits && inputLower === "s") {
             actions.set((state) => {
                 state.commit_map = {};
                 for (const [sha, id] of commit_map.entries()) {
                     if (id) {
-                        state.commit_map[sha] = id;
+                        const group = new_group_list.find((g) => g.id === id);
+                        // console.debug({ sha, id, group });
+                        if (group) {
+                            state.commit_map[sha] = group;
+                        }
                     }
                 }
                 switch (inputLower) {
                     case "s":
                         state.step = "manual-rebase";
                         break;
-                    case "r":
-                        state.step = "manual-rebase-no-sync";
                 }
             });
             return;
         }
         // only allow create when on unassigned group
         if (hasUnassignedCommits && inputLower === "c") {
-            const id = uuid_v4();
-            actions.output(React.createElement(Ink.Box, null,
-                React.createElement(Ink.Text, { dimColor: true }, "Created new group "),
-                React.createElement(Ink.Text, { color: "blueBright" }, id)));
-            create_group(id);
-            set_selected_group_id(id);
+            set_group_input(true);
             return;
         }
         if (key.leftArrow) {
@@ -101,21 +104,11 @@ function SelectCommitRangesInternal(props) {
         }
     });
     const group = group_list[current_index];
-    // <-  (2/4) #742 Title A ->
-    const max_group_label_width = 64;
-    let group_title_width = max_group_label_width;
-    const left_arrow = `${SYMBOL.left} `;
-    const right_arrow = ` ${SYMBOL.right}`;
-    const group_position = `(${current_index + 1}/${group_list.length}) `;
-    const title = group.title || "Unassigned";
-    group_title_width -= group_position.length;
-    group_title_width -= left_arrow.length + right_arrow.length;
-    group_title_width = Math.min(title.length, group_title_width);
     const items = props.commit_range.commit_list.map((commit) => {
         const commit_metadata_id = commit_map.get(commit.sha);
         const selected = commit_metadata_id !== null;
         let disabled;
-        if (isUnassigned) {
+        if (group.id === props.commit_range.UNASSIGNED) {
             disabled = true;
         }
         else {
@@ -129,11 +122,25 @@ function SelectCommitRangesInternal(props) {
         };
     });
     items.reverse();
-    // console.debug({ current_index, group, isUnassigned });
+    // <-  (2/4) #742 Title A ->
+    const left_arrow = `${SYMBOL.left} `;
+    const right_arrow = ` ${SYMBOL.right}`;
+    const group_position = `(${current_index + 1}/${group_list.length}) `;
+    const max_group_label_width = 80;
+    let group_title_width = max_group_label_width;
+    group_title_width -= group_position.length;
+    group_title_width -= left_arrow.length + right_arrow.length;
+    group_title_width = Math.min(group.title.length, group_title_width);
+    let max_item_width = max_group_label_width;
+    max_item_width -= left_arrow.length + right_arrow.length;
     return (React.createElement(Ink.Box, { flexDirection: "column" },
         React.createElement(Ink.Box, { height: 1 }),
-        React.createElement(MultiSelect, { key: group.id, items: items, onSelect: (args) => {
+        React.createElement(MultiSelect, { key: group.id, items: items, maxWidth: max_item_width, onSelect: (args) => {
                 // console.debug("onSelect", args);
+                if (group_input) {
+                    // console.debug("group_input is true, ignoring onSelect");
+                    return;
+                }
                 const key = args.item.sha;
                 let value;
                 if (args.selected) {
@@ -149,7 +156,7 @@ function SelectCommitRangesInternal(props) {
             React.createElement(Ink.Text, null, left_arrow),
             React.createElement(Ink.Text, null, group_position),
             React.createElement(Ink.Box, { width: group_title_width, justifyContent: "center" },
-                React.createElement(Ink.Text, { wrap: "truncate-end" }, title)),
+                React.createElement(Ink.Text, { wrap: "truncate-end" }, group.title)),
             React.createElement(Ink.Text, null, right_arrow)),
         React.createElement(Ink.Box, { height: 1 }),
         unassigned_count > 0 ? (React.createElement(FormatText, { wrapper: React.createElement(Ink.Text, { color: "gray" }), message: "{count} unassigned commits, press {c} to {create} a new group", values: {
@@ -159,34 +166,42 @@ function SelectCommitRangesInternal(props) {
                     React.createElement(Parens, null, "c"),
                     "reate")),
             } })) : (React.createElement(React.Fragment, null,
-            React.createElement(Ink.Text, null,
-                "🎉 Done! Press ",
-                React.createElement(Ink.Text, { bold: true, color: "#22c55e" }, "s"),
-                " to ",
-                React.createElement(Ink.Text, { bold: true, color: "#22c55e" },
-                    React.createElement(Parens, null, "s"),
-                    "ync"),
-                " the commits to Github"),
-            React.createElement(Ink.Text, { color: "gray" },
-                React.createElement(Ink.Text, null, "Press "),
-                React.createElement(Ink.Text, { bold: true, color: "#22c55e" }, "r"),
-                " to locally ",
-                React.createElement(Ink.Text, { bold: true, color: "#22c55e" },
-                    React.createElement(Parens, null, "r"),
-                    "ebase"),
-                " only"))),
+            React.createElement(FormatText, { wrapper: React.createElement(Ink.Text, null), message: "\uD83C\uDF89 Done! Press {s} to {sync} the commits to Github", values: {
+                    s: (React.createElement(Ink.Text, { bold: true, color: "#22c55e" }, "s")),
+                    sync: (React.createElement(Ink.Text, { bold: true, color: "#22c55e" },
+                        React.createElement(Parens, null, "s"),
+                        "ync")),
+                } }))),
+        !group_input ? null : (React.createElement(React.Fragment, null,
+            React.createElement(Ink.Box, { height: 1 }),
+            React.createElement(FormatText, { wrapper: React.createElement(Ink.Text, { color: "gray" }), message: "Enter a title for the PR {note}", values: {
+                    note: (React.createElement(Parens, null,
+                        React.createElement(FormatText, { message: "press {enter} to submit", values: {
+                                enter: (React.createElement(Ink.Text, { bold: true, color: "#22c55e" }, SYMBOL.enter)),
+                            } }))),
+                } }),
+            React.createElement(TextInput, { onSubmit: submit_group_input }),
+            React.createElement(Ink.Box, { height: 1 }))),
         React.createElement(Ink.Box, null,
-            React.createElement(Ink.Text, { color: "gray" },
-                React.createElement(Ink.Text, null, "Press "),
-                React.createElement(Ink.Text, { bold: true, color: "#22c55e" }, SYMBOL.left),
-                " and ",
-                React.createElement(Ink.Text, { bold: true, color: "#22c55e" }, SYMBOL.right),
-                " to view PR groups")),
+            React.createElement(FormatText, { wrapper: React.createElement(Ink.Text, { color: "gray" }), message: "Press {left} and {right} to view PR groups", values: {
+                    left: (React.createElement(Ink.Text, { bold: true, color: "#22c55e" }, SYMBOL.left)),
+                    right: (React.createElement(Ink.Text, { bold: true, color: "#22c55e" }, SYMBOL.right)),
+                } })),
         React.createElement(Ink.Box, null,
-            React.createElement(Ink.Text, { color: "gray" },
-                React.createElement(Ink.Text, null, "Press "),
-                React.createElement(Ink.Text, { bold: true, color: "#22c55e" }, SYMBOL.enter),
-                " to toggle commit selection"))));
+            React.createElement(FormatText, { wrapper: React.createElement(Ink.Text, { color: "gray" }), message: "Press {enter} to toggle commit selection", values: {
+                    enter: (React.createElement(Ink.Text, { bold: true, color: "#22c55e" }, SYMBOL.enter)),
+                } }))));
+    function submit_group_input(title) {
+        const id = short_id();
+        actions.output(React.createElement(FormatText, { wrapper: React.createElement(Ink.Text, { dimColor: true }), message: "Created new group {group} {note}", values: {
+                group: React.createElement(Brackets, null, title),
+                note: React.createElement(Parens, null, id),
+            } }));
+        // console.debug("submit_group_input", { title, id });
+        create_group({ id, title });
+        set_selected_group_id(id);
+        set_group_input(false);
+    }
 }
 const SYMBOL = {
     left: "←",