save work attempting to swap textarea

src/app/workspace/cmdinput/autocomplete.tsx

@@ -0,0 +1,28 @@
+// Copyright 2024, Command Line Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { SuggestionBlob } from "@/autocomplete/runtime/model";
+import { GlobalModel } from "@/models";
+import cn from "classnames";
+import { useMemo } from "react";
+
+export const AutocompleteSuggestions = async (props: { curLine: string }) => {
+    const inputModel = GlobalModel.inputModel;
+    const suggestions = await useMemo(async () => await inputModel.getSuggestions(), [props.curLine]);
+
+    if (!suggestions) {
+        return null;
+    }
+
+    const items = suggestions.suggestions.map((s) => `${s.icon} ${s.name}`);
+
+    return (
+        <div className="autocomplete-suggestions">
+            {items.map((item, idx) => (
+                <div key={idx} className={cn("autocomplete-item")}>
+                    {item}
+                </div>
+            ))}
+        </div>
+    );
+};

src/app/workspace/cmdinput/cmdinput.less

@@ -92,6 +92,8 @@
 
             .textareainput-div {
                 position: relative;
+                display: flex;
+                flex-direction: column;
 
                 &.control {
                     padding: var(--termpad) 0;
@@ -121,6 +123,11 @@
                 font-size: var(--termfontsize);
                 border: none;
                 box-shadow: none;
+                width: fit-content;
+            }
+
+            .suggestion {
+                width: fit-content;
             }
 
             input.history-input {

src/autocomplete/runtime/utils.ts

@@ -9,8 +9,6 @@ export type ExecuteShellCommandTTYResult = {
     code: number | null;
 };
 
-const pathSep = getApi().pathSep();
-
 export const buildExecuteShellCommand =
     (timeout: number): Fig.ExecuteCommandFunction =>
     async ({ command, env, args, cwd }: Fig.ExecuteCommandInput): Promise<Fig.ExecuteCommandOutput> => {
@@ -35,6 +33,6 @@ export const resolveCwd = async (
 ): Promise<{ cwd: string; pathy: boolean; complete: boolean }> => {
     if (cmdToken == null) return { cwd, pathy: false, complete: false };
     const { token } = cmdToken;
-    const sep = shell == Shell.Bash ? "/" : pathSep;
+    const sep = shell == Shell.Bash ? "/" : getApi()?.pathSep();
     return { cwd: cwd, pathy: true, complete: token.endsWith(sep) };
 };

src/models/input.ts

@@ -7,8 +7,11 @@ import { boundMethod } from "autobind-decorator";
 import { isBlank } from "@/util/util";
 import * as appconst from "@/app/appconst";
 import { Model } from "./model";
-import { GlobalCommandRunner } from "./global";
+import { GlobalCommandRunner, GlobalModel } from "./global";
 import { app } from "electron";
+import { SuggestionBlob } from "@/autocomplete/runtime/model";
+import { useMemo } from "react";
+import { Shell, getSuggestions } from "@/autocomplete";
 
 function getDefaultHistoryQueryOpts(): HistoryQueryOpts {
     return {
@@ -801,6 +804,12 @@ class InputModel {
         })();
     }
 
+    getSuggestions(): Promise<SuggestionBlob> {
+        const festate = GlobalModel.getCurRemoteInstance().festate;
+
+        return getSuggestions(this.getCurLine(), festate.cwd, festate.shelltype as Shell);
+    }
+
     getCurLine(): string {
         const hidx = this.historyIndex.get();
         if (hidx < this.modHistory.length && this.modHistory[hidx] != null) {