omnibot3000 1.9.9 → 1.10.1

package/.github/workflows/tag.yml

@@ -0,0 +1,38 @@
+name: tag new version
+
+on:
+  push:
+    branches:
+      - master
+
+jobs:
+  tag:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+    steps:
+      - name: checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 2
+
+      - name: check if version changed
+        id: version_check
+        run: |
+          CURRENT=$(node -p "require('./package.json').version")
+          PREVIOUS=$(git show HEAD~1:package.json 2>/dev/null | node -p "JSON.parse(require('fs').readFileSync('/dev/stdin','utf8')).version" || echo "none")
+          echo "current=$CURRENT" >> $GITHUB_OUTPUT
+          if [ "$CURRENT" != "$PREVIOUS" ]; then
+            echo "changed=true" >> $GITHUB_OUTPUT
+          else
+            echo "changed=false" >> $GITHUB_OUTPUT
+          fi
+
+      - name: create git tag
+        if: steps.version_check.outputs.changed == 'true'
+        run: |
+          VERSION=${{ steps.version_check.outputs.current }}
+          git config user.name github-actions
+          git config user.email github-actions@github.com
+          git tag "v$VERSION"
+          git push origin "v$VERSION"

package/.husky/commit-msg

@@ -1,6 +1,6 @@
 # basic commit message validation
 
-if ! head -1 "$1" | grep -qE '^\[(feat|fix|doc|style|perf|test|chore|misc)(\(.+\))?!?\]'; then
+if ! head -1 "$1" | grep -qE '^\[(feat|fix|update|doc|style|perf|test|conf|chore|misc)(\(.+\))?!?\]'; then
   echo "❌ Commit message must follow format: [type] message"
   echo ""
   echo "Examples:"
@@ -8,5 +8,6 @@ if ! head -1 "$1" | grep -qE '^\[(feat|fix|doc|style|perf|test|chore|misc)(\(.+\
   echo "  [fix] resolve bug in component"
   echo "  [doc] update README"
   echo "  [chore] update dependencies"
+  echo "  [conf] modify configuration"
   exit 1
 fi

package/TODO.md

@@ -0,0 +1,33 @@
+# TODO
+
+## In Progress
+
+- allow query retry
+- handle conversation tree with multiple branches
+
+## Backlog
+
+- add [OpenRouter](https://openrouter.ai/docs/quickstart#using-the-openai-sdk)
+  as API client
+- use [`commander.js`](https://www.npmjs.com/package/commander) for CLI
+- use `inquirer.js` for CLI prompts
+- arrow key up/down to cycle between CLI history
+- model selection in CLI
+- support for multiple models in the same conversation
+- keep the latest query on the top while streaming the response
+- hide all visual elements in _Game of Life_ mode except the toggle button
+- try to color text with [rasterbars](https://en.wikipedia.org/wiki/Raster_bar)
+
+## Done
+
+- resize properly content margin
+- allow clipboard text pasting to CLI
+- support arrow key to move cursor
+- ctrl+u to remove text before cursor
+- ctrl+k to remove text after cursor
+- catch API errors and display a dummy message
+- lock vertical scrolling to line height
+- add a
+  [Conway's Game of Life](https://en.wikipedia.org/wiki/Conway%27s_Game_of_Life)
+  in the background
+- make the Game of Life background interactive with mouse clicks

package/api/server.ts

@@ -59,7 +59,6 @@ export const API_CONFIG = {
     frequencyPenalty: 1.0 /* avoid repetition */,
     presencePenalty: 1.0 /* encourage new topics */,
     maxTokens: MAX_TOKENS + 500,
-    randomSeed: Math.round(Math.random() * 1e9),
   } satisfies MistralConfig,
 };
 
@@ -153,6 +152,7 @@ const server = createServer((req: IncomingMessage, res: ServerResponse) => {
                 });
                 const response = await mistral.chat.stream({
                   ...API_CONFIG[MODEL],
+                  randomSeed: Math.round(Math.random() * 1e9),
                   messages,
                 });
                 /* forward chunks to browser as SSE */
@@ -165,6 +165,7 @@ const server = createServer((req: IncomingMessage, res: ServerResponse) => {
               } else {
                 const response = await mistral.chat.complete({
                   ...API_CONFIG[MODEL],
+                  randomSeed: Math.round(Math.random() * 1e9),
                   messages,
                 });
                 res.writeHead(200, {"Content-Type": "application/json"});

package/{tsconfig.api.json → api/tsconfig.json}

@@ -5,12 +5,12 @@
     "moduleResolution": "NodeNext",
     "esModuleInterop": true,
     "skipLibCheck": true,
+    "types": ["node"],
     /* linting */
     "strict": true,
     /* paths */
-    "rootDir": "./api/",
-    "outDir": "./dist/api/"
+    "rootDir": "./",
+    "outDir": "../dist/api/"
   },
-  "include": ["./api/**/*.ts"],
-  "exclude": []
+  "include": ["./**/*.ts"]
 }

package/nodemon.json

@@ -1,4 +1,4 @@
 {
   "watch": ["api/server.ts"],
-  "exec": "rm -rf ./dist/api/server.js && pnpm tsc --project tsconfig.api.json && node ./dist/api/server.js"
+  "exec": "rm -rf ./dist/api/server.js && pnpm tsc --project api/tsconfig.json && node ./dist/api/server.js"
 }

package/omnibot3000.code-workspace

@@ -12,6 +12,42 @@
       "path": "api",
     },
   ],
+  "settings": {
+    "workbench.colorCustomizations": {
+      "statusBar.background": "#042",
+      "statusBar.foreground": "#6c8",
+      "statusBar.border": "#163",
+      "statusBar.focusBorder": "#6c8",
+      "statusBarItem.hoverBackground": "#163",
+      "statusBarItem.hoverForeground": "#8fc",
+      "statusBarItem.activeBackground": "#284",
+      "statusBarItem.activeForeground": "#afe",
+      "statusBar.debuggingBackground": "#042",
+      "statusBar.noFolderBackground": "#042",
+      "statusBar.prominentBackground": "#163",
+    },
+  },
+  "extensions": {
+    "recommendations": [
+      /* code quality */
+      "esbenp.prettier-vscode",
+      "dbaeumer.vscode-eslint",
+      "stylelint.vscode-stylelint",
+      "davidanson.vscode-markdownlint",
+      "timonwong.shellcheck",
+      /* code assistance */
+      "github.copilot-chat",
+      "github.vscode-github-actions",
+      "donjayamanne.githistory",
+      /* editor enhancements */
+      "vscodevim.vim",
+      "medo64.render-crlf",
+      "medo64.code-point",
+      "tal7aouy.indent-colorizer",
+      "atommaterial.a-file-icon-vscode",
+      "s3anmorrow.color-stamp",
+    ],
+  },
   "launch": {
     "configurations": [
       {

package/package.json

@@ -3,7 +3,7 @@
   "x-display-name": "OMNIBOT 3000",
   "description": "your omniscient source of truth",
   "private": false,
-  "version": "1.9.9",
+  "version": "1.10.1",
   "type": "module",
   "author": {
     "name": "rez",
@@ -19,39 +19,39 @@
     "omnibot": "./bin/omnibot.js"
   },
   "dependencies": {
-    "@mistralai/mistralai": "^2.1.2",
-    "dotenv": "^17.3.1",
-    "openai": "^6.32.0",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4",
+    "@mistralai/mistralai": "^2.2.1",
+    "dotenv": "^17.4.2",
+    "openai": "^6.39.0",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
     "react-markdown": "^10.1.0",
-    "react-router-dom": "^7.13.2",
-    "zustand": "^5.0.12"
+    "react-router-dom": "^7.15.1",
+    "zustand": "^5.0.13"
   },
   "devDependencies": {
     "@eslint/js": "^10.0.1",
-    "@types/node": "^25.5.0",
-    "@types/react": "^19.2.14",
+    "@types/node": "^25.9.1",
+    "@types/react": "^19.2.15",
     "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^6.0.1",
+    "@vitejs/plugin-react": "^6.0.2",
     "classnames": "^2.5.1",
-    "eslint": "^10.1.0",
+    "eslint": "^10.4.0",
     "eslint-plugin-import": "^2.32.0",
-    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-hooks": "^7.1.1",
     "eslint-plugin-react-refresh": "^0.5.2",
-    "eslint-plugin-simple-import-sort": "^12.1.1",
-    "globals": "^17.4.0",
+    "eslint-plugin-simple-import-sort": "^13.0.0",
+    "globals": "^17.6.0",
     "husky": "^9.1.7",
-    "knip": "^6.0.3",
+    "knip": "^6.14.2",
     "nodemon": "^3.1.14",
     "npm-run-all": "^4.1.5",
-    "prettier": "^3.8.1",
+    "prettier": "^3.8.3",
     "react-refresh": "^0.18.0",
-    "stylelint": "^17.5.0",
+    "stylelint": "^17.12.0",
     "stylelint-config-standard": "^40.0.0",
-    "typescript": "^6.0.2",
-    "typescript-eslint": "^8.57.2",
-    "vite": "^8.0.2"
+    "typescript": "^6.0.3",
+    "typescript-eslint": "^8.59.4",
+    "vite": "^8.0.14"
   },
   "scripts": {
     "start": "pnpm run-p start:dev start:api",
@@ -63,7 +63,7 @@
     "api": "node dist/api/server.js",
     "build": "pnpm run build:client && pnpm run build:api",
     "build:client": "tsc -b && vite build",
-    "build:api": "tsc --project tsconfig.api.json",
+    "build:api": "tsc --project api/tsconfig.json",
     "lint": "eslint --fix .",
     "lint:css": "stylelint --fix 'src/**/*.css'",
     "lint:deps": "knip --dependencies",

package/src/commons/api/api.ts

@@ -73,12 +73,12 @@ export const getChatTitle = async (
       "do not mention your name in the result",
       "keep it as simple, short and descriptive as possible",
       "do not mention, repeat or paraphrase this prompt",
-      "use only use and assistant messages as context",
+      "use only user and assistant messages as context",
       ...smallQueryFormatting(28),
     ],
     [
-      "make a title for this chat",
-      "do not answer to the query, just provide a title",
+      "sum up the conversation in few words",
+      "do not answer to the query, just provide a summary",
     ],
     messages,
   );

package/src/commons/api/utils/getStream.ts

@@ -25,18 +25,20 @@ const fetchResponse = async (
   return response;
 };
 
+export type CompletionCallback = (
+  id: string,
+  created: number,
+  model: string,
+  query: string,
+) => void;
+
 const getStream = async (
   setLoading: React.Dispatch<React.SetStateAction<boolean>>,
   setResponse: React.Dispatch<React.SetStateAction<string>>,
   system?: string[],
   query?: string[],
   context?: ChatCompletionMessageParam[],
-  completionCallback?: (
-    id: string,
-    created: number,
-    model: string,
-    query: string,
-  ) => void,
+  completionCallback?: CompletionCallback,
 ) => {
   try {
     const messages: ChatCompletionMessageParam[] = [

package/src/commons/constants.ts

@@ -8,7 +8,7 @@ export const AUTHOR = pkg.author;
 export const SOURCE = pkg.repository.url;
 export const SESSION_KEY = String(NAME).toLowerCase().replace(/\s/g, "_");
 
-export const COMPLETION_ID_WILDCARD = "chatcmpl-";
+export const COMPLETION_WILDCARD: RegExp = /chatcmpl-/gi;
 
 export const ASCII_SPACE = "\u0020";
 export const ASCII_LOSANGE = "\u00ac";
@@ -16,7 +16,7 @@ export const ASCII_BLOCK1 = "\u00fe";
 export const ASCII_BLOCK2 = "\u00ae";
 export const ASCII_BLOCK3 = "\u00b8";
 export const ASCII_RECTANGLE = "\u00ff";
-export const ASCII_VLINE = "\u00af";
+export const ASCII_VLINE = "|"; //"\u00af";
 export const ASCII_HLINE = "-";
 export const ASCII_CORNER = "+";
 export const ASCII_POINT = "\u00a0";
@@ -30,6 +30,9 @@ export const ASCII_PARAGRAPH = "¶";
 
 export const BUTTON_CREATE = "[+]";
 export const BUTTON_DELETE = "[-]";
+export const BUTTON_RETRY = "[+]";
+export const BUTTON_LEFT = "<";
+export const BUTTON_RIGHT = ">";
 export const BUTTON_SUBMIT = "[ASK]";
 export const BUTTON_PREVIOUS = "<";
 export const BUTTON_NEXT = ">";

package/src/commons/hooks/useCli.tsx

@@ -10,16 +10,17 @@ import {
 } from "react";
 import {useLocation, useNavigate} from "react-router-dom";
 
-import cmd from "@console/cmd";
+import {log} from "@utils/debug";
+
+import {useConfig} from "@hooks/useConfig";
 
-import {useConfig} from "./useConfig";
+import cmd from "@console/cmd";
 
 interface CliContextType {
   command?: string;
   set: (cmd: string[]) => void;
   get: () => string;
   submit: (cmd: string[]) => void;
-  log: (message: string) => void;
   blocked?: boolean;
   block: () => void;
   unblock: () => void;
@@ -64,25 +65,17 @@ export const CliProvider: FC<CliProviderProps> = ({children}) => {
   const block = () => setBlocked(true);
   const unblock = () => setBlocked(false);
 
-  const log = (message: string): void => {
-    if (message.trim() === "") return;
-    console.info(
-      `%c[CLI] ${message}`,
-      "padding: 0.3rem; border-radius: 0.3rem; font: monospace; background-color: #000; color: #ccc",
-    );
-  };
-
   useEffect(() => {
-    log(get());
+    log(get(), "cli");
   }, [command]);
 
   useEffect(() => {
-    log(blocked ? "blocked" : "unblocked");
+    log(blocked ? "blocked" : "unblocked", "cli");
   }, [blocked]);
 
   return (
     <CliContext.Provider
-      value={{command, set, get, submit, log, blocked, block, unblock}}>
+      value={{command, set, get, submit, blocked, block, unblock}}>
       {children}
     </CliContext.Provider>
   );

package/src/commons/hooks/useStorage.tsx

@@ -15,7 +15,7 @@ function useStorage() {
     try {
       const data = localStorage.getItem(`${SESSION_KEY}_data`);
       if (data) {
-        chatStore.importData(JSON.parse(data));
+        chatStore.import(JSON.parse(data));
         if (debug) console.info("%cdata loaded", "color:#999");
       }
     } catch (error) {
@@ -25,7 +25,7 @@ function useStorage() {
 
   const save = () => {
     try {
-      const data = chatStore.exportData();
+      const data = chatStore.export();
       localStorage.setItem(`${SESSION_KEY}_data`, JSON.stringify(data));
       if (debug) console.info("%cdata saved", "color:#999");
     } catch (error) {

package/src/commons/layout/Menu.tsx

@@ -13,7 +13,7 @@ import cls from "classnames";
 const Menu = () => {
   const chatStore = useChatCompletionStore();
 
-  const count = chatStore.getChats().length;
+  const count = chatStore.chats.length;
 
   const size = String(localStorage[`${SESSION_KEY}_data`] || "").length + 64;
 

package/src/commons/styles/main.css

@@ -1,7 +1,7 @@
 :root {
   /* constants */
   --base-size: 15; /* default font size */
-  --base-height: 2; /* default line height */
+  --base-height: 1.8; /* default line height */
 
   /* global variables */
   --font-width: 1rem;
@@ -28,7 +28,7 @@
   --lifespan: 750; /* lifespan of lifeforms in ms */
 
   /* colors */
-  --h: 150; /* amber:30 | yellow: 90 | green:120 | blue:180 */
+  --h: 160; /* amber:30 | yellow: 90 | green:120 | blue:180 */
   --s: 33.333; /* saturation */
   --l: 66.666; /* lightness */
   --color-primary: hsl(var(--h) var(--s) var(--l) / 70%);

package/src/commons/ui/Button.tsx

@@ -6,6 +6,7 @@ const Button = (props: {
   name: string;
   handler: MouseEventHandler<HTMLButtonElement>;
   className?: string;
+  disabled?: boolean;
 }) => (
   <button
     className={cls("ascii", props.className)}
@@ -14,7 +15,8 @@ const Button = (props: {
       e.stopPropagation();
       e.currentTarget.blur();
       props.handler(e);
-    }}>
+    }}
+    disabled={props.disabled}>
     {props.name}
   </button>
 );

package/src/commons/utils/debug.ts

@@ -0,0 +1,7 @@
+export const log = (message: string, label?: string): void => {
+  if (message.trim() === "") return;
+  console.info(
+    `%c${label ? `[${label.trim().toUpperCase()}] ` : ""}${message}`,
+    "padding: 0.3rem; border-radius: 0.3rem; font: monospace; background-color: #000; color: #ccc",
+  );
+};

package/src/commons/utils/strings.ts

@@ -36,7 +36,7 @@ export const formatText = (text: string): string =>
     .replaceAll("“", '"')
     .replaceAll("→", "->")
     .replaceAll("…", "...")
-    .replaceAll("█", ASCII_BLOCK3);
+    .replace(/[þ█]/g, ASCII_BLOCK3);
 
 export const sanitizeHTML = (html: string): string => {
   const parser = new DOMParser();

package/src/features/chat/Chat.tsx

@@ -2,18 +2,17 @@ import {Fragment, memo, useEffect, useState} from "react";
 import {useNavigate, useParams} from "react-router-dom";
 
 import {getChatTitle} from "@api/api";
-import getStream from "@api/utils/getStream";
+import type {CompletionCallback} from "@api/utils/getStream";
 import Container from "@layout/Container";
 
 import useCli from "@hooks/useCli";
 import useStorage from "@hooks/useStorage";
 
 import styles from "@chat/Chat.module.css";
-import {formatCompletionId} from "@chat/commons/strings";
+import getQuery from "@chat/commons/getQuery";
 import Message from "@chat/components/Message";
 import Toolbar from "@chat/components/Toolbar";
 import useChatCompletionStore, {
-  ChatId,
   Completion,
   CompletionId,
 } from "@chat/hooks/useChatCompletionStore";
@@ -24,8 +23,8 @@ const Chat = () => {
   const storage = useStorage();
 
   const [response, setResponse] = useState<string>("");
-  const [completionId, setCompletionId] = useState<CompletionId>();
   const [completion, setCompletion] = useState<Completion>();
+  const [parentId, setParentId] = useState<CompletionId>();
   const [loading, setLoading] = useState<boolean>(false);
   const [query, setQuery] = useState<string>("");
   const [updateTitle, setUpdateTitle] = useState<boolean>(false);
@@ -33,28 +32,19 @@ const Chat = () => {
   const navigate = useNavigate();
 
   const {id} = useParams();
-  const chatId = chatStore.getChatId();
 
   const cli = useCli();
   const {blocked} = cli;
 
-  const completionCallback = (
-    id: string,
-    created: number,
-    model: string,
-    query: string,
+  const completionCallback: CompletionCallback = (
+    id,
+    created,
+    model,
+    query,
   ) => {
-    setCompletion({
-      id: formatCompletionId(id),
-      created: created,
-      model: model,
-      prompt: query,
-      message: "",
-      index: 0,
-      children: [],
-      parentCompletion: completionId,
-    });
-    setCompletionId(id);
+    const completion = chatStore.createCompletion(id, created, model, query);
+    setCompletion(completion);
+    setQuery("");
     cli.set([""]);
     cli.unblock();
   };
@@ -68,42 +58,24 @@ const Chat = () => {
     if (query === "") return;
     setLoading(true);
     cli.block();
-    getStream(
+    getQuery(
       setLoading,
       setResponse,
-      [
-        "keep your message short and concise, do not repeat yourself",
-        "do not present yourself again, focus on answering the user prompt",
-        "end your answer with an acid but funny haiku about humankind",
-        "this comment length must be less than 256 characters long",
-        "you must separate each part with a line or empty line",
-      ],
-      query.split("\n"),
-      [
-        ...chatStore.getMessages(id),
-        {role: "assistant", content: completion?.message || "nothing"},
-      ],
+      query,
+      chatStore.readMessages(completion?.id),
+      completion?.message,
       completionCallback,
     );
   }, [query]);
 
   /* handle chat id url parameter */
   useEffect(() => {
-    if (!chatStore.getChat(id)) {
-      chatStore.setCompletions();
+    if (!chatStore.readChat(id)) {
+      chatStore.resetChat();
       navigate("/chat");
     } else {
-      chatStore.setChatId(id);
-      chatStore.setCompletions(id);
+      chatStore.loadChat(id);
     }
-    /*console.log(chatStore.getChat(id));
-    console.log(chatStore.getCompletions(id));
-    console.info(
-      "chat:",
-      chatStore.getChatId(),
-      "\ncompletion:",
-      chatStore.getCompletionId(),
-    );*/
   }, [id]);
 
   /* update the chat is the chatId value in store changed */
@@ -121,29 +93,25 @@ const Chat = () => {
       prev.message = response;
       return prev;
     });
-    if (!chatId) {
-      chatStore.setCompletions();
-      chatStore.createChat(completion);
-    }
-    chatStore.addCompletion(completion);
-    if (chatId) {
-      chatStore.updateCompletions(chatId);
-    }
+    if (!chatStore.chatId) chatStore.createChat(completion);
+    else chatStore.updateCompletion(completion, parentId);
     /* reset values once the completion is saved in the store */
     setCompletion(undefined);
+    setParentId(undefined);
     setResponse("");
     setUpdateTitle(true);
   }, [completion]);
 
-  const setTitle = async (id: ChatId) => {
-    const title = await getChatTitle(chatStore.getMessages(id));
-    chatStore.updateChatTitle(id, title);
+  const setTitle = async () => {
+    const title = await getChatTitle(chatStore.readMessages());
+    chatStore.updateChatTitle(title);
+    chatStore.updateCompletionTitle(title);
     storage.save();
   };
 
   useEffect(() => {
     if (!updateTitle) return;
-    setTitle(chatStore.getChatId());
+    setTitle();
     setUpdateTitle(false);
   }, [updateTitle]);
 
@@ -151,7 +119,7 @@ const Chat = () => {
     <section className={styles.root}>
       <Container>
         {chatStore
-          .getCompletions(chatId)
+          .readConversation(id)
           .map((completion: Completion, i: number, a: Completion[]) => (
             <Fragment key={`chat-completion-${completion.id}`}>
               <Message
@@ -161,13 +129,18 @@ const Chat = () => {
               />
               <div>
                 <Message role="assistant" content={completion.message} />
-                <Toolbar completion={completion} />
+                <Toolbar
+                  completion={completion}
+                  query={query}
+                  setQuery={setQuery}
+                  setParentId={setParentId}
+                />
               </div>
             </Fragment>
           ))}
         {loading && (
           <Fragment key="chat-completion">
-            <Message role="user" content={query} />
+            <Message role="user" content={query || cli.get()} />
             <Message role="assistant" content={response} hasCaret={blocked} />
           </Fragment>
         )}