path: root/desktop/modules/assistant/AssistantPage.qml

// Copyright (C) 2026 Danilo M. <danix@danix.xyz>
//
// This program is free software; you can redistribute it and/or modify
// it under the terms of the GNU General Public License version 2 as
// published by the Free Software Foundation.
//
// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.

import QtQuick
import QtQuick.Controls
import "../.."

// The view over AssistantModule: the model settings, the tools' environment,
// the tools themselves, and the restart that applies them. Every field and
// switch edits the module's draft; the header's Save writes it. Emptied, a
// field falls back to the daemon's default, which it shows as placeholder.
Column {
    id: page
    spacing: 8

    // The module. Not named `am`, its id (it would bind to itself).
    required property QtObject asst

    readonly property var v: asst.values
    readonly property var d: asst.defaults

    // What the daemon would run with: the file's value, else the default.
    function shown(key) {
        const x = page.v[key] !== undefined ? page.v[key] : page.d[key];
        return x === undefined || x === null ? "" : String(x);
    }

    component Small: Text {
        color: Theme.subtext
        font { family: Theme.fontFamily; pixelSize: Theme.fontSize - 4 }
    }

    component Heading: Text {
        topPadding: 14
        font { family: Theme.fontFamily; pixelSize: Theme.fontSize; bold: true }
        color: Theme.text
    }

    // A one-line input reporting every keystroke, which the page turns into
    // a draft edit. It is not bound to value, which would reset the cursor
    // and eat a trailing space; it follows the value only when the draft
    // moves under it (Discard, an add). bad outlines a refused value.
    component Field: Rectangle {
        id: field
        property string value: ""
        property string placeholder: ""
        property bool bad: false
        signal edited(string text)
        signal accepted
        height: 34
        radius: 8
        color: Theme.surface
        border.width: field.bad ? 1 : 0
        border.color: Theme.red
        onValueChanged: if (ti.text.trim() !== field.value.trim()) ti.text = field.value
        onBadChanged: if (!field.bad) ti.text = field.value
        TextInput {
            activeFocusOnTab: true
            id: ti
            anchors { fill: parent; leftMargin: 10; rightMargin: 10 }
            verticalAlignment: TextInput.AlignVCenter
            clip: true
            selectByMouse: true
            color: Theme.text
            font { family: Theme.fontFamily; pixelSize: Theme.fontSize - 2 }
            Component.onCompleted: text = field.value
            onTextEdited: field.edited(text)
            onAccepted: field.accepted()
            Text {
                anchors.verticalCenter: parent.verticalCenter
                width: parent.width
                elide: Text.ElideRight
                visible: parent.text === ""
                text: field.placeholder
                color: Theme.overlay
                font: parent.font
            }
        }
    }

    // A labelled row: label on the left, the control filling the rest.
    component Labelled: Item {
        property alias label: lbl.text
        default property alias control: slot.data
        width: page.width
        height: 34
        Text {
            id: lbl
            anchors { left: parent.left; verticalCenter: parent.verticalCenter }
            width: 120
            color: Theme.subtext
            font { family: Theme.fontFamily; pixelSize: Theme.fontSize - 3 }
        }
        Item {
            id: slot
            anchors { left: lbl.right; leftMargin: 8; right: parent.right; top: parent.top; bottom: parent.bottom }
        }
    }

    // --- restart ---

    Rectangle {
        width: page.width
        height: bar.implicitHeight + 20
        radius: 10
        color: page.asst.pending ? Qt.alpha(Theme.accent, 0.16) : Qt.alpha(Theme.surface, 0.35)
        border.width: 1
        border.color: page.asst.pending ? Qt.alpha(Theme.accent, 0.5) : Qt.alpha(Theme.text, 0.08)

        Column {
            id: bar
            anchors { left: parent.left; right: parent.right; verticalCenter: parent.verticalCenter; margins: 12 }
            spacing: 6

            Item {
                width: parent.width
                height: 30
                Text {
                    anchors { left: parent.left; right: restartBtn.left; rightMargin: 8; verticalCenter: parent.verticalCenter }
                    wrapMode: Text.Wrap
                    text: page.asst.pending ? "Saved. The assistant reads these at startup: restart it to apply."
                                            : "The assistant reads these at startup: Save, then restart it."
                    color: Theme.text
                    font { family: Theme.fontFamily; pixelSize: Theme.fontSize - 3 }
                }
                Button {
                    id: restartBtn
                    anchors { right: parent.right; verticalCenter: parent.verticalCenter }
                    text: page.asst.restarting ? "Restarting…" : "Restart assistant"
                    enabled: !page.asst.restarting
                    onClicked: page.asst.restart()
                }
            }

            Small {
                width: parent.width
                visible: page.asst.status !== ""
                wrapMode: Text.Wrap
                text: page.asst.status
                color: page.asst.status === "Restarted." ? Theme.green : Theme.red
            }
        }
    }

    Text {
        width: page.width
        visible: page.asst.error !== ""
        wrapMode: Text.Wrap
        text: page.asst.error
        color: Theme.red
        font { family: Theme.fontFamily; pixelSize: Theme.fontSize - 4 }
    }

    // --- model ---

    Heading { text: "Model" }

    Small {
        width: page.width
        wrapMode: Text.Wrap
        text: "Each chat uses the model picked in the canvas header, else the preferred one. "
            + "Opening the canvas loads that model if it is a local one and another is in. "
            + "Load swaps a model in now, for every client, without changing the preference."
    }

    Small {
        visible: page.asst.models.length === 0
        text: "llama-server is not answering at " + page.asst.llm
        color: Theme.red
    }

    Repeater {
        model: page.asst.models

        delegate: Rectangle {
            id: modelRow
            required property var modelData
            readonly property bool loaded: modelData.status === "loaded"
            readonly property bool busy: page.asst.loading === modelData.id
            readonly property bool preferred: Prefs.assistantModel === modelData.id
            objectName: "model:" + modelData.id
            width: page.width
            height: 40
            radius: 8
            color: loaded ? Qt.alpha(Theme.accent, 0.14) : Qt.alpha(Theme.surface, 0.35)
            border.width: 1
            border.color: loaded ? Qt.alpha(Theme.accent, 0.5) : "transparent"

            Rectangle {
                id: dot
                anchors { left: parent.left; leftMargin: 12; verticalCenter: parent.verticalCenter }
                width: 8; height: 8; radius: 4
                color: modelRow.loaded ? Theme.green : modelRow.busy ? Theme.yellow : Theme.overlay
            }
            Text {
                id: modelName
                anchors { left: dot.right; leftMargin: 10; verticalCenter: parent.verticalCenter }
                text: modelRow.modelData.id
                color: Theme.text
                font { family: Theme.fontFamily; pixelSize: Theme.fontSize - 2; bold: modelRow.loaded }
            }
            Small {
                anchors { left: modelName.right; leftMargin: 10; verticalCenter: parent.verticalCenter }
                text: [modelRow.busy ? "loading…" : modelRow.modelData.status,
                       modelRow.preferred ? "preferred" : ""].filter(s => s).join("  ·  ")
                color: modelRow.preferred ? Theme.accent : Theme.subtext
            }
            // Two separate choices: which model the assistant prefers, kept,
            // and which one is loaded now, a swap for every client.
            Button {
                id: loadBtn
                anchors { right: parent.right; rightMargin: 6; verticalCenter: parent.verticalCenter }
                text: "Load"
                enabled: page.asst.loading === "" && !modelRow.loaded
                onClicked: page.asst.loadModel(modelRow.modelData.id)
            }
            Button {
                anchors { right: loadBtn.left; rightMargin: 6; verticalCenter: parent.verticalCenter }
                text: modelRow.preferred ? "Preferred" : "Prefer"
                enabled: !modelRow.preferred
                onClicked: Prefs.setAssistantModel(modelRow.modelData.id)
            }
        }
    }

    // The saved cloud models: Prefer only, there is nothing to load.
    Repeater {
        model: page.asst.cloudIds

        delegate: Rectangle {
            id: cloudRow
            required property string modelData
            readonly property bool preferred: Prefs.assistantModel === modelData
            objectName: "model:" + modelData
            width: page.width
            height: 40
            radius: 8
            color: Qt.alpha(Theme.surface, 0.35)

            // nf-fa-cloud, present in Inconsolata Nerd Font.
            Text {
                id: cloudIcon
                anchors { left: parent.left; leftMargin: 10; verticalCenter: parent.verticalCenter }
                text: ""
                color: Theme.subtext
                font { family: Theme.iconFamily; pixelSize: Theme.fontSize - 4 }
            }
            Text {
                id: cloudName
                anchors { left: cloudIcon.right; leftMargin: 8; verticalCenter: parent.verticalCenter }
                text: cloudRow.modelData
                color: Theme.text
                font { family: Theme.fontFamily; pixelSize: Theme.fontSize - 2 }
            }
            Small {
                anchors { left: cloudName.right; leftMargin: 10; verticalCenter: parent.verticalCenter }
                visible: cloudRow.preferred
                text: "preferred"
                color: Theme.accent
            }
            Button {
                anchors { right: parent.right; rightMargin: 6; verticalCenter: parent.verticalCenter }
                text: cloudRow.preferred ? "Preferred" : "Prefer"
                enabled: !cloudRow.preferred
                onClicked: Prefs.setAssistantModel(cloudRow.modelData)
            }
        }
    }

    Small {
        width: page.width
        visible: page.asst.modelError !== ""
        wrapMode: Text.Wrap
        text: page.asst.modelError
        color: Theme.red
    }

    Labelled {
        objectName: "key:llm"
        label: "Server"
        Field {
            anchors.fill: parent
            value: page.v.llm ?? ""
            placeholder: page.d.llm ?? ""
            onEdited: t => page.asst.setKey("llm", t.trim() ? page.asst.quote(t.trim()) : null)
        }
    }

    Labelled {
        objectName: "key:temperature"
        label: "Temperature"
        Field {
            id: temp
            anchors { left: parent.left; top: parent.top; bottom: parent.bottom }
            width: 120
            value: page.v.temperature !== undefined ? String(page.v.temperature) : ""
            placeholder: "the model's preset"
            bad: page.asst.invalid["key:temperature"] ?? false
            onEdited: t => {
                const x = Number(t.trim());
                const ok = t.trim() === "" || (!isNaN(x) && x >= 0 && x <= 2);
                page.asst.markInvalid("key:temperature", !ok);
                if (ok) page.asst.setKey("temperature", t.trim() === "" ? null : String(x));
            }
        }
        Small {
            anchors { left: temp.right; leftMargin: 10; verticalCenter: parent.verticalCenter }
            text: "0 to 2; empty uses the llama-server preset's"
            color: temp.bad ? Theme.red : Theme.subtext
        }
    }

    Labelled {
        objectName: "key:tool_rounds"
        label: "Tool rounds"
        Field {
            id: rounds
            anchors { left: parent.left; top: parent.top; bottom: parent.bottom }
            width: 120
            value: page.v.tool_rounds !== undefined ? String(page.v.tool_rounds) : ""
            placeholder: page.d.tool_rounds !== undefined ? String(page.d.tool_rounds) : ""
            bad: page.asst.invalid["key:tool_rounds"] ?? false
            onEdited: t => {
                const n = Number(t.trim());
                const ok = t.trim() === "" || (Number.isInteger(n) && n >= 0 && n <= 20);
                page.asst.markInvalid("key:tool_rounds", !ok);
                if (ok) page.asst.setKey("tool_rounds", t.trim() === "" ? null : String(n));
            }
        }
        Small {
            anchors { left: rounds.right; leftMargin: 10; verticalCenter: parent.verticalCenter }
            text: "a whole number, 0 to 20: tool round trips per question"
            color: rounds.bad ? Theme.red : Theme.subtext
        }
    }

    Labelled {
        objectName: "key:thinking"
        label: "Thinking"
        Switch {
            id: think
            anchors.verticalCenter: parent.verticalCenter
            checked: page.shown("thinking") !== "false"
            onToggled: on => page.asst.setKey("thinking", on ? "true" : "false")
        }
        Small {
            anchors { left: think.right; leftMargin: 10; verticalCenter: parent.verticalCenter }
            text: "off skips the model's reasoning: a faster first word"
        }
    }

    // The prompt is long and multi-line, so it gets its own box and an
    // explicit Save rather than Enter.
    Column {
        objectName: "key:system"
        width: page.width
        spacing: 6

        Text {
            text: "System prompt"
            color: Theme.subtext
            font { family: Theme.fontFamily; pixelSize: Theme.fontSize - 3 }
        }

        Rectangle {
            width: parent.width
            height: 130
            radius: 8
            color: Theme.surface

            ScrollView {
                anchors { fill: parent; margins: 8 }
                TextArea {
                    id: prompt
                    wrapMode: TextEdit.Wrap
                    selectByMouse: true
                    color: Theme.text
                    font { family: Theme.fontFamily; pixelSize: Theme.fontSize - 3 }
                    background: null
                    padding: 0
                    text: page.shown("system")
                    // Into the draft as it is typed; the default, or nothing,
                    // unsets the key rather than copying the default in.
                    onTextChanged: if (prompt.text !== page.shown("system"))
                        page.asst.setKey("system", prompt.text.trim() === "" || prompt.text === page.d.system
                                                   ? null : page.asst.quote(prompt.text))
                }
            }
        }

        Row {
            spacing: 8
            Button {
                text: "Use the default"
                enabled: page.v.system !== undefined
                onClicked: page.asst.setKey("system", null)
            }
            Small {
                anchors.verticalCenter: parent.verticalCenter
                text: page.v.system !== undefined ? "custom" : "default"
            }
        }
    }

    // --- env ---

    // --- cloud ---

    Heading { text: "Cloud" }

    Small {
        width: page.width
        wrapMode: Text.Wrap
        text: "Providers with an OpenAI-compatible API, offered in the canvas's model menu. A cloud "
            + "chat is sent its history, attachments and the results of the tools marked "
            + "cloud = true; voice is still transcribed here. The key command prints the API key: "
            + "the assistant runs it at startup and on Fetch, which saves this page first."
    }

    Small {
        width: page.width
        visible: page.asst.clouds === null
        wrapMode: Text.Wrap
        text: "config.toml has a [[cloud]] table this page cannot read; edit it by hand."
        color: Theme.red
    }

    Repeater {
        model: page.asst.clouds === null ? 0 : page.asst.cloudCount

        delegate: Rectangle {
            id: prov
            required property int index
            readonly property var c: page.asst.clouds?.[index] ?? { name: "", url: "", key_cmd: "", models: [] }
            readonly property var got: page.asst.fetched[prov.c.name]
            objectName: "cloud:" + index
            width: page.width
            height: provCol.implicitHeight + 20
            radius: 8
            color: Qt.alpha(Theme.surface, 0.35)

            Column {
                id: provCol
                anchors { left: parent.left; right: parent.right; top: parent.top; margins: 10 }
                spacing: 6

                Labelled {
                    width: provCol.width
                    label: "Name"
                    Field {
                        anchors.fill: parent
                        value: prov.c.name
                        placeholder: "openrouter"
                        onEdited: t => page.asst.editCloud(prov.index, { name: t.trim() })
                    }
                }
                Labelled {
                    width: provCol.width
                    label: "URL"
                    Field {
                        anchors.fill: parent
                        value: prov.c.url
                        placeholder: "https://openrouter.ai/api/v1"
                        onEdited: t => page.asst.editCloud(prov.index, { url: t.trim() })
                    }
                }
                Labelled {
                    width: provCol.width
                    label: "Key command"
                    Field {
                        anchors.fill: parent
                        value: prov.c.key_cmd
                        placeholder: "pass show llm/openrouter"
                        onEdited: t => page.asst.editCloud(prov.index, { key_cmd: t.trim() })
                    }
                }
                Row {
                    spacing: 6
                    Button {
                        text: page.asst.fetching === prov.c.name ? "Fetching…" : "Fetch models"
                        enabled: page.asst.fetching === "" && page.asst.valid && prov.c.name !== ""
                        onClicked: page.asst.fetchModels(prov.c.name)
                    }
                    Button {
                        text: "Remove"
                        danger: true
                        onClicked: page.asst.removeCloud(prov.index)
                    }
                }
                Small {
                    width: provCol.width
                    visible: typeof prov.got === "string"
                    wrapMode: Text.Wrap
                    text: typeof prov.got === "string" ? prov.got : ""
                    color: Theme.red
                }
                // The fetched ids and any kept from before, each switched
                // into models or out of it.
                Repeater {
                    model: Array.isArray(prov.got)
                        ? [...new Set(prov.got.concat(prov.c.models))].sort() : prov.c.models

                    delegate: Item {
                        id: idRow
                        required property string modelData
                        width: provCol.width
                        height: 28
                        Switch {
                            id: idOn
                            anchors { left: parent.left; verticalCenter: parent.verticalCenter }
                            checked: prov.c.models.includes(idRow.modelData)
                            onToggled: on => page.asst.editCloud(prov.index, { models: on
                                ? prov.c.models.concat([idRow.modelData])
                                : prov.c.models.filter(m => m !== idRow.modelData) })
                        }
                        Text {
                            anchors { left: idOn.right; leftMargin: 10; verticalCenter: parent.verticalCenter }
                            text: idRow.modelData
                            color: Theme.text
                            font { family: Theme.fontFamily; pixelSize: Theme.fontSize - 3 }
                        }
                    }
                }
            }
        }
    }

    Small {
        width: page.width
        visible: page.asst.cloudError !== ""
        wrapMode: Text.Wrap
        text: page.asst.cloudError
        color: Theme.red
    }

    Button {
        text: "Add provider"
        enabled: page.asst.clouds !== null
        onClicked: page.asst.editCloud(page.asst.cloudCount, {})
    }

    Heading { text: "Tool environment" }
    Small {
        width: page.width
        wrapMode: Text.Wrap
        text: "Added to every tool's environment: instance URLs, key file paths."
    }

    property string confirming: ""

    Repeater {
        model: page.asst.envKeys

        delegate: Item {
            id: envRow
            required property string modelData
            objectName: "env:" + modelData
            width: page.width
            height: 34

            Text {
                id: envKey
                anchors { left: parent.left; verticalCenter: parent.verticalCenter }
                width: 120
                elide: Text.ElideRight
                text: envRow.modelData
                color: Theme.subtext
                font { family: Theme.fontFamily; pixelSize: Theme.fontSize - 3 }
            }
            Field {
                anchors { left: envKey.right; leftMargin: 8; right: envDel.left; rightMargin: 8; top: parent.top; bottom: parent.bottom }
                value: page.asst.envValue(envRow.modelData)
                onEdited: t => page.asst.setEnv(envRow.modelData, t)
            }
            Button {
                id: envDel
                anchors { right: parent.right; verticalCenter: parent.verticalCenter }
                danger: true
                text: page.confirming === envRow.modelData ? "Confirm" : "Remove"
                onClicked: {
                    if (page.confirming === envRow.modelData) {
                        page.confirming = "";
                        page.asst.setEnv(envRow.modelData, null);
                    } else page.confirming = envRow.modelData;
                }
            }
        }
    }

    // The add row: a key, a value, Add.
    property string newKey: ""
    property string newValue: ""
    readonly property bool keyOk: /^[A-Za-z_][A-Za-z0-9_]*$/.test(page.newKey)
                                  && !page.asst.envList.some(e => e.key === page.newKey)
    function addEnv() {
        if (!page.keyOk) return;
        page.asst.setEnv(page.newKey, page.newValue);
        page.newKey = "";
        page.newValue = "";
    }

    Item {
        width: page.width
        height: 34
        Field {
            id: keyField
            anchors { left: parent.left; top: parent.top; bottom: parent.bottom }
            width: 120
            value: page.newKey
            placeholder: "NEW_KEY"
            onEdited: t => page.newKey = t
        }
        Field {
            anchors { left: keyField.right; leftMargin: 8; right: addBtn.left; rightMargin: 8; top: parent.top; bottom: parent.bottom }
            value: page.newValue
            placeholder: "value"
            onEdited: t => page.newValue = t
            onAccepted: page.addEnv()
        }
        Button {
            id: addBtn
            anchors { right: parent.right; verticalCenter: parent.verticalCenter }
            text: "Add"
            enabled: page.keyOk
            onClicked: page.addEnv()
        }
    }

    // --- tools ---

    Heading { text: "Tools" }
    Small {
        width: page.width
        wrapMode: Text.Wrap
        text: "What the model may call. Off renames the file to .toml.off, which the daemon skips. "
            + "Cloud also offers it to cloud chats, which then receive its results."
    }

    Repeater {
        model: page.asst.tools

        delegate: Item {
            id: toolRow
            required property var modelData
            objectName: "tool:" + modelData.name
            width: page.width
            height: Math.max(40, toolText.implicitHeight + 10)

            Switch {
                id: toolSw
                anchors { left: parent.left; verticalCenter: parent.verticalCenter }
                checked: page.asst.toolOn(toolRow.modelData)
                onToggled: page.asst.toggleTool(toolRow.modelData)
            }
            // nf-fa-cloud, then the tool's cloud = true.
            Switch {
                id: cloudSw
                anchors { right: parent.right; verticalCenter: parent.verticalCenter }
                checked: page.asst.toolCloud(toolRow.modelData)
                onToggled: page.asst.toggleCloud(toolRow.modelData)
            }
            Text {
                id: cloudMark
                anchors { right: cloudSw.left; rightMargin: 8; verticalCenter: parent.verticalCenter }
                text: "\uf0c2"
                color: page.asst.toolCloud(toolRow.modelData) ? Theme.text : Theme.subtext
                font { family: Theme.iconFamily; pixelSize: Theme.fontSize - 4 }
            }
            Column {
                id: toolText
                anchors { left: toolSw.right; leftMargin: 10; right: cloudMark.left; rightMargin: 10
                          verticalCenter: parent.verticalCenter }
                Text {
                    text: toolRow.modelData.name
                    color: page.asst.toolOn(toolRow.modelData) ? Theme.text : Theme.subtext
                    font { family: Theme.fontFamily; pixelSize: Theme.fontSize - 2; bold: true }
                }
                Small {
                    width: parent.width
                    wrapMode: Text.Wrap
                    text: toolRow.modelData.description
                }
            }
        }
    }
}