settings

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112// The General section: appearance, runs, session import and the bug report.
// HTM whitespace is significant; keep these templates out of Prettier's HTML formatter.
import { html as htm } from "convergence";
import type { EffectViewContext } from "convergence/effect";
import type { SettingsPage } from "../controller.ts";
import { card, limit, section, segmented, setting, column } from "./layout.ts";

export function renderGeneral(ctx: EffectViewContext<object>, actions: SettingsPage["Service"]) {
  const state = actions.state;
  const s = state.settings;
  // `renderGeneral` runs only once the settings have loaded.
  if (!s) return htm`<empty>Loading…</empty>`;
  return htm`
      <div ...${column} gap="large" padding="small">
        ${section(
          "Appearance",
          null,
          card([
            setting({
              title: "Color scheme",
              description: "Follow the system, or keep one look.",
              control: segmented(
                "appearance",
                s.appearance,
                [
                  { value: "system", label: "System" },
                  { value: "light", label: "Light" },
                  { value: "dark", label: "Dark" },
                ],
                (value) => ctx.run(actions.changeAppearance(value)),
              ),
            }),
            setting({
              title: "Theme",
              description: "Presets, colours, type and density: the Themes plugin's settings.",
              control: htm`<button id="open-themes" label="Edit themes" onClick=${() => ctx.run(actions.openSection("plugin:themes", "themes"))} />`,
            }),
          ]),
        )}
        ${section(
          "Runs",
          null,
          card([
            setting({
              title: "Checkpoints",
              description:
                "Record the workspace before every prompt, so a message can be reverted together with the files it changed.",
              control: htm`<switch id="checkpoints" label="" checked=${s.checkpoints} onChange=${(e: { value: boolean }) => ctx.run(actions.updateSettings({ checkpoints: e.value }))} />`,
            }),
            setting({
              title: "Keep checkpoints for",
              description: "Older checkpoints are deleted, and their messages can no longer be reverted.",
              control: limit(
                "checkpoint-days",
                s.checkpointRetentionDays,
                [7, 14, 30, 90],
                (days) => `${days} days`,
                "Forever",
                (value) => ctx.run(actions.updateSettings({ checkpointRetentionDays: value })),
              ),
            }),
            setting({
              title: "Checkpoint storage limit",
              description: "Past this size the oldest checkpoints go first. Those from the last day are always kept.",
              control: limit(
                "checkpoint-size",
                s.checkpointMaxMegabytes,
                [512, 1024, 2048, 5120, 10240],
                (mb) => (mb < 1024 ? `${mb} MB` : `${mb / 1024} GB`),
                "No limit",
                (value) => ctx.run(actions.updateSettings({ checkpointMaxMegabytes: value })),
              ),
            }),
          ]),
        )}
        ${section(
          "Sessions",
          null,
          card([
            setting({
              title: "Import sessions",
              description: "Bring existing sessions from enabled agents into a workspace.",
              wide: true,
              control: htm`
              <div ...${column} gap="small" padding="small">
                <select id="import-workspace" value=${state.importWorkspace ?? ""} placeholder="Add a workspace first"
                  options=${state.workspaces.map((w) => ({ value: w.id, label: w.name }))}
                  onChange=${(e: { value: string }) => {
                    state.importWorkspace = e.value;
                    ctx.update();
                  }} />
                <button id="import-sessions" label="Import sessions" icon="inbox"
                  loading=${state.importing} disabled=${state.importing || !state.importWorkspace || !state.agents.some((agent) => agent.enabled)}
                  onClick=${() => ctx.run(actions.importSessions())} />
              </div>`,
            }),
          ]),
        )}
        ${section(
          "Help",
          null,
          card([
            setting({
              title: "Report a bug",
              description:
                "Tell us, or a plugin's publisher, what went wrong. You see everything that is sent before it goes.",
              control: htm`<button id="report-bug" label="Report a bug…" icon="bug" variant="outline" onClick=${() => ctx.run(actions.reportBug())} />`,
            }),
          ]),
        )}
      </div>`;
}