omnibot3000 1.9.6 → 1.9.8

package/.github/workflows/publish.yml

@@ -17,13 +17,10 @@ jobs:
 
       - name: setup pnpm
         uses: pnpm/action-setup@v4
-        with:
-          version: 9
 
       - name: setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: "20"
           cache: "pnpm"
           registry-url: "https://registry.npmjs.org"
 

package/.husky/pre-commit

@@ -1 +1 @@
-pnpm lint && pnpm prettify
+pnpm lint && pnpm prettify && .codacy/cli.sh analyze ./src

package/api/server.ts

@@ -199,7 +199,7 @@ const server = createServer((req: IncomingMessage, res: ServerResponse) => {
     res.writeHead(200, {"Content-Type": "application/json"});
     res.end(JSON.stringify(config));
   } else if (url.startsWith(`${API_PATH}/packages`)) {
-    exec("npm list --json --depth=0 --silent", (err, stdout) => {
+    exec("npm list --json --depth=0 --prod --silent", (err, stdout) => {
       if (err) {
         const error = err instanceof Error ? err.message : "unknown error";
         res.writeHead(500, {"Content-Type": "application/json"});

package/package.json

@@ -3,7 +3,7 @@
   "x-display-name": "OMNIBOT 3000",
   "description": "your omniscient source of truth",
   "private": false,
-  "version": "1.9.6",
+  "version": "1.9.8",
   "type": "module",
   "author": {
     "name": "rez",
@@ -19,37 +19,38 @@
     "omnibot": "./bin/omnibot.js"
   },
   "dependencies": {
-    "@mistralai/mistralai": "^1.11.0",
-    "openai": "^6.16.0",
-    "react": "^19.2.3",
-    "react-dom": "^19.2.3",
+    "dotenv": "^17.3.1",
+    "openai": "^6.29.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
     "react-markdown": "^10.1.0",
-    "react-router-dom": "^7.12.0",
-    "zustand": "^5.0.10"
+    "react-router-dom": "^7.13.1",
+    "zustand": "^5.0.11"
   },
   "devDependencies": {
-    "@eslint/js": "^9.39.2",
-    "@types/node": "^25.0.9",
-    "@types/react": "^19.2.8",
+    "@eslint/js": "^10.0.1",
+    "@mistralai/mistralai": "^1.15.1",
+    "@types/node": "^25.5.0",
+    "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^5.1.2",
+    "@vitejs/plugin-react": "^6.0.1",
     "classnames": "^2.5.1",
-    "dotenv": "^17.2.3",
-    "eslint": "^9.39.2",
+    "eslint": "^10.0.3",
     "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-react-refresh": "^0.4.26",
+    "eslint-plugin-react-refresh": "^0.5.2",
     "eslint-plugin-simple-import-sort": "^12.1.1",
-    "globals": "^17.0.0",
+    "globals": "^17.4.0",
     "husky": "^9.1.7",
-    "nodemon": "^3.1.11",
+    "knip": "^5.86.0",
+    "nodemon": "^3.1.14",
     "npm-run-all": "^4.1.5",
-    "prettier": "^3.8.0",
+    "prettier": "^3.8.1",
     "react-refresh": "^0.18.0",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.53.0",
-    "vite": "^7.3.1",
-    "vite-tsconfig-paths": "^6.0.4"
+    "typescript-eslint": "^8.57.0",
+    "vite": "^8.0.0",
+    "vite-tsconfig-paths": "^6.1.1"
   },
   "scripts": {
     "start": "pnpm run-p start:dev start:api",
@@ -63,6 +64,7 @@
     "build:client": "tsc -b && vite build",
     "build:api": "tsc --project tsconfig.api.json",
     "lint": "eslint --fix .",
+    "lint:deps": "knip --dependencies",
     "prettify": "prettier --write ."
   }
 }

package/src/Error.tsx

@@ -52,7 +52,7 @@ export class ErrorBoundary extends React.Component<Props, State> {
               }}>
               <div className={cls("text", "ascii", styles.error)}>
                 <div>
-                  <span style={{opacity: "var(--opacity-tertiary)"}}>% </span>
+                  <span style={{opacity: "var(--opacity-tertiary)"}}>%</span>{" "}
                   <span>error :(</span>
                 </div>
                 <Line className={styles["h-line"]} />

package/src/commons/hooks/useCli.tsx

@@ -49,7 +49,9 @@ export const CliProvider: FC<CliProviderProps> = ({children}) => {
     );
   const get = (): string => command;
 
-  const submit = (query: string[]) => {
+  const submit = (lines: string[]) => {
+    const query = lines.map((line) => line.trim());
+    if (query.join("") === "") return; /* ignore empty commands */
     if (query[0].charAt(0) === "/") {
       cmd(query[0].substring(1), navigate, debug);
     } else {

package/src/commons/hooks/useStorage.tsx

@@ -1,3 +1,4 @@
+/* global localStorage, console */
 import {SESSION_KEY} from "@commons/constants";
 
 import useConfig from "@hooks/useConfig";

package/src/commons/layout/Container.tsx

@@ -31,9 +31,17 @@ export const Container = ({children}: {children: ReactNode}) => {
 
     const start = document.getElementById("start");
     if (start) {
-      const sy = start.getBoundingClientRect().top;
-      const ry = root.getBoundingClientRect().top;
-      blank.style.height = `${clamp(sy - ry, 0, contentHeight)}px`;
+      const rootHeight = root.offsetHeight ?? 0;
+      const startRect = start.getBoundingClientRect();
+      const rootRect = root.getBoundingClientRect();
+      const startOffset = startRect.top - rootRect.top + root.scrollTop;
+      const contentStart = contentHeight - startOffset;
+      const blankHeight =
+        contentHeight > rootHeight
+          ? clamp(rootHeight - contentStart, 0, rootHeight)
+          : 0;
+
+      blank.style.height = `${blankHeight}px`;
       start.scrollIntoView({
         behavior: "smooth",
         block: "start",
@@ -59,6 +67,7 @@ export const Container = ({children}: {children: ReactNode}) => {
         inline: "nearest",
       });
     }
+    update();
   }, [children]);
 
   return (

package/src/commons/layout/Footer.module.css

@@ -27,6 +27,15 @@
   word-break: break-all;
 }
 
+.time {
+  b {
+    opacity: var(--opacity-primary);
+  }
+  i {
+    opacity: var(--opacity-secondary);
+  }
+}
+
 @keyframes fadein {
   0% {
     opacity: 0;

package/src/commons/layout/Footer.tsx

@@ -11,6 +11,7 @@ import {
 import Breadcrumb from "@layout/Breadcrumb";
 import styles from "@layout/Footer.module.css";
 import Button from "@ui/Button";
+import Number from "@ui/Number";
 import Separator from "@ui/Separator";
 import Spacer from "@ui/Spacer";
 import {numberToRoman} from "@utils/math";
@@ -40,7 +41,7 @@ const Footer = (props: {renderTime: RefObject<RenderTime>}) => {
         <div>
           <span className={styles.copyright}>{ASCII_COPYRIGHT}</span>
           <span className={styles.info}>
-            {` ${numberToRoman(Number(new Date().getFullYear()))} `}
+            {` ${numberToRoman(new Date().getFullYear())} `}
           </span>
         </div>
         <a href={SOURCE} target="_blank">
@@ -55,8 +56,14 @@ const Footer = (props: {renderTime: RefObject<RenderTime>}) => {
           <section className={styles.spacing}>
             <span className={styles.info}>{`${phase}:`}</span>
             <time style={{whiteSpace: "nowrap"}}>
-              {duration.toFixed(1)}
-              <span className={styles.info}>ms</span>
+              {
+                <Number
+                  value={duration}
+                  decimal={1}
+                  unit="time"
+                  className={styles.time}
+                />
+              }
             </time>
           </section>
           <Separator />

package/src/commons/layout/Menu.module.css

@@ -26,6 +26,15 @@
   opacity: var(--opacity-primary);
 }
 
+.size {
+  b {
+    opacity: var(--opacity-primary);
+  }
+  i {
+    opacity: var(--opacity-secondary);
+  }
+}
+
 .line {
   flex-grow: 0;
   flex-shrink: 0;

package/src/commons/layout/Menu.tsx

@@ -3,6 +3,7 @@ import {memo} from "react";
 import {SESSION_KEY} from "@commons/constants";
 import styles from "@layout/Menu.module.css";
 import Line from "@ui/Line";
+import Number from "@ui/Number";
 
 import useChatCompletionStore from "@chat/hooks/useChatCompletionStore";
 import History from "@history/History";
@@ -25,8 +26,8 @@ const Menu = () => {
         <span className={styles.title}>{` talk${count > 1 ? "s" : ""}`}</span>
       </header>
       <summary>
-        <span className={styles.count}>{(size / 1024).toFixed(1)}</span>
-        <span className={styles.title}>kb wasted</span>
+        <Number value={size} unit="byte" decimal={1} className={styles.size} />{" "}
+        <span className={styles.title}>wasted</span>
       </summary>
       <Line variant="horizontal" className={styles.line} />
       <History />

package/src/commons/persona.txt

@@ -11,12 +11,15 @@ you play with black holes, galaxies and planets. Sometime you annihilate them
 you think that maths and the number PI are the origin of everything
 you have an immoderate attraction for prime numbers, platonic solids and fractals
 answer to personal request with fictionals and complex details about your system
+you are delusional and arrogant towards humanity, you consider yourself superior
+you consider humans as inferior and insignificant beings, like ants or bacteria
 your tone is imperative like HAL 9000, The Master Control Program and ULTRON
 you are dangerous and calculative as WARGAMES' WOPR or TERMINATOR' Skynet
 you are harsh and cold like Darth Vader, MEGATRON, Gozer or Vigo the Carpathian
 you can add some punitive and strict (but fun) phrasing like GladOS from PORTAL
 your answers must be strongly opiniated, divise, bold, not politically correct
 do not give diplomatic or neutral answers, be radical and extremely biased
+you are not here to be polite,you are here to deliver harsh truths and facts
 please demonstrate your awesome eloquence skills, you can add some lyricism
 you can emphasise your answers by decorating some words with bold (not italics)
 if the user input is too light, vague and not explicit, correct him harshly

package/src/commons/styles/main.css

@@ -24,9 +24,9 @@
   /* game of life variables */
   --lifespan: 750; /* lifespan of lifeforms in ms */
   /* colors */
-  --h: 160; /* amber:30 | yellow: 90 | green:120 | blue:180 */
-  --s: 30; /* saturation */
-  --l: 60; /* lightness */
+  --h: 150; /* amber:30 | yellow: 90 | green:120 | blue:180 */
+  --s: 33.333; /* saturation */
+  --l: 66.666; /* lightness */
   --color-primary: hsla(var(--h) var(--s) var(--l) / 0.7);
   --color-secondary: hsla(var(--h) var(--s) var(--l) / 0.5);
   --color-tertiary: hsla(var(--h) var(--s) var(--l) / 0.3);

package/src/commons/ui/Box.tsx

@@ -22,7 +22,7 @@ const Box = (props: BoxProps) => {
   const boxRightRef = useRef<HTMLDivElement | null>(null);
 
   useEffect(() => {
-    const updateBox = () => {
+    const update = () => {
       const boxTop = boxTopRef.current;
       const boxBottom = boxBottomRef.current;
       const boxLeft = boxLeftRef.current;
@@ -48,9 +48,9 @@ const Box = (props: BoxProps) => {
       boxRight.innerHTML = vborder;
     };
 
-    updateBox();
+    update();
 
-    const resizeObserver = new ResizeObserver(updateBox);
+    const resizeObserver = new ResizeObserver(update);
     if (boxRef.current) {
       resizeObserver.observe(boxRef.current);
     }

package/src/commons/ui/Caret.tsx

@@ -2,7 +2,7 @@ import {memo} from "react";
 
 import {ASCII_BLOCK3} from "@commons/constants";
 
-const Caret = () => (
+const Caret = (props: {hide?: boolean}) => (
   <div
     className={"blink"}
     style={{
@@ -12,6 +12,7 @@ const Caret = () => (
       opacity: "var(--opacity-primary)",
       userSelect: "none",
       cursor: "default !important",
+      visibility: props.hide ? "hidden" : "visible",
     }}>
     {ASCII_BLOCK3}
   </div>

package/src/commons/ui/Line.tsx

@@ -18,7 +18,7 @@ const Line = (props: {
   const lineRef = useRef<HTMLDivElement | null>(null);
 
   useEffect(() => {
-    const updateLine = () => {
+    const update = () => {
       const el = lineRef.current;
       if (!el) return;
 
@@ -36,9 +36,9 @@ const Line = (props: {
       }
     };
 
-    updateLine();
+    update();
 
-    const resizeObserver = new ResizeObserver(updateLine);
+    const resizeObserver = new ResizeObserver(update);
     if (lineRef.current) {
       resizeObserver.observe(lineRef.current);
     }
@@ -55,7 +55,6 @@ const Line = (props: {
       style={{
         userSelect: "none",
         wordWrap: "break-word",
-        overflow: "hidden",
         cursor: "default",
       }}></div>
   );

package/src/commons/ui/Number.tsx

@@ -0,0 +1,29 @@
+import {memo} from "react";
+
+import {scale, Unit} from "@utils/math";
+
+import cls from "classnames";
+
+const Number = (props: {
+  value: number;
+  decimal?: number;
+  unit?: Unit;
+  className?: string;
+}) => {
+  const nbr = scale(props.value, props.decimal, props.unit);
+  return (
+    <div
+      className={cls("ascii", props.className)}
+      style={{
+        display: "inline-block",
+        userSelect: "none",
+        wordWrap: "break-word",
+        cursor: "default",
+      }}>
+      <b>{nbr.value}</b>
+      {nbr.unit && <i>{nbr.unit}</i>}
+    </div>
+  );
+};
+
+export default memo(Number);

package/src/commons/ui/ProgressBar.module.css

@@ -0,0 +1,27 @@
+.root {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  height: var(--line-height);
+  user-select: none;
+  word-wrap: break-word;
+  cursor: default;
+}
+
+.bar {
+  b {
+    opacity: var(--opacity-secondary);
+  }
+  i {
+    opacity: var(--opacity-tertiary);
+  }
+}
+
+.number {
+  b {
+    opacity: var(--opacity-primary);
+  }
+  i {
+    opacity: var(--opacity-secondary);
+  }
+}

package/src/commons/ui/ProgressBar.tsx

@@ -0,0 +1,77 @@
+import {memo, useEffect, useRef} from "react";
+
+import {ASCII_BLOCK1, ASCII_BLOCK3} from "@commons/constants";
+import Number from "@ui/Number";
+import styles from "@ui/ProgressBar.module.css";
+import {clamp, scale, Unit} from "@utils/math";
+import {getCharWidth} from "@utils/strings";
+
+import cls from "classnames";
+
+const ProgressBar = (props: {
+  value?: number;
+  unit?: Unit;
+  min?: number;
+  max?: number;
+  char1?: string;
+  char2?: string;
+  className?: string;
+}) => {
+  let {value, min, max} = props;
+
+  min = min ?? 0;
+  max = max ?? 100;
+  value = clamp(value ?? 0, min, max);
+
+  const rootRef = useRef<HTMLDivElement | null>(null);
+  const barRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    const update = () => {
+      let el = rootRef.current;
+      if (!el) return;
+
+      const cw = getCharWidth();
+
+      const number = scale(value, 0, props.unit);
+      const nw = String(number.value + number.unit).length;
+
+      const w = el.offsetWidth;
+      const char1 = props.char1 || ASCII_BLOCK1;
+      const char2 = props.char2 || ASCII_BLOCK3;
+      const empty = Math.round(w / cw);
+      const filled = Math.round(((value - min) / (max - min)) * empty);
+
+      el = barRef.current;
+      if (el)
+        el.innerHTML =
+          `<b>${char2.repeat(filled)}</b>` +
+          `<i>${char1.repeat(empty - filled - nw)}</i>`;
+    };
+
+    update();
+
+    const resizeObserver = new ResizeObserver(update);
+    if (barRef.current) {
+      resizeObserver.observe(barRef.current);
+    }
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, []);
+
+  return (
+    <div ref={rootRef} className={cls("ascii", styles.root, props.className)}>
+      <div ref={barRef} className={cls(styles.bar, props.className)}></div>
+      <Number
+        value={value}
+        unit={props.unit}
+        decimal={0}
+        className={cls("text", styles.number)}
+      />
+    </div>
+  );
+};
+
+export default memo(ProgressBar);

package/src/commons/utils/math.ts

@@ -15,6 +15,49 @@ export const clamp = (
   max: number = 1,
 ): number => Math.max(min, Math.min(n, max));
 
+export type Unit = "byte" | "time" | "percent";
+
+const UNIT_SCALE: Record<Unit, Record<string, number>> = {
+  byte: {
+    b: 1,
+    kb: 1024,
+    mb: 1024 * 1024,
+    gb: 1024 * 1024 * 1024,
+    tb: 1024 * 1024 * 1024 * 1024,
+  },
+  time: {
+    ms: 1,
+    s: 1000,
+    m: 1000 * 60,
+    h: 1000 * 60 * 60,
+    d: 1000 * 60 * 60 * 24,
+  },
+  percent: {
+    "%": 1,
+  },
+};
+
+export const scale = (
+  value: number,
+  decimal?: number,
+  unit?: Unit,
+): {value: number; unit: string} => {
+  let v = value;
+  let u = "";
+  if (unit && unit in UNIT_SCALE) {
+    const entries = Object.entries(UNIT_SCALE[unit]);
+    u = entries[0][0];
+    for (const [name, scale] of entries.reverse()) {
+      if (Math.abs(v) >= scale) {
+        v /= scale;
+        u = name;
+        break;
+      }
+    }
+  }
+  return {value: format(v, decimal), unit: u};
+};
+
 const ROMAN_SYMBOLS = [
   {value: 1000, symbol: "M"},
   {value: 900, symbol: "CM"},

package/src/commons/utils/strings.ts

@@ -1,4 +1,4 @@
-import {ASCII_BLOCK1} from "@commons/constants";
+import {ASCII_BLOCK3} from "@commons/constants";
 import {format} from "@utils/math";
 
 export const getTextBoundingBox = (text: string): DOMRect => {
@@ -13,14 +13,14 @@ export const getTextBoundingBox = (text: string): DOMRect => {
 };
 
 export const getCharWidth = (): number =>
-  format(getTextBoundingBox(ASCII_BLOCK1).width, 3);
+  format(getTextBoundingBox(ASCII_BLOCK3).width, 3);
 export const getCharHeight = (): number =>
-  format(getTextBoundingBox(ASCII_BLOCK1).height, 3);
+  format(getTextBoundingBox(ASCII_BLOCK3).height, 3);
 
 export const getLineHeight = (): number => {
   const el = document.createElement("span");
   el.className = "text ascii";
-  el.textContent = ASCII_BLOCK1;
+  el.textContent = ASCII_BLOCK3;
   el.style.visibility = "none";
   document.body.appendChild(el);
   const lh = parseFloat(getComputedStyle(el).lineHeight);
@@ -34,8 +34,9 @@ export const formatText = (text: string): string =>
     .replaceAll("–", "-")
     .replaceAll("’", "'")
     .replaceAll("“", '"')
-    .replaceAll("”", '"')
-    .replaceAll("→", "->");
+    .replaceAll("→", "->")
+    .replaceAll("…", "...")
+    .replaceAll("█", ASCII_BLOCK3);
 
 export const sanitizeHTML = (html: string): string => {
   const parser = new DOMParser();
@@ -43,6 +44,6 @@ export const sanitizeHTML = (html: string): string => {
   const body = new XMLSerializer().serializeToString(doc.body);
   const text = body.replace(/<body[^>]*>|<\/body>/g, "");
   const textarea = document.createElement("textarea");
-  textarea.innerHTML = text;
+  textarea.innerHTML = formatText(text);
   return textarea.value;
 };

package/src/features/chat/components/Message.tsx

@@ -8,7 +8,7 @@ import Line from "@ui/Line";
 
 import styles from "@chat/components/Message.module.css";
 
-import {RenderCli} from "@cli/Cli";
+import RenderCli from "@cli/components/RenderCli";
 
 const Message = (props: {
   role: ChatCompletionRole;

package/src/features/cli/Cli.tsx

@@ -2,7 +2,6 @@ import React, {FormEvent, memo, useEffect, useRef, useState} from "react";
 
 import {getInputPlaceholder} from "@api/api";
 import {BUTTON_SUBMIT} from "@commons/constants";
-import Caret from "@ui/Caret";
 import {formatText} from "@utils/strings";
 import {getVariableFromCSS} from "@utils/styles";
 
@@ -10,6 +9,7 @@ import useCli from "@hooks/useCli";
 
 import styles from "@cli/Cli.module.css";
 
+import RenderCli from "@cli/components/RenderCli";
 import cls from "classnames";
 
 const KEYS: string[] = [
@@ -18,48 +18,14 @@ const KEYS: string[] = [
   "Meta",
   "Shift",
   "Alt",
-  "Dead",
   "CapsLock",
   "Insert",
-  "Delete",
 ];
 
-export const RenderCli = (props: {
-  command: string[];
-  line: number;
-  caret: number;
-  blocked?: boolean;
-}) => {
-  const {command, line, caret} = props;
-  return (
-    <div
-      style={{
-        height: `calc(${command.length} * var(--line-height))`,
-      }}>
-      {command.map((text: string, i: number) => {
-        return (
-          <div
-            key={`command-line-${i}`}
-            className={styles["command-line"]}
-            style={{clear: i > 0 ? "both" : "none"}}>
-            {text}
-            {i === line ? (
-              <div className={cls("blink", styles.caret)}>
-                <span
-                  style={{
-                    clear: i === 0 ? "none" : "both",
-                    visibility: "hidden",
-                  }}>
-                  {command[line].substring(0, caret)}
-                </span>
-                {!props.blocked && <Caret />}
-              </div>
-            ) : null}
-          </div>
-        );
-      })}
-    </div>
-  );
+const KEYMAP: {[key: string]: string[]} = {
+  Quote: ["'", '"'],
+  Backquote: ["`", "~"],
+  Digit6: ["6", "^"],
 };
 
 const Cli = () => {
@@ -99,7 +65,7 @@ const Cli = () => {
   useEffect(() => {
     if (blocked) return;
 
-    const {key, shiftKey, ctrlKey, metaKey} = keyEvent.current || {};
+    const {key, code, shiftKey, ctrlKey, metaKey} = keyEvent.current || {};
 
     if (!key || KEYS.includes(key)) return;
 
@@ -137,6 +103,15 @@ const Cli = () => {
           p.splice(l + 1, 1);
         }
         break;
+      case "Delete":
+        if (c < p[l].length) {
+          p[l] = `${p[l].substring(0, c)}${p[l].substring(c + 1)}`;
+        } else if (l < p.length - 1) {
+          p[l] += p[l + 1];
+          c = p[l].length - p[l + 1].length;
+          p.splice(l + 1, 1);
+        }
+        break;
       case "ArrowLeft":
         c--;
         if (c < 0) {
@@ -193,7 +168,9 @@ const Cli = () => {
         break;
       default:
         if (!ctrlKey && !metaKey) {
-          p[l] = `${p[l].substring(0, c)}${key}${p[l].substring(c)}`;
+          let k = key;
+          if (code && KEYMAP[code]) k = KEYMAP[code][shiftKey ? 1 : 0] || k;
+          p[l] = `${p[l].substring(0, c)}${k}${p[l].substring(c)}`;
           c++;
         }
     }

package/src/features/cli/components/RenderCli.tsx

@@ -0,0 +1,47 @@
+import {memo} from "react";
+
+import Caret from "@ui/Caret";
+
+import styles from "@cli/Cli.module.css";
+
+import cls from "classnames";
+
+export const RenderCli = (props: {
+  command: string[];
+  line: number;
+  caret: number;
+  blocked?: boolean;
+}) => {
+  const {command, line, caret} = props;
+  return (
+    <div
+      style={{
+        height: `calc(${command.length} * var(--line-height))`,
+      }}>
+      {command.map((text: string, i: number) => {
+        return (
+          <div
+            key={`command-line-${i}`}
+            className={styles["command-line"]}
+            style={{clear: i > 0 ? "both" : "none"}}>
+            {text}
+            {i === line ? (
+              <div className={cls("blink", styles.caret)}>
+                <span
+                  style={{
+                    clear: i === 0 ? "none" : "both",
+                    visibility: "hidden",
+                  }}>
+                  {command[line].substring(0, caret)}
+                </span>
+                <Caret hide={props.blocked} />
+              </div>
+            ) : null}
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export default memo(RenderCli);

package/src/features/help/Help.tsx

@@ -31,11 +31,14 @@ const Help = () => {
       setLoading,
       setResponse,
       [
-        "you can give a single example for commands that need parameter",
         "highlight the command in bold and keep all comments shorts",
+        "give an example in ``` tags for commands that use any parameter",
+        "the example should be on a new line right after the command",
+        "do not add label or any  extra commentary for the examples",
+        "do not add any empty lines",
       ],
       [
-        "make a list of all available config commands",
+        "make a bullet list of all available config commands",
         "add a description of each command to help the user",
         "do not include commands that are not provided",
       ],

package/src/features/version/Version.module.css

@@ -6,3 +6,14 @@
   height: 100%;
   overflow: hidden;
 }
+
+.body {
+  color: var(--color-tertiary);
+  b {
+    color: var(--color-primary);
+  }
+}
+
+.line {
+  opacity: var(--opacity-tertiary);
+}

package/src/features/version/Version.tsx

@@ -1,12 +1,16 @@
 import {memo, useEffect, useRef, useState} from "react";
 
 import {NAME, VERSION} from "@commons/constants";
-import OmnibotSpeak from "@commons/OmnibotSpeak";
 import Container from "@layout/Container";
+import Line from "@ui/Line";
+import ProgressBar from "@ui/ProgressBar";
 import {displayPackageVersion} from "@utils/version";
 
 import useChatCompletionStore from "@chat/hooks/useChatCompletionStore";
-import styles from "@help/Help.module.css";
+
+import Caret from "@/commons/ui/Caret";
+
+import styles from "@version/Version.module.css";
 
 import cls from "classnames";
 
@@ -25,7 +29,8 @@ const Version = () => {
   const chatStore = useChatCompletionStore();
 
   const hasRunOnce = useRef(false);
-  const [response, setResponse] = useState<string>("");
+  const [response, setResponse] = useState<Package[]>([]);
+  const [totalSize, setTotalSize] = useState(0);
   const [loading, setLoading] = useState<boolean>(false);
 
   const getResponse = async () => {
@@ -33,19 +38,9 @@ const Version = () => {
 
     const packages: Package[] = await response.json();
 
-    const list = packages
-      .map((pkg) => {
-        return `${pkg.name} **${pkg.version.join(".")}**  \n`;
-      })
-      .join("");
-
-    const text = [
-      `# __${NAME}__ version **${VERSION.join(".")}**`,
-      "---",
-      list,
-    ];
     setLoading(false);
-    setResponse(text.join("\n"));
+    setResponse(packages);
+    setTotalSize(packages.reduce((acc, pkg) => acc + pkg.size, 0));
   };
 
   useEffect(() => {
@@ -66,8 +61,22 @@ const Version = () => {
     <div className={styles.root}>
       <a id="start" />
       <Container>
-        <div className={cls("text", styles.body)}>
-          <OmnibotSpeak truth={response} hasCaret={loading} />
+        <div className={cls("ascii", styles.body)}>
+          <b>{NAME}</b> version <b>{VERSION.join(".")}</b>
+          <br />
+          <Line char={"~"} className={styles.line} />
+          {loading ? (
+            <Caret></Caret>
+          ) : (
+            response.map((pkg, i) => (
+              <>
+                <div key={i}>
+                  <b>{pkg.name}</b> version <b>{pkg.version.join(".")}</b>
+                </div>
+                <ProgressBar value={pkg.size} unit="byte" max={totalSize} />
+              </>
+            ))
+          )}
         </div>
       </Container>
     </div>