sliftutils 0.41.0 → 0.43.0

package/.cursorrules

@@ -79,6 +79,12 @@ Coding Styles
 
     Do not try catch for no reason. If you can't actually handle the exception, just let it throw.
 
+    For input events, always use event.currentTarget.
+
+    Use ref={elem => } callbacks. NEVER use .createRef.
+
+    NEVER render images with a fixed width+height. This will cause them to be stretched or cut off. This is terrible. Only set the width or height. 
+
 
 
 General Styling
@@ -107,8 +113,28 @@ API Calls
         APIController(getExtNodeId()).getModels()
 
 
+DiskCollection
+    If read an object from a collection, and then mutate it, and want to set it in the collection, you have to shallow copy it, so the DiskCollection picks up the change.
+        let x = collection.get("x");
+        x.y = Math.random();
+        // Not asynchronous, as sets are synchronous
+        collection.set("x", { ...x });
+    The non-async functions should be called in render functions, the async functions should be called in event handlers, etc. Except for .set, which should be called in all both cases. 
+    get(key: string): T | undefined;
+    async getPromise(key: string): Promise<T | undefined>;
+    set(key: string, value: T): void;
+    remove(key: string): void;
+    getKeys(): string[];
+    getKeysPromise(): Promise<string[]>;
+    getEntries(): [string, T][];
+    getValues(): T[];
+    async getValuesPromise(): Promise<T[]>;
+    getInfo(key: string);
+    async reset();
 
 css
+    Add very little styling, such as colours, rounding, etc, unless asked to add more styling.
+
     css should be set using className={css.cssPropertyName(cssPropertyValue).anotherPropertyName...}
     Always use the "css" helper for styling. For example:
         <div className={css.width(100).height(50)}>My width is 100px, my height is 50px</div>

package/index.d.ts

@@ -1,6 +1,25 @@
 // Auto-generated file. Do not edit manually.
 // Generated by: yarn generate-index-dts
 
+declare module "sliftutils/misc/apiKeys" {
+    import preact from "preact";
+    export declare class APIKeysControl extends preact.Component {
+        render(): preact.JSX.Element;
+    }
+    export declare const getAPIKey: {
+        (key: string): Promise<string>;
+        clear(key: string): void;
+        clearAll(): void;
+        forceSet(key: string, value: Promise<string>): void;
+        getAllKeys(): string[];
+        get(key: string): Promise<string> | undefined;
+    };
+    export declare class ManageAPIKeys extends preact.Component {
+        render(): string;
+    }
+
+}
+
 declare module "sliftutils/misc/environment" {
     export declare function isInChromeExtension(): string | false;
     export declare function isInChromeExtensionBackground(): boolean;
@@ -37,6 +56,55 @@ declare module "sliftutils/misc/matchFilter" {
 
 }
 
+declare module "sliftutils/misc/openrouter" {
+    export type MessageHistory = {
+        role: "system" | "user" | "assistant";
+        content: string;
+    }[];
+    export type MessageHistory2 = {
+        role: "system" | "user" | "assistant";
+        content: string | {
+            type: "image_url";
+            image_url: {
+                url: string;
+            };
+        }[];
+    }[];
+    export declare function getTotalCost(): number;
+    type OpenRouterOptions = {
+        provider?: {
+            sort?: "throughput" | "price" | "latency";
+            order?: string[];
+        };
+        reasoningEffort?: "low" | "medium" | "high";
+    };
+    /** IMPORTANT! Make sure to tell the AI to return yaml. */
+    export declare function yamlOpenRouterCall<T>(config: {
+        model: string;
+        messages: MessageHistory;
+        retries?: number;
+        options?: OpenRouterOptions;
+        onCost?: (cost: number) => void;
+        validate?: (response: T) => void;
+    }): Promise<T>;
+    export declare function openRouterCall(config: {
+        model: string;
+        messages: MessageHistory;
+        options?: OpenRouterOptions;
+        onCost?: (cost: number) => void;
+        retries?: number;
+    }): Promise<string>;
+    export declare function openRouterCallBase(config: {
+        model: string;
+        messages: MessageHistory2;
+        options?: OpenRouterOptions;
+        onCost?: (cost: number) => void;
+        retries?: number;
+    }): Promise<string>;
+    export {};
+
+}
+
 declare module "sliftutils/misc/random" {
     export declare function getSeededRandom(seed: number): () => number;
     export declare function shuffle<T>(array: T[], seed: number): T[];
@@ -384,6 +452,7 @@ declare module "sliftutils/render-utils/modal" {
     }): {
         close: () => void;
     };
+    export declare function closeAllModals(): void;
 
 }
 

package/misc/apiKeys.d.ts

@@ -0,0 +1,15 @@
+import preact from "preact";
+export declare class APIKeysControl extends preact.Component {
+    render(): preact.JSX.Element;
+}
+export declare const getAPIKey: {
+    (key: string): Promise<string>;
+    clear(key: string): void;
+    clearAll(): void;
+    forceSet(key: string, value: Promise<string>): void;
+    getAllKeys(): string[];
+    get(key: string): Promise<string> | undefined;
+};
+export declare class ManageAPIKeys extends preact.Component {
+    render(): string;
+}

package/misc/apiKeys.tsx

@@ -0,0 +1,136 @@
+import preact from "preact";
+import { cache, lazy } from "socket-function/src/caching";
+import { css, isNode } from "typesafecss";
+import fs from "fs";
+import os from "os";
+import { observable } from "mobx";
+import { InputLabel } from "../render-utils/InputLabel";
+import { showModal } from "../render-utils/modal";
+import { observer } from "../render-utils/observer";
+
+@observer
+class DirectoryPrompter extends preact.Component<{
+    valueKey: string;
+    onDone: (value: string) => void;
+}> {
+    synced = observable({
+        value: "",
+    });
+    render() {
+        const { valueKey, onDone } = this.props;
+        const { value } = this.synced;
+        return (
+            <div className={
+                css.position("fixed").pos(0, 0).size("100vw", "100vh")
+                    .zIndex(1)
+                    .hsla(0, 0, 20, 0.5)
+                    .center
+                    .fontSize(40)
+            }>
+                <InputLabel
+                    label={valueKey}
+                    value={value}
+                    onChangeValue={value => this.synced.value = value}
+                />
+                <button onClick={() => onDone(value)}>
+                    Done
+                </button>
+            </div>
+        );
+    }
+}
+
+
+function getStorageKey(key: string) {
+    if (isNode()) return os.homedir() + "/" + key;
+    return `apiKeys.ts_${key}`;
+}
+
+let state = observable({
+    keys: [] as string[],
+});
+if (!isNode()) {
+    try {
+        let newKeys = JSON.parse(localStorage.getItem(getStorageKey("__keys"))!);
+        if (Array.isArray(newKeys)) {
+            state.keys = newKeys;
+        }
+    } catch { }
+}
+
+@observer
+export class APIKeysControl extends preact.Component {
+    render() {
+        return (
+            <label className={css.hbox(4)}>
+                <span>Keys:</span>
+                <select>
+                    {state.keys.map(key =>
+                        <option>{key}</option>
+                    )}
+                </select>
+                <button onClick={() => {
+                    let key = state.keys[0];
+                    state.keys = state.keys.filter(k => k !== key);
+                    localStorage.setItem(getStorageKey("__keys"), JSON.stringify(state.keys));
+                    localStorage.removeItem(getStorageKey(key));
+                }}>
+                    Delete
+                </button>
+            </label>
+        );
+    }
+}
+
+let getStorage = lazy((): {
+    getItem: (key: string) => string | null;
+    setItem: (key: string, value: string) => void;
+} => {
+    if (!isNode()) return localStorage;
+    return {
+        getItem: (key) => {
+            if (!fs.existsSync(key)) return null;
+            return fs.readFileSync(key, "utf-8");
+        },
+        setItem: (key, value) => {
+            fs.writeFileSync(key, value);
+        },
+    };
+});
+
+export const getAPIKey = cache(async function getAPIKey(key: string): Promise<string> {
+    let keyKey = getStorageKey(key);
+    let localStorageValue = getStorage().getItem(keyKey);
+    if (localStorageValue?.startsWith("{")) {
+        try {
+            localStorageValue = JSON.parse(localStorageValue).key;
+        } catch { }
+    }
+    if (localStorageValue) {
+        return localStorageValue;
+    }
+    if (isNode()) throw new Error(`Add an api key to ${keyKey}`);
+
+    let onDone = (value: string) => { };
+    let promise = new Promise<string>(resolve => {
+        onDone = resolve;
+    });
+    let obj = showModal({ contents: <DirectoryPrompter valueKey={key} onDone={onDone} /> });
+    try {
+        let value = await promise;
+
+        getStorage().setItem(keyKey, value);
+        state.keys.push(key);
+        getStorage().setItem(getStorageKey("__keys"), JSON.stringify(state.keys));
+        return value;
+    } finally {
+        obj.close();
+    }
+});
+
+@observer
+export class ManageAPIKeys extends preact.Component {
+    render() {
+        return "ManageAPIKeys";
+    }
+}

package/misc/openrouter.d.ts

@@ -0,0 +1,45 @@
+export type MessageHistory = {
+    role: "system" | "user" | "assistant";
+    content: string;
+}[];
+export type MessageHistory2 = {
+    role: "system" | "user" | "assistant";
+    content: string | {
+        type: "image_url";
+        image_url: {
+            url: string;
+        };
+    }[];
+}[];
+export declare function getTotalCost(): number;
+type OpenRouterOptions = {
+    provider?: {
+        sort?: "throughput" | "price" | "latency";
+        order?: string[];
+    };
+    reasoningEffort?: "low" | "medium" | "high";
+};
+/** IMPORTANT! Make sure to tell the AI to return yaml. */
+export declare function yamlOpenRouterCall<T>(config: {
+    model: string;
+    messages: MessageHistory;
+    retries?: number;
+    options?: OpenRouterOptions;
+    onCost?: (cost: number) => void;
+    validate?: (response: T) => void;
+}): Promise<T>;
+export declare function openRouterCall(config: {
+    model: string;
+    messages: MessageHistory;
+    options?: OpenRouterOptions;
+    onCost?: (cost: number) => void;
+    retries?: number;
+}): Promise<string>;
+export declare function openRouterCallBase(config: {
+    model: string;
+    messages: MessageHistory2;
+    options?: OpenRouterOptions;
+    onCost?: (cost: number) => void;
+    retries?: number;
+}): Promise<string>;
+export {};

package/misc/openrouter.ts

@@ -0,0 +1,152 @@
+import { parseYAML } from "sliftutils/misc/yaml";
+import { retryFunctional } from "socket-function/src/batching";
+import { formatNumber } from "socket-function/src/formatting/format";
+import { getAPIKey } from "./apiKeys";
+
+export type MessageHistory = {
+    role: "system" | "user" | "assistant";
+    content: string;
+}[];
+export type MessageHistory2 = {
+    role: "system" | "user" | "assistant";
+    content: string | {
+        type: "image_url";
+        image_url: {
+            url: string;
+        };
+    }[];
+}[];
+
+let totalCost = 0;
+export function getTotalCost() {
+    return totalCost;
+}
+type OpenRouterOptions = {
+    provider?: {
+        sort?: "throughput" | "price" | "latency",
+        // https://openrouter.ai/docs/features/provider-routing#ordering-specific-providers
+        order?: string[],
+    }
+    reasoningEffort?: "low" | "medium" | "high",
+};
+/** IMPORTANT! Make sure to tell the AI to return yaml. */
+export async function yamlOpenRouterCall<T>(config: {
+    model: string;
+    messages: MessageHistory;
+    retries?: number;
+    options?: OpenRouterOptions;
+    onCost?: (cost: number) => void;
+    validate?: (response: T) => void;
+}): Promise<T> {
+    let { model, messages, retries = 3, options, onCost } = config;
+    try {
+        let response = await openRouterCall({ model, messages, options, onCost, retries: 0 });
+        let result = parseYAML(response) as T;
+        config.validate?.(result);
+        return result;
+    } catch (error) {
+        if (retries > 0) {
+            return yamlOpenRouterCall<T>({ model, messages, retries: retries - 1, onCost });
+        }
+        throw error;
+    }
+}
+
+let pendingLog: {
+    count: number;
+    duration: number;
+    cost: number;
+} | undefined = undefined;
+
+export async function openRouterCall(config: {
+    model: string;
+    messages: MessageHistory;
+    options?: OpenRouterOptions;
+    onCost?: (cost: number) => void;
+    retries?: number;
+}): Promise<string> {
+    return await openRouterCallBase(config);
+}
+
+export async function openRouterCallBase(config: {
+    model: string;
+    messages: MessageHistory2;
+    options?: OpenRouterOptions;
+    onCost?: (cost: number) => void;
+    retries?: number;
+}): Promise<string> {
+    let { model, messages, options, onCost } = config;
+    let openrouterKey = await getAPIKey("openrouter.json");
+    console.log(`Calling ${model} with ${messages.length} messages`);
+    let time = Date.now();
+    let stillRunning = true;
+
+    // Spawn monitoring loop
+    void (async () => {
+        while (stillRunning) {
+            await new Promise(resolve => setTimeout(resolve, 5000));
+            if (stillRunning) {
+                console.log("OpenRouter call still running...");
+            }
+        }
+    })();
+
+    try {
+        return await retryFunctional(async () => {
+            let response = await fetch("https://openrouter.ai/api/v1/chat/completions", {
+                method: "POST",
+                headers: {
+                    "Authorization": `Bearer ${openrouterKey}`,
+                    "Content-Type": "application/json",
+                },
+                body: JSON.stringify({
+                    model,
+                    messages,
+                    provider: {
+                        sort: "throughput",
+                    },
+                    usage: { include: true },
+                    ...options,
+                }),
+            });
+
+            // If it failed, throw
+            if (response.status !== 200) {
+                let responseText = await response.text();
+                throw new Error(`Failed to call OpenRouter: ${response.status} ${response.statusText} ${responseText}`);
+            }
+            let responseObj = await response.json() as {
+                usage: {
+                    cost: number;
+                };
+                choices: {
+                    message: {
+                        content: string;
+                    };
+                }[];
+            };
+            let newCost = responseObj.usage.cost;
+            totalCost += newCost;
+            onCost?.(newCost);
+            if (!pendingLog) {
+                pendingLog = {
+                    count: 0,
+                    duration: 0,
+                    cost: 0,
+                };
+                setTimeout(() => {
+                    let log = pendingLog;
+                    if (!log) return;
+                    console.log(`Ran: ${log.count} calls at a total summed cost of ${formatNumber(1 / log.cost)}/USD`);
+                    pendingLog = undefined;
+                }, 10_000);
+            }
+            pendingLog.count++;
+            pendingLog.duration += Date.now() - time;
+            pendingLog.cost += newCost;
+            return responseObj.choices[0].message.content as string;
+        }, { maxRetries: config.retries || 3 })();
+    } finally {
+        stillRunning = false;
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "sliftutils",
-    "version": "0.41.0",
+    "version": "0.43.0",
     "main": "index.js",
     "license": "MIT",
     "files": [

package/render-utils/Anchor.tsx

@@ -15,7 +15,13 @@ export class Anchor extends preact.Component<{
         const { params, button, className, ...remaining } = this.props;
         let resolvedParams = params.map(getResolvedParam);
         let searchObj = new URLSearchParams(window.location.search);
-        let selected = resolvedParams.every(([param, value]) => searchObj.get(param) === value);
+        let selected = resolvedParams.every(([param, value], index) => {
+            let originalValue = params[index][0];
+            if (!(typeof originalValue === "string") && originalValue.value === value) {
+                return true;
+            }
+            return searchObj.get(param) === value;
+        });
         let link = (
             <a
                 {...remaining}

package/render-utils/modal.d.ts

@@ -4,3 +4,4 @@ export declare function showModal(config: {
 }): {
     close: () => void;
 };
+export declare function closeAllModals(): void;

package/render-utils/modal.tsx

@@ -1,18 +1,51 @@
 import preact from "preact";
+import { observable } from "mobx";
+import * as mobx from "mobx";
+import { observer } from "./observer";
+import { lazy } from "socket-function/src/caching";
+
+// Global observable map to store all active modals
+const activeModals = new mobx.ObservableMap<string, preact.ComponentChildren>();
+
+@observer
+class ModalRoot extends preact.Component {
+    render() {
+        const modals: Array<[string, preact.ComponentChildren]> = Array.from(activeModals.entries());
+        return <>
+            {modals.map(([id, contents]) => (
+                <div key={id}>
+                    {contents}
+                </div>
+            ))}
+        </>;
+    }
+}
+
+const ensureRootMounted = lazy(() => {
+    const root = document.createElement("div");
+    document.body.appendChild(root);
+    preact.render(<ModalRoot />, root);
+});
+
+let modalIdCounter = 0;
 
 export function showModal(config: {
     contents: preact.ComponentChildren;
 }): {
     close: () => void;
 } {
-    let root = document.createElement("div");
-    document.body.appendChild(root);
-    preact.render(config.contents, root);
+    ensureRootMounted();
+
+    const id = `modal-${modalIdCounter++}`;
+    activeModals.set(id, config.contents);
 
     return {
         close() {
-            preact.render(undefined, root);
-            document.body.removeChild(root);
+            activeModals.delete(id);
         }
     };
+}
+
+export function closeAllModals() {
+    activeModals.clear();
 }

package/web/Page.tsx

@@ -31,6 +31,12 @@ export class Page extends preact.Component {
             el.click();
         }
     };
+    componentDidMount() {
+        document.addEventListener("keydown", this.onKeyDown);
+    }
+    componentWillUnmount() {
+        document.removeEventListener("keydown", this.onKeyDown);
+    }
     render() {
         let pages = [
             {
@@ -43,7 +49,7 @@ export class Page extends preact.Component {
 
         return (
             <div className={css.size("100vw", "100vh").vbox(0)}>
-                <div className={css.hbox(12).pad2(20)}>
+                <div className={css.hbox(12).pad2(20, 0)}>
                     {pages.map(p => (
                         <Anchor key={p.key} params={[[pageURL, p.key]]}>
                             {p.key}