@ibgib/web-gib 0.0.1

package/src/ui/ui-constants.mts

@@ -0,0 +1,101 @@
+/**
+ * these are the variables able to be changed dynamically in the UI.
+ *
+ * For this to work, these variables must be used in the consuming app's css.
+ */
+export const VALID_CSS_VARIABLES = [
+    '--text-color-base',
+    '--background-color-base',
+    '--border-color-base',
+    '--border-width-base',
+    '--border-style-base',
+    '--font-family-base',
+    '--font-size-base',
+    '--highlight-border-color',
+    '--highlight-box-shadow-color',
+    '--side-panel-tab-content-background-color',
+
+    '--light-background-color',
+    '--very-light-background-color',
+
+    // #region tabs
+    '--tab-background-color',
+    '--tab-background-color-active',
+    '--tab-text-color',
+    '--tab-text-color-active',
+    '--tab-border-color',
+    '--tab-border-color-active',
+    '--tab-border-width',
+    '--tab-border-width-active',
+    '--tab-border-style',
+    '--tab-border-radius',
+    '--tab-padding',
+    // #endregion tabs
+
+    // #region links
+    '--link-color',
+    '--link-visited-color',
+    '--link-hover-color',
+    '--link-text-decoration',
+    '--link-hover-text-decoration',
+    // #endregion links
+
+    // #region buttons
+    '--button-background-color-base',
+    '--button-text-color-base',
+    '--button-border-color-base',
+    '--button-border-width-base',
+    '--button-border-style-base',
+    '--button-border-radius-base',
+    '--button-padding-base',
+    '--button-hover-background-color',
+    '--button-hover-text-color',
+    '--button-hover-border-color',
+    // #endregion buttons
+
+    // #region inputs
+    '--input-background-color',
+    '--input-text-color',
+    '--input-border-color',
+    '--input-border-width',
+    '--input-border-style',
+    '--input-border-radius',
+    '--input-padding',
+    // #endregion inputs
+
+    // #region headings
+    '--h1-font-size',
+    '--h1-font-weight',
+    '--h1-margin',
+    '--h2-font-size',
+    '--h2-font-weight',
+    '--h2-margin',
+    '--h3-font-size',
+    '--h3-font-weight',
+    '--h3-margin',
+    // #endregion headings
+
+    // #region message types
+    '--agent-background-color',
+    '--agent-text-color',
+    '--human-background-color',
+    '--human-text-color',
+    '--code-background-color',
+    '--code-text-color',
+    '--function-background-color',
+    '--function-text-color',
+    '--unknown-background-color',
+    '--unknown-text-color',
+    // #endregion message types
+
+    // #region scrollbar
+    '--scrollbar-thumb-color',
+    '--scrollbar-track-color',
+    // #endregion scrollbar
+];
+
+/**
+ * 06/2025
+ * going to use this for storing/restoring themes
+ */
+export const UI_THEME_INFO_KEY = 'ui-theme-info';

package/src/ui/ui-helpers.mts

@@ -0,0 +1,222 @@
+import { delay, extractErrorMsg, } from "@ibgib/helper-gib/dist/helpers/utils-helper.mjs";
+
+import { GLOBAL_LOG_A_LOT } from "../constants.mjs";
+import { UIThemeInfo } from "./ui-types.mjs";
+import { storageGet } from "../storage/storage-helpers.web.mjs";
+import { UI_THEME_INFO_KEY } from "./ui-constants.mjs";
+
+const logalot = GLOBAL_LOG_A_LOT;
+
+/**
+ * Shows the fullscreen dialog with the given title, message, and optional prompt.
+ *
+ * @param {object} details - Options for showing the dialog.
+ * @param {string} details.title - Title of the dialog.
+ * @param {string} details.message - Message to display in the dialog body.
+ * @param {boolean} [details.prompt] - If true, shows a text input for prompting the user.
+ * @returns {Promise<string | null>} - A promise that resolves with the text entered by the user (if prompt is true) or null if canceled/dismissed.
+ */
+export async function showFullscreenDialog(opts: {
+    title: string,
+    msg: string,
+    /**
+     * determines if to show the cancel button. does NOT control whether or not
+     * we show the input control.
+     *
+     * so if you want to prompt just for a boolean, just set this to true. If
+     * you need actual string input from the user, set {@link showInput} to
+     * true.
+     *
+     * @see {@link showInput}
+     */
+    prompt?: boolean,
+    /**
+     * this flag determines if the user input field is shown. If this is truthy,
+     * then {@link prompt} will be ignored and always set to `true`.
+     *
+     * @see {@link prompt}
+     */
+    showInput?: boolean,
+    defaultValue?: string,
+    okButtonTitle?: string,
+    cancelButtonTitle?: string,
+    isPassword?: boolean,
+}): Promise<string | undefined> {
+    const lc = `[${showFullscreenDialog.name}]`;
+    try {
+        if (logalot) { console.log(`${lc} starting... (I: 037b228a2568181cd3eb25dba4e03225)`); }
+
+        // const dialog = document.getElementById(ID_FULLSCREEN_DIALOG) as HTMLDialogElement;
+        // const dialogBody = document.getElementById(ID_FULLSCREEN_DIALOG_BODY) as HTMLDialogElement;
+        // const titleElement = document.getElementById(ID_FULLSCREEN_DIALOG_TITLE) as HTMLElement;
+        // const messageElement = document.getElementById(ID_FULLSCREEN_DIALOG_MESSAGE) as HTMLElement;
+        // const promptInput = document.getElementById(ID_FULLSCREEN_DIALOG_PROMPT_INPUT) as HTMLInputElement;
+        // const okButton = document.getElementById(ID_FULLSCREEN_DIALOG_OK_BUTTON) as HTMLButtonElement;
+        // const cancelButton = document.getElementById(ID_FULLSCREEN_DIALOG_CANCEL_BUTTON) as HTMLButtonElement;
+
+        const dialog = document.getElementById('fullscreen-dialog') as HTMLDialogElement;
+        const dialogBody = document.getElementById('fullscreen-dialog-body') as HTMLDialogElement;
+        const titleElement = document.getElementById('fullscreen-dialog-title') as HTMLElement;
+        const messageElement = document.getElementById('fullscreen-dialog-message') as HTMLElement;
+        const promptInput = document.getElementById('fullscreen-dialog-prompt-input') as HTMLInputElement;
+        const okButton = document.getElementById('fullscreen-dialog-ok-button') as HTMLButtonElement;
+        const cancelButton = document.getElementById('fullscreen-dialog-cancel-button') as HTMLButtonElement;
+
+        if (!dialog || !dialogBody || !titleElement || !messageElement || !promptInput || !okButton || !cancelButton) {
+            throw new Error(`(UNEXPECTED) One or more dialog elements not found in DOM (E: 578e37c0271cc57a99e95e780ad18a25)`);
+        }
+
+        titleElement.textContent = opts.title || '';
+        [...messageElement.childNodes as any].forEach(child => messageElement.removeChild(child));
+        // messageElement.innerHTML = '';
+        let msgLines = (opts.msg || '').split('\n');
+        msgLines.forEach(line => {
+            const pLine = document.createElement('p');
+            pLine.textContent = line;
+            messageElement.appendChild(pLine);
+        });
+        // messageElement.textContent = opts.msg || '';
+
+        // reset the input classList
+        promptInput.classList.remove('collapsed');
+        cancelButton.classList.remove('collapsed');
+        cancelButton.style.display = 'inline-block';
+        okButton.textContent = opts.okButtonTitle || 'OK';
+
+        // Prompt-specific setup
+        const onKeypress = (ev: KeyboardEvent) => {
+            /**
+             * apparently an input has ev.key of 'Enter' but textarea is '\n'
+             */
+            const isEnter = ev.key === 'Enter' || ev.key === '\n';
+            if (isEnter && ev.ctrlKey) { okButton.click(); }
+        };
+
+        if (opts.prompt || opts.showInput) {
+            promptInput.addEventListener('keypress', onKeypress);
+            if (opts.showInput) {
+                promptInput.autofocus = true;
+                promptInput.value = opts.defaultValue ?? '';
+                promptInput.addEventListener('keypress', (ev) => {
+                    if (ev.key === 'Enter') { okButton.click(); }
+                });
+                if (opts.isPassword) {
+                    promptInput.type = 'password';
+                    promptInput.autocomplete = 'off';
+                    promptInput.required = true;
+                } else {
+                    promptInput.type = 'text';
+                    promptInput.autocomplete = 'on';
+                    promptInput.required = false;
+                    promptInput.attributes['auto-complete'] = 'on';
+                }
+            } else {
+                promptInput.autofocus = false;
+                promptInput.classList.add('collapsed');
+            }
+            cancelButton.textContent = opts.cancelButtonTitle || 'Cancel';
+        } else {
+            promptInput.classList.add('collapsed');    // Hide prompt input
+            cancelButton.style.display = 'none';       // Hide cancel button for alerts
+        }
+
+        return new Promise<string | undefined>((resolve) => {
+            // handlers
+
+            /** helper used in other handlers */
+            const removeEventListeners = () => {
+                if (opts.prompt || opts.showInput) {
+                    promptInput.removeEventListener('keypress', onKeypress);
+                }
+                okButton.removeEventListener('click', onOK);
+                cancelButton.removeEventListener('click', onCancel);
+                dialog.removeEventListener('close', onClose); // Remove dialog-level listener too
+            };
+            /** user clicks OK or hits "ENTER" in input */
+            const onOK = () => {
+                removeEventListeners();
+                let result = opts.showInput ?
+                    promptInput.value ?? '' :
+                    true.toString();
+                if (promptInput) { promptInput.value = ''; } // Clear input for next time
+                dialog.close(result);
+                resolve(result);
+            };
+
+            /** user actively clicks Cancel */
+            const onCancel = () => {
+                removeEventListeners();
+                if (promptInput) { promptInput.value = ''; } // Clear input for next time
+                dialog.close(undefined); // Pass back null for cancel
+                resolve(undefined);
+            };
+            /**
+             * Handle dialog.close() without button click (e.g., Esc key)
+             *
+             * NOTE: this does not trigger when dialog.close() is executed. This
+             * is only firing when esc is pressed.
+             */
+            const onClose = () => {
+                removeEventListeners();
+                if (promptInput) { promptInput.value = ''; } // Clear input for next time
+                dialog.close(undefined);
+                resolve(undefined);
+            };
+
+            // wire up
+            okButton.addEventListener('click', onOK);
+            cancelButton.addEventListener('click', onCancel);
+            dialog.addEventListener('close', onClose); // e.g. escape key
+
+            // show it
+            dialog.showModal();
+            delay(1000).then(() => {
+                dialogBody.scrollTo({ top: 0, behavior: 'smooth' });
+            });
+        });
+    } catch (error) {
+        console.error(`${lc} ${extractErrorMsg(error)}`);
+        throw error;
+    } finally {
+        if (logalot) { console.log(`${lc} complete.`); }
+    }
+}
+
+export async function getExistingUIInfo({
+    dbName,
+    storeName,
+    key = UI_THEME_INFO_KEY,
+}: {
+    dbName: string,
+    storeName: string,
+    key?: string,
+}): Promise<UIThemeInfo | undefined> {
+    const lc = `[${getExistingUIInfo.name}]`;
+    try {
+        if (logalot) { console.log(`${lc} starting... (I: 4c9d7c7f1e8bfcc917d405b842438825)`); }
+
+        key ??= UI_THEME_INFO_KEY;
+
+        let existingUIInfo: UIThemeInfo | undefined = undefined;
+        const existingUIInfoAsString = await storageGet({
+            dbName,
+            storeName,
+            key,
+        });
+        if (existingUIInfoAsString) {
+            try {
+                existingUIInfo = JSON.parse(existingUIInfoAsString) as UIThemeInfo;
+                if (!existingUIInfo.cssVariableOverrides) { throw new Error(`invalid existing UI info (E: 2fb408362178ce79a57da313d6680d25)`); }
+            } catch (error) {
+                existingUIInfo = undefined;
+            }
+        }
+
+        return existingUIInfo;
+    } catch (error) {
+        console.error(`${lc} ${extractErrorMsg(error)}`);
+        throw error;
+    } finally {
+        if (logalot) { console.log(`${lc} complete.`); }
+    }
+}

package/src/ui/ui-types.mts

@@ -0,0 +1,11 @@
+
+/**
+ * the idea is to store this to be able to restore the *last* theme generated by
+ * the agent.
+ */
+export interface UIThemeInfo {
+    /**
+     * overrides from the default css variables.
+     */
+    cssVariableOverrides: { [key: string]: string; }
+}

package/src/witness/agent/agent-constants.mts

@@ -0,0 +1,122 @@
+
+/**
+ * beginning of agent.ib
+ */
+export const AGENT_ATOM = 'witness_agent';
+export const AGENT_NAME_REGEXP = /^[a-zA-Z0-9_\-.]{1,32}$/;
+export const AGENT_DESC_REGEXP = /.{1,255}/;
+
+export const DEFAULT_UUID_AGENT = '';
+export const DEFAULT_NAME_AGENT = 'Manco';
+export const DEFAULT_DESCRIPTION_AGENT = 'This is a generic, unspecified agent.';
+
+
+/**
+ * demarcates a block of entries loaded from ibgibs requested by the model on a
+ * one-time basis.
+ */
+export const CONTEXT_DECOMPRESSION_TAG = 'CONTEXT_DECOMPRESSION_REFERENCE';
+/**
+ * demarcates a block of function info ibgib addresses
+ */
+export const FUNCTION_CALL_REQUEST_COMMENT_TAG = 'List of function info ibgib addresses. These contain info on both the requests you made and the resultant values.';
+
+// export const PRIMARY_AGENT_SPECIAL_IBGIB_TYPE = 'primaryagent';
+// export const PRIMARY_AGENT_SPECIAL_IBGIB_NAME = 'Robbie';
+
+/**
+ * this is the rel8nName ON the special ibgib index that points to its agents.
+ *
+ * So `agentIndex.rel8ns[AGENT_REL8N_NAME]` is a list of the agents (addrs)
+ * registered in the space.
+ *
+ * @see {@link MetaspaceService.getSpecialIbGib}
+ * @see {@link MetaspaceService.getSpecialRel8dIbGibs}
+ */
+export const AGENT_REL8N_NAME = 'agent';
+
+export const GEMINI_SCHEMA_AGENT_ID = {
+    type: 'string',
+    description: 'unique identifier for the agent. Should be provided to the agent in system instructions upon creation.',
+};
+
+export const GEMINI_SCHEMA_AGENT_TYPE = {
+    type: 'string',
+    description: 'type of the agent that governs basic responsibilities. Should be provided to the agent in system instructions upon creation.',
+}
+
+export const GEMINI_SCHEMA_SPACE_ID_FORAGENTS = {
+    type: 'string',
+    description: 'the id of a space, usually local user space. Each agent, atow (04/2025), has two spaces: a superSpace and a subSpace. The superSpace right now is just the default local user space for all agents, though this may change. The subSpace is particular only to the agent and corresponds to where internal ibgib notes/memories should be stored. So use the subSpace for internal notes, and superSpace for any user/interagent communications/notes.',
+}
+
+// #region TextSource enum
+/**
+ * @see {@link TextSource.HARDCODED}
+ */
+const TEXT_SOURCE_HARDCODED = 'hardcoded';
+/**
+ * @see {@link TextSource.HUMAN}
+ */
+const TEXT_SOURCE_HUMAN = 'human';
+/**
+ * @see {@link TextSource.AI}
+ */
+const TEXT_SOURCE_AI = 'ai';
+/**
+ * @see {@link TextSource.FUNCTION}
+ */
+const TEXT_SOURCE_FUNCTION = 'function';
+/**
+ * @see {@link TextSource.UNKNOWN}
+ */
+const TEXT_SOURCE_UNKNOWN = 'unknown';
+
+/**
+ * @see {@link TextSource}
+ */
+export type TextSource =
+    | typeof TEXT_SOURCE_HARDCODED
+    | typeof TEXT_SOURCE_HUMAN
+    | typeof TEXT_SOURCE_AI
+    | typeof TEXT_SOURCE_FUNCTION
+    | typeof TEXT_SOURCE_UNKNOWN
+    ;
+
+/**
+ * The source of the text, which helps the LLM differentiate
+ */
+export const TextSource = {
+    /**
+     * The text was hardcoded in the system.
+     */
+    HARDCODED: TEXT_SOURCE_HARDCODED as TextSource,
+    /**
+     * The text originated from a human.
+     */
+    HUMAN: TEXT_SOURCE_HUMAN as TextSource,
+    /**
+     * The text originated from an AI.
+     */
+    AI: TEXT_SOURCE_AI as TextSource,
+    /**
+     * The text originated from a function, e.g. a function response/result.
+     */
+    FUNCTION: TEXT_SOURCE_FUNCTION as TextSource,
+    /**
+     * The origin is unknown.
+     */
+    UNKNOWN: TEXT_SOURCE_UNKNOWN as TextSource,
+} satisfies { [key: string]: TextSource };
+
+export const TEXT_SOURCE_VALUES = Object.freeze(Object.values(TextSource));
+export function isTextSource(str: string): str is TextSource {
+    return !!str && TEXT_SOURCE_VALUES.includes(str as TextSource);
+}
+
+// #endregion TextSource enum
+
+export const GEMINI_SCHEMA_AGENTS_SELF_IDENTIFIED_NAME = {
+    type: 'string',
+    description: `The agent should pick a name with which to represent him/her/itself to the user. This should not be "Gemini" or something bland like that, rather, it should be a name that the agent likes. Should contain no spaces, only alphanumerics. Note that the example given has a name, but really it should be up to the agent's own preference. Please be consistent with this with yourself, i.e., don't change it once established. Must pass regex: ${AGENT_NAME_REGEXP.source}`,
+};