Automation editor with graphical schedule and assistant; movable chat list groups
Automations
- Job files hold only the instructions; name, schedule, mode, model, approval
mode and time limit are settings in the database (jobs.settings). Existing
files are adopted on start-up (frontmatter into the database and removed from
the file); plain Markdown files registered later get default settings and stay
switched off until scheduled.
- New automation: name, project and a starting point (blank example structure or
a template) create .codecraft/jobs/<name>.md and open the editor: settings with
a graphical cron builder (next runs in server time via /jobs/schedule), the
instructions in the Markdown editor and an assistant chat
(POST /jobs/{id}/assistant) whose model edits the file; the editor reloads it
after each turn and warns about conflicts with unsaved edits.
- The schedule tool writes prompt-only files with settings.
Chat list
- Folders and projects keep a user-defined order and can be pinned (drag and
drop, or the group's menu), stored per user via /account/sidebar. A new
message moves the chat to the top of its group, no longer the project itself.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Richard ZinkandClaude Opus 5.5 committed
1 parent
872ebb94dd
commit
05c215f685
19 files changed
+1661
-356
No files matched your search
@@ -0,0 +1,217 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { get } from "../api";
|
||||
import { getLang, useT } from "../i18n";
|
||||
|
||||
/**
|
||||
* Graphical editor for a 5-field cron expression (minute hour day month weekday,
|
||||
* server time zone): every N minutes, hourly, daily, on weekdays, monthly – or a
|
||||
* custom expression. Shows the next runs as computed by the server.
|
||||
*/
|
||||
type Mode = "minutes" | "hourly" | "daily" | "weekly" | "monthly" | "custom";
|
||||
|
||||
interface State {
|
||||
mode: Mode;
|
||||
every: number;
|
||||
minute: number;
|
||||
time: string; // HH:MM
|
||||
days: number[]; // cron weekdays, 0 = Sunday
|
||||
dom: number;
|
||||
custom: string;
|
||||
}
|
||||
|
||||
const MINUTE_STEPS = [5, 10, 15, 20, 30];
|
||||
/** Monday first; cron numbers (0 = Sunday). */
|
||||
const WEEK = [1, 2, 3, 4, 5, 6, 0];
|
||||
|
||||
const pad = (n: number) => String(n).padStart(2, "0");
|
||||
const hhmm = (h: string, m: string) => `${pad(Number(h))}:${pad(Number(m))}`;
|
||||
|
||||
function expandDays(field: string): number[] | null {
|
||||
const out = new Set<number>();
|
||||
for (const part of field.split(",")) {
|
||||
const m = part.match(/^(\d)(?:-(\d))?$/);
|
||||
if (!m) return null;
|
||||
const a = Number(m[1]);
|
||||
const b = m[2] ? Number(m[2]) : a;
|
||||
if (a > 7 || b > 7 || b < a) return null;
|
||||
for (let d = a; d <= b; d++) out.add(d % 7);
|
||||
}
|
||||
return [...out];
|
||||
}
|
||||
|
||||
export function parseCron(expr: string): State {
|
||||
const base: State = { mode: "custom", every: 15, minute: 0, time: "03:00", days: [1, 2, 3, 4, 5], dom: 1, custom: expr.trim() };
|
||||
const f = expr.trim().split(/\s+/);
|
||||
if (f.length !== 5) return base;
|
||||
const [mi, h, dom, mon, dow] = f;
|
||||
const num = (s: string, max: number) => /^\d+$/.test(s) && Number(s) <= max;
|
||||
if (mon !== "*") return base;
|
||||
let m;
|
||||
if ((m = mi.match(/^\*\/(\d+)$/)) && h === "*" && dom === "*" && dow === "*" && MINUTE_STEPS.includes(Number(m[1]))) return { ...base, mode: "minutes", every: Number(m[1]) };
|
||||
if (num(mi, 59) && h === "*" && dom === "*" && dow === "*") return { ...base, mode: "hourly", minute: Number(mi) };
|
||||
if (!num(mi, 59) || !num(h, 23)) return base;
|
||||
const time = hhmm(h, mi);
|
||||
if (dom === "*" && dow === "*") return { ...base, mode: "daily", time };
|
||||
if (dom === "*") {
|
||||
const days = expandDays(dow);
|
||||
return days?.length ? { ...base, mode: "weekly", time, days } : base;
|
||||
}
|
||||
if (num(dom, 31) && Number(dom) >= 1 && dow === "*") return { ...base, mode: "monthly", time, dom: Number(dom) };
|
||||
return base;
|
||||
}
|
||||
|
||||
export function buildCron(s: State): string {
|
||||
const [h, m] = s.time.split(":").map(Number);
|
||||
switch (s.mode) {
|
||||
case "minutes":
|
||||
return `*/${s.every} * * * *`;
|
||||
case "hourly":
|
||||
return `${s.minute} * * * *`;
|
||||
case "daily":
|
||||
return `${m} ${h} * * *`;
|
||||
case "weekly": {
|
||||
const days = [...s.days].sort((a, b) => a - b);
|
||||
return `${m} ${h} * * ${days.length ? days.join(",") : "*"}`;
|
||||
}
|
||||
case "monthly":
|
||||
return `${m} ${h} ${s.dom} * *`;
|
||||
default:
|
||||
return s.custom.trim();
|
||||
}
|
||||
}
|
||||
|
||||
const dayName = (d: number, style: "short" | "long") => {
|
||||
// 2023-01-01 was a Sunday.
|
||||
return new Date(2023, 0, 1 + d).toLocaleDateString(getLang(), { weekday: style });
|
||||
};
|
||||
|
||||
/** "2026-11-11T06:30" (server wall time) for display, without time zone conversion. */
|
||||
const fmtWall = (s: string) => {
|
||||
const [d, hm] = s.split("T");
|
||||
const [y, mo, da] = d.split("-").map(Number);
|
||||
const date = new Date(y, mo - 1, da).toLocaleDateString(getLang(), { weekday: "short", day: "numeric", month: "short" });
|
||||
return `${date}, ${hm}`;
|
||||
};
|
||||
|
||||
export function CronBuilder({ value, onChange }: { value: string; onChange: (cron: string) => void }) {
|
||||
const t = useT();
|
||||
const [s, setS] = useState<State>(() => parseCron(value));
|
||||
const [preview, setPreview] = useState<{ ok: boolean; next_local?: string[]; error?: string; tz?: string }>();
|
||||
|
||||
// A value from outside (another automation, reset) that the builder did not produce.
|
||||
useEffect(() => {
|
||||
if (value.trim() !== buildCron(s)) setS(parseCron(value));
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [value]);
|
||||
|
||||
useEffect(() => {
|
||||
const expr = value.trim();
|
||||
if (!expr) return setPreview(undefined);
|
||||
let alive = true;
|
||||
const h = setTimeout(() => {
|
||||
get<typeof preview>(`/jobs/schedule?expr=${encodeURIComponent(expr)}`)
|
||||
.then((p) => alive && setPreview(p))
|
||||
.catch(() => alive && setPreview(undefined));
|
||||
}, 250);
|
||||
return () => {
|
||||
alive = false;
|
||||
clearTimeout(h);
|
||||
};
|
||||
}, [value]);
|
||||
|
||||
const set = (patch: Partial<State>) => {
|
||||
const next = { ...s, ...patch };
|
||||
// Switching to "custom" starts from the current expression.
|
||||
if (patch.mode === "custom" && s.mode !== "custom") next.custom = buildCron(s);
|
||||
setS(next);
|
||||
onChange(buildCron(next));
|
||||
};
|
||||
|
||||
const modes: Mode[] = ["minutes", "hourly", "daily", "weekly", "monthly", "custom"];
|
||||
return (
|
||||
<div className="cron-builder">
|
||||
<div className="cron-modes" role="radiogroup" aria-label={t("cron.label")}>
|
||||
{modes.map((m) => (
|
||||
<button key={m} type="button" role="radio" aria-checked={s.mode === m} className={`chip-btn ${s.mode === m ? "active" : ""}`} onClick={() => set({ mode: m })}>
|
||||
{t(`cron.mode.${m}` as const)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="cron-fields">
|
||||
{s.mode === "minutes" && (
|
||||
<label>
|
||||
{t("cron.every")}
|
||||
<select value={s.every} onChange={(e) => set({ every: Number(e.target.value) })}>
|
||||
{MINUTE_STEPS.map((n) => (
|
||||
<option key={n} value={n}>
|
||||
{n}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
{t("cron.minutes")}
|
||||
</label>
|
||||
)}
|
||||
{s.mode === "hourly" && (
|
||||
<label>
|
||||
{t("cron.atMinute")}
|
||||
<input type="number" min={0} max={59} value={s.minute} onChange={(e) => set({ minute: Math.min(59, Math.max(0, Number(e.target.value) || 0)) })} />
|
||||
</label>
|
||||
)}
|
||||
{s.mode === "weekly" && (
|
||||
<div className="cron-days" role="group" aria-label={t("cron.days")}>
|
||||
{WEEK.map((d) => (
|
||||
<button
|
||||
key={d}
|
||||
type="button"
|
||||
aria-pressed={s.days.includes(d)}
|
||||
className={`chip-btn ${s.days.includes(d) ? "active" : ""}`}
|
||||
title={dayName(d, "long")}
|
||||
onClick={() => set({ days: s.days.includes(d) ? s.days.filter((x) => x !== d) : [...s.days, d] })}
|
||||
>
|
||||
{dayName(d, "short")}
|
||||
</button>
|
||||
))}
|
||||
<button type="button" className="link-btn" onClick={() => set({ days: [1, 2, 3, 4, 5] })}>
|
||||
{t("cron.workdays")}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
{s.mode === "monthly" && (
|
||||
<label>
|
||||
{t("cron.onDay")}
|
||||
<select value={s.dom} onChange={(e) => set({ dom: Number(e.target.value) })}>
|
||||
{Array.from({ length: 31 }, (_, i) => i + 1).map((d) => (
|
||||
<option key={d} value={d}>
|
||||
{d}.
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
)}
|
||||
{(s.mode === "daily" || s.mode === "weekly" || s.mode === "monthly") && (
|
||||
<label>
|
||||
{t("cron.at")}
|
||||
<input type="time" value={s.time} onChange={(e) => e.target.value && set({ time: e.target.value })} />
|
||||
</label>
|
||||
)}
|
||||
{s.mode === "custom" && (
|
||||
<label className="cron-custom">
|
||||
<input className="mono" value={s.custom} placeholder="0 3 * * *" spellCheck={false} onChange={(e) => set({ custom: e.target.value })} />
|
||||
<small className="hint">{t("cron.customHint")}</small>
|
||||
</label>
|
||||
)}
|
||||
</div>
|
||||
<div className="cron-preview">
|
||||
<code>{value || "–"}</code>
|
||||
{preview?.ok === false && <span className="err">{preview.error}</span>}
|
||||
{preview?.ok && preview.next_local && preview.next_local.length > 0 && (
|
||||
<span>
|
||||
{t("cron.nextRuns")} {preview.next_local.slice(0, 3).map(fmtWall).join(" · ")}
|
||||
</span>
|
||||
)}
|
||||
{preview?.tz && s.mode !== "minutes" && <span className="hint">{t("cron.serverTz", { tz: preview.tz })}</span>}
|
||||
{s.mode === "monthly" && s.dom > 28 && <span className="hint">{t("cron.shortMonths")}</span>}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,298 @@
|
||||
import { lazy, Suspense, useCallback, useEffect, useRef, useState } from "react";
|
||||
import { ApiError, get, patch, post, put } from "../api";
|
||||
import { confirmDialog, toast } from "../dialogs";
|
||||
import { fmtRelative, useT } from "../i18n";
|
||||
import { navigate } from "../router";
|
||||
import { useStore } from "../store";
|
||||
import { Spinner } from "./Activity";
|
||||
import { ChatView } from "./ChatView";
|
||||
import { CronBuilder } from "./CronBuilder";
|
||||
import { Icon } from "./Icon";
|
||||
import type { JobInfo } from "./Jobs";
|
||||
import { ModelSelect } from "./ModelSelect";
|
||||
|
||||
const CodeEditor = lazy(() => import("./CodeEditor").then((m) => ({ default: m.CodeEditor })));
|
||||
|
||||
interface Settings {
|
||||
name: string;
|
||||
schedule: string;
|
||||
agent: string;
|
||||
model: string;
|
||||
permission_mode: string;
|
||||
timeout_minutes: number;
|
||||
}
|
||||
|
||||
const settingsOf = (j: JobInfo): Settings => ({
|
||||
name: j.spec?.name ?? "",
|
||||
schedule: j.spec?.schedule ?? "0 3 * * *",
|
||||
agent: j.spec?.agent ?? "build",
|
||||
model: j.spec?.model ?? "",
|
||||
permission_mode: j.spec?.permission_mode ?? "auto",
|
||||
timeout_minutes: j.spec?.timeout_minutes ?? 60,
|
||||
});
|
||||
|
||||
type Tab = "prompt" | "settings" | "assistant";
|
||||
|
||||
/**
|
||||
* One automation: its instructions (Markdown file) in an editor, schedule and settings,
|
||||
* and a chat with a model that helps to write the instructions (it edits the file).
|
||||
*/
|
||||
export function JobEditor({ id, onMenu }: { id: string; onMenu: () => void }) {
|
||||
const t = useT();
|
||||
const [job, setJob] = useState<JobInfo>();
|
||||
const [settings, setSettings] = useState<Settings>();
|
||||
const [saved, setSaved] = useState<Settings>();
|
||||
const [text, setText] = useState<string>();
|
||||
const [savedText, setSavedText] = useState<string>();
|
||||
const [mtime, setMtime] = useState<number>();
|
||||
const [changedOnDisk, setChangedOnDisk] = useState(false);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [assistant, setAssistant] = useState<string>();
|
||||
const [tab, setTab] = useState<Tab>("prompt");
|
||||
|
||||
const loadJob = useCallback(async () => {
|
||||
const j = await get<JobInfo>(`/jobs/${id}`);
|
||||
setJob(j);
|
||||
const s = settingsOf(j);
|
||||
setSettings((cur) => (cur && saved && JSON.stringify(cur) !== JSON.stringify(saved) ? cur : s));
|
||||
setSaved(s);
|
||||
setAssistant(j.spec?.assistant_session ?? undefined);
|
||||
return j;
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [id]);
|
||||
|
||||
const loadFile = useCallback(async (path: string) => {
|
||||
const f = await get<{ content?: string; mtime?: number }>(`/files/read?path=${encodeURIComponent(path)}`);
|
||||
setText(f.content ?? "");
|
||||
setSavedText(f.content ?? "");
|
||||
setMtime(f.mtime);
|
||||
setChangedOnDisk(false);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
loadJob()
|
||||
.then((j) => loadFile(j.path))
|
||||
.catch((e) => toast(e.message));
|
||||
}, [loadJob, loadFile]);
|
||||
|
||||
const fileDirty = text !== undefined && text !== savedText;
|
||||
const settingsDirty = !!settings && !!saved && JSON.stringify(settings) !== JSON.stringify(saved);
|
||||
const dirty = fileDirty || settingsDirty;
|
||||
|
||||
// The assistant edits the file: reload it when a turn ends (unless there are unsaved edits).
|
||||
const busy = useStore((s) => (assistant ? !!s.busy[assistant] : false));
|
||||
const wasBusy = useRef(false);
|
||||
const dirtyRef = useRef(fileDirty);
|
||||
dirtyRef.current = fileDirty;
|
||||
useEffect(() => {
|
||||
if (wasBusy.current && !busy && job) {
|
||||
get<{ mtime?: number }>(`/files/stat?path=${encodeURIComponent(job.path)}`)
|
||||
.then((st) => {
|
||||
if (st.mtime && mtime && st.mtime <= mtime) return;
|
||||
if (dirtyRef.current) setChangedOnDisk(true);
|
||||
else void loadFile(job.path);
|
||||
})
|
||||
.catch(() => undefined);
|
||||
}
|
||||
wasBusy.current = busy;
|
||||
}, [busy, job, mtime, loadFile]);
|
||||
|
||||
// Unsaved changes: ask before leaving the page.
|
||||
useEffect(() => {
|
||||
if (!dirty) return;
|
||||
const warn = (e: BeforeUnloadEvent) => e.preventDefault();
|
||||
window.addEventListener("beforeunload", warn);
|
||||
return () => window.removeEventListener("beforeunload", warn);
|
||||
}, [dirty]);
|
||||
|
||||
const save = async (force = false) => {
|
||||
if (!job || !settings) return;
|
||||
setSaving(true);
|
||||
try {
|
||||
if (settingsDirty) {
|
||||
const j = await patch<JobInfo>(`/jobs/${id}`, settings);
|
||||
setJob(j);
|
||||
const s = settingsOf(j);
|
||||
setSettings(s);
|
||||
setSaved(s);
|
||||
}
|
||||
if (fileDirty) {
|
||||
const r = await put<{ mtime?: number }>("/files/write", { path: job.path, content: text, expected_mtime: mtime, force });
|
||||
setSavedText(text);
|
||||
setMtime(r.mtime);
|
||||
setChangedOnDisk(false);
|
||||
void loadJob();
|
||||
}
|
||||
toast(t("jobEditor.saved"), "success");
|
||||
} catch (e: any) {
|
||||
if (e instanceof ApiError && e.status === 409) {
|
||||
if (await confirmDialog({ message: t("jobEditor.conflict"), confirmLabel: t("jobEditor.overwrite"), danger: true })) return save(true);
|
||||
} else toast(e.message);
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const setEnabled = async (enabled: boolean) => {
|
||||
try {
|
||||
setJob(await patch<JobInfo>(`/jobs/${id}`, { enabled }));
|
||||
} catch (e: any) {
|
||||
toast(e.message);
|
||||
}
|
||||
};
|
||||
|
||||
const runNow = async () => {
|
||||
if (dirty && !(await confirmDialog({ message: t("jobEditor.runUnsaved") }))) return;
|
||||
try {
|
||||
const r = await post<{ session_id: string }>(`/jobs/${id}/run`, {});
|
||||
navigate(`/s/${r.session_id}`);
|
||||
} catch (e: any) {
|
||||
toast(e.message);
|
||||
}
|
||||
};
|
||||
|
||||
const startAssistant = async () => {
|
||||
try {
|
||||
const r = await post<{ session_id: string }>(`/jobs/${id}/assistant`, {});
|
||||
setAssistant(r.session_id);
|
||||
setTab("assistant");
|
||||
} catch (e: any) {
|
||||
toast(e.message);
|
||||
}
|
||||
};
|
||||
|
||||
const back = async () => {
|
||||
if (dirty && !(await confirmDialog({ message: t("jobEditor.discard"), danger: true }))) return;
|
||||
navigate("/jobs");
|
||||
};
|
||||
|
||||
if (!job || !settings) return <div className="empty"><Spinner /></div>;
|
||||
const up = (p: Partial<Settings>) => setSettings({ ...settings, ...p });
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="topbar">
|
||||
<button className="ghost menu-btn" onClick={onMenu} aria-label={t("nav.menu")}>
|
||||
<Icon name="menu" />
|
||||
</button>
|
||||
<button className="small ghost" onClick={back} title={t("jobEditor.back")} aria-label={t("jobEditor.back")}>
|
||||
<Icon name="arrow-left" />
|
||||
</button>
|
||||
<div className="grow">
|
||||
<h1>{settings.name || t("nav.jobs")}</h1>
|
||||
<div className="path mono">{job.path}</div>
|
||||
</div>
|
||||
<label className="switch" title={t(job.enabled ? "jobs.disable" : "jobs.enable")}>
|
||||
<input type="checkbox" checked={job.enabled} onChange={(e) => void setEnabled(e.target.checked)} />
|
||||
<span>{t(job.enabled ? "jobs.on" : "jobs.off")}</span>
|
||||
</label>
|
||||
<button className="small ghost" onClick={runNow} title={t("jobs.runNow")}>
|
||||
<Icon name="play" /> <span className="hide-mobile">{t("jobs.runNow")}</span>
|
||||
</button>
|
||||
<button className="small primary" disabled={!dirty || saving} onClick={() => void save()}>
|
||||
{saving ? <Spinner small /> : <Icon name="check" />} {t("common.save")}
|
||||
</button>
|
||||
</div>
|
||||
<div className="job-tabs" role="tablist">
|
||||
{(["prompt", "settings", "assistant"] as Tab[]).map((x) => (
|
||||
<button key={x} role="tab" aria-selected={tab === x} className={tab === x ? "active" : ""} onClick={() => setTab(x)}>
|
||||
{t(`jobEditor.tab.${x}` as const)}
|
||||
{x === "prompt" && fileDirty && " •"}
|
||||
{x === "settings" && settingsDirty && " •"}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className={`job-editor tab-${tab}`}>
|
||||
<div className="job-editor-main">
|
||||
<section className="job-editor-settings panel">
|
||||
<div className="job-editor-row">
|
||||
<label className="field" style={{ flex: 2 }}>
|
||||
<span>{t("jobs.tplName")}</span>
|
||||
<input value={settings.name} onChange={(e) => up({ name: e.target.value })} />
|
||||
</label>
|
||||
<div className="job-editor-status">
|
||||
<span>
|
||||
{t("jobs.next")}: {job.enabled && job.next_run ? new Date(job.next_run).toLocaleString(undefined, { dateStyle: "medium", timeStyle: "short" }) : "–"}
|
||||
</span>
|
||||
<span>
|
||||
{t("jobs.last")}: {job.last_run ? fmtRelative(job.last_run) : "–"}
|
||||
{job.last_session_id && (
|
||||
<button className="link-btn" style={{ marginLeft: 6 }} onClick={() => navigate(`/s/${job.last_session_id}`)}>
|
||||
{t("jobs.openRun")}
|
||||
</button>
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="field">
|
||||
<span>{t("jobs.schedule")}</span>
|
||||
<CronBuilder value={settings.schedule} onChange={(schedule) => up({ schedule })} />
|
||||
</div>
|
||||
<div className="job-editor-row">
|
||||
<label className="field">
|
||||
<span>{t("jobs.tplMode")}</span>
|
||||
<select value={settings.agent} onChange={(e) => up({ agent: e.target.value })}>
|
||||
<option value="build">build</option>
|
||||
<option value="plan">plan</option>
|
||||
</select>
|
||||
</label>
|
||||
<label className="field">
|
||||
<span>{t("jobs.permissionMode")}</span>
|
||||
<select value={settings.permission_mode} title={t("jobs.permissionModeHint")} onChange={(e) => up({ permission_mode: e.target.value })}>
|
||||
<option value="default">{t("permissionMode.default")}</option>
|
||||
<option value="auto">{t("permissionMode.auto")}</option>
|
||||
<option value="accept_edits">{t("permissionMode.accept_edits")}</option>
|
||||
<option value="bypass">{t("permissionMode.bypass")}</option>
|
||||
</select>
|
||||
</label>
|
||||
<label className="field">
|
||||
<span>{t("composer.model")}</span>
|
||||
<ModelSelect value={settings.model} onChange={(model) => up({ model })} emptyLabel={t("jobEditor.defaultModel")} />
|
||||
</label>
|
||||
<label className="field" style={{ maxWidth: 140 }}>
|
||||
<span>{t("jobEditor.timeout")}</span>
|
||||
<input type="number" min={1} max={1440} value={settings.timeout_minutes} onChange={(e) => up({ timeout_minutes: Math.max(1, Number(e.target.value) || 60) })} />
|
||||
</label>
|
||||
</div>
|
||||
{settings.permission_mode !== "bypass" && <div className="hint">{t("jobEditor.bypassHint")}</div>}
|
||||
</section>
|
||||
<section className="job-editor-prompt">
|
||||
<div className="job-editor-prompt-head">
|
||||
<b>{t("jobEditor.instructions")}</b>
|
||||
<span className="hint">{t("jobEditor.instructionsHint")}</span>
|
||||
</div>
|
||||
{changedOnDisk && (
|
||||
<div className="notice">
|
||||
{t("jobEditor.changedOnDisk")}{" "}
|
||||
<button className="small" onClick={() => void loadFile(job.path)}>
|
||||
{t("jobEditor.reload")}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
{job.error && !job.error.includes("empty") && <div className="notice err">{job.error}</div>}
|
||||
{text === undefined ? (
|
||||
<div className="empty"><Spinner /></div>
|
||||
) : (
|
||||
<Suspense fallback={<div className="empty"><Spinner /></div>}>
|
||||
<CodeEditor value={text} filename={job.path} onChange={setText} onSave={() => void save()} />
|
||||
</Suspense>
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
<aside className="job-editor-chat">
|
||||
{assistant ? (
|
||||
<ChatView key={assistant} sessionId={assistant} onMenu={onMenu} />
|
||||
) : (
|
||||
<div className="job-assistant-start">
|
||||
<Icon name="sparkle" />
|
||||
<p>{t("jobEditor.assistantIntro")}</p>
|
||||
<button className="primary" onClick={startAssistant}>
|
||||
{t("jobEditor.assistantStart")}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</aside>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,134 +0,0 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { useFetch } from "../hooks";
|
||||
import { post } from "../api";
|
||||
import { getLang, useT } from "../i18n";
|
||||
import { JOB_TEMPLATES, SCHEDULES, type JobTemplate } from "../jobTemplates";
|
||||
import { Icon } from "./Icon";
|
||||
import { ModelSelect } from "./ModelSelect";
|
||||
import { FolderPicker } from "./NewSession";
|
||||
|
||||
/** Create an automation from a template: pick it, choose the project, adjust, create. */
|
||||
export function JobTemplateDialog({ onClose, onCreated }: { onClose: () => void; onCreated: () => void }) {
|
||||
const t = useT();
|
||||
const de = getLang() === "de";
|
||||
const [tpl, setTpl] = useState<JobTemplate>();
|
||||
const [name, setName] = useState("");
|
||||
const [schedule, setSchedule] = useState("");
|
||||
const [agent, setAgent] = useState("build");
|
||||
const [mode, setMode] = useState("auto");
|
||||
const [model, setModel] = useState("");
|
||||
const [prompt, setPrompt] = useState("");
|
||||
const [cwd, setCwd] = useState(localStorage.getItem("codecraft.lastDir") ?? "");
|
||||
const [error, setError] = useState<string>();
|
||||
const [busy, setBusy] = useState(false);
|
||||
const config = useFetch<{ default_model?: string }>("/config").data;
|
||||
useEffect(() => {
|
||||
if (!model && config?.default_model) setModel(config.default_model);
|
||||
}, [config, model]);
|
||||
|
||||
const choose = (x: JobTemplate) => {
|
||||
setTpl(x);
|
||||
setName(de ? x.name.de : x.name.en);
|
||||
setSchedule(x.schedule);
|
||||
setAgent(x.agent);
|
||||
setPrompt(x.prompt);
|
||||
};
|
||||
|
||||
const create = async () => {
|
||||
setBusy(true);
|
||||
setError(undefined);
|
||||
try {
|
||||
await post("/jobs/create", { cwd, name: name.trim(), schedule: schedule.trim(), agent, permission_mode: mode, model: model || undefined, prompt });
|
||||
onCreated();
|
||||
onClose();
|
||||
} catch (e: any) {
|
||||
setError(e.message);
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="modal-backdrop" onClick={onClose}>
|
||||
<div className="modal job-tpl" role="dialog" aria-label={t("jobs.fromTemplate")} onClick={(e) => e.stopPropagation()}>
|
||||
{!tpl ? (
|
||||
<>
|
||||
<h3>{t("jobs.fromTemplate")}</h3>
|
||||
<div className="job-tpl-grid">
|
||||
{JOB_TEMPLATES.map((x) => (
|
||||
<button key={x.id} className="job-tpl-card" onClick={() => choose(x)}>
|
||||
<Icon name={x.icon} />
|
||||
<span>
|
||||
<b>{de ? x.name.de : x.name.en}</b>
|
||||
<small>{de ? x.desc.de : x.desc.en}</small>
|
||||
</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="row" style={{ marginTop: 12, justifyContent: "flex-end" }}>
|
||||
<button onClick={onClose}>{t("common.cancel")}</button>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<h3>
|
||||
<Icon name={tpl.icon} /> {de ? tpl.name.de : tpl.name.en}
|
||||
</h3>
|
||||
<label className="field">
|
||||
<span>{t("jobs.tplName")}</span>
|
||||
<input value={name} onChange={(e) => setName(e.target.value)} />
|
||||
</label>
|
||||
<div className="field">
|
||||
<span>{t("jobs.tplProject")}</span>
|
||||
<FolderPicker path={cwd} onPick={setCwd} />
|
||||
</div>
|
||||
<div className="field">
|
||||
<span>{t("jobs.tplSchedule")}</span>
|
||||
<div className="row" style={{ gap: 6, flexWrap: "wrap" }}>
|
||||
{SCHEDULES.map((s) => (
|
||||
<button key={s.cron} type="button" className={`chip-btn ${schedule === s.cron ? "active" : ""}`} onClick={() => setSchedule(s.cron)}>
|
||||
{de ? s.de : s.en}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<input className="mono" value={schedule} onChange={(e) => setSchedule(e.target.value)} placeholder="0 3 * * *" />
|
||||
<small className="hint">{t("jobs.tplCronHint")}</small>
|
||||
</div>
|
||||
<div className="row" style={{ gap: 10, flexWrap: "wrap" }}>
|
||||
<label className="field">
|
||||
<span>{t("jobs.tplMode")}</span>
|
||||
<select value={agent} onChange={(e) => setAgent(e.target.value)}>
|
||||
<option value="build">build</option>
|
||||
<option value="plan">plan</option>
|
||||
</select>
|
||||
</label>
|
||||
<label className="field">
|
||||
<span>{t("composer.permissionMode")}</span>
|
||||
<select value={mode} onChange={(e) => setMode(e.target.value)}>
|
||||
<option value="auto">{t("permissionMode.auto")}</option>
|
||||
<option value="accept_edits">{t("permissionMode.accept_edits")}</option>
|
||||
<option value="bypass">{t("permissionMode.bypass")}</option>
|
||||
</select>
|
||||
</label>
|
||||
<label className="field">
|
||||
<span>{t("composer.model")}</span>
|
||||
<ModelSelect value={model} onChange={setModel} />
|
||||
</label>
|
||||
</div>
|
||||
<label className="field">
|
||||
<span>{t("jobs.tplPrompt")}</span>
|
||||
<textarea rows={6} value={prompt} onChange={(e) => setPrompt(e.target.value)} />
|
||||
</label>
|
||||
{error && <div className="notice err">{error}</div>}
|
||||
<div className="row" style={{ marginTop: 12, justifyContent: "flex-end" }}>
|
||||
<button onClick={() => setTpl(undefined)}>{t("common.back")}</button>
|
||||
<button className="primary" disabled={busy || !cwd || !name.trim() || !schedule.trim() || !prompt.trim()} onClick={create}>
|
||||
{t("jobs.tplCreate")}
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
+16
-40
@@ -5,9 +5,9 @@ import { navigate } from "../router";
|
||||
import { confirmDialog, toast } from "../dialogs";
|
||||
import { Icon } from "./Icon";
|
||||
import { Spinner } from "./Activity";
|
||||
import { JobTemplateDialog } from "./JobTemplateDialog";
|
||||
import { NewJobDialog } from "./NewJobDialog";
|
||||
|
||||
interface JobInfo {
|
||||
export interface JobInfo {
|
||||
id: string;
|
||||
path: string;
|
||||
enabled: boolean;
|
||||
@@ -17,12 +17,12 @@ interface JobInfo {
|
||||
next_run?: number | null;
|
||||
error?: string;
|
||||
webhook?: boolean;
|
||||
spec?: { name: string; schedule: string; agent: string; model?: string | null; permission_mode: string; timeout_minutes: number; prompt: string };
|
||||
spec?: { name: string; schedule: string; agent: string; model?: string | null; permission_mode: string; timeout_minutes: number; prompt: string; assistant_session?: string | null };
|
||||
}
|
||||
|
||||
const fmtDate = (ms?: number | null) => (ms ? new Date(ms).toLocaleString(undefined, { dateStyle: "medium", timeStyle: "short" }) : "–");
|
||||
|
||||
/** Automations: agents started on a schedule from a Markdown job file. */
|
||||
/** Automations: agents started on a schedule with the instructions from a Markdown file. */
|
||||
export function Jobs({ onMenu }: { onMenu: () => void }) {
|
||||
const t = useT();
|
||||
const [jobs, setJobs] = useState<JobInfo[]>();
|
||||
@@ -68,10 +68,10 @@ export function Jobs({ onMenu }: { onMenu: () => void }) {
|
||||
<div className="notice">{t("jobs.intro")}</div>
|
||||
<div className="row" style={{ margin: "12px 0" }}>
|
||||
<button className="primary" onClick={() => setTemplates(true)}>
|
||||
<Icon name="plus" /> {t("jobs.fromTemplate")}
|
||||
<Icon name="plus" /> {t("jobs.new")}
|
||||
</button>
|
||||
</div>
|
||||
{templates && <JobTemplateDialog onClose={() => setTemplates(false)} onCreated={() => void reload()} />}
|
||||
{templates && <NewJobDialog onClose={() => setTemplates(false)} />}
|
||||
{!jobs && <div className="empty"><Spinner /></div>}
|
||||
{jobs?.length === 0 && <div className="empty">{t("jobs.none")}</div>}
|
||||
{jobs?.map((j) => (
|
||||
@@ -79,7 +79,11 @@ export function Jobs({ onMenu }: { onMenu: () => void }) {
|
||||
<div className="job-head">
|
||||
<Icon name="clock" className="job-icon" />
|
||||
<div style={{ flex: 1, minWidth: 0 }}>
|
||||
<h3>{j.spec?.name ?? j.path.split("/").pop()}</h3>
|
||||
<h3>
|
||||
<button className="link-btn job-title" onClick={() => navigate(`/jobs/${j.id}`)}>
|
||||
{j.spec?.name ?? j.path.split("/").pop()}
|
||||
</button>
|
||||
</h3>
|
||||
<div className="hint mono">{j.path}</div>
|
||||
</div>
|
||||
<label className="switch" title={t(j.enabled ? "jobs.disable" : "jobs.enable")}>
|
||||
@@ -107,22 +111,7 @@ export function Jobs({ onMenu }: { onMenu: () => void }) {
|
||||
</span>
|
||||
<span>{t("jobs.mode")}</span>
|
||||
<span>
|
||||
{j.spec?.agent} · {j.spec?.model || t("agents.sessionModel")} · max {j.spec?.timeout_minutes} min
|
||||
</span>
|
||||
<span>{t("jobs.permissionMode")}</span>
|
||||
<span>
|
||||
<select
|
||||
value={j.spec?.permission_mode ?? "auto"}
|
||||
disabled={busy === j.id}
|
||||
title={t("jobs.permissionModeHint")}
|
||||
aria-label={t("jobs.permissionMode")}
|
||||
onChange={(e) => act(j.id, () => patch(`/jobs/${j.id}`, { permission_mode: e.target.value }))}
|
||||
>
|
||||
<option value="default">{t("permissionMode.default")}</option>
|
||||
<option value="auto">{t("permissionMode.auto")}</option>
|
||||
<option value="accept_edits">{t("permissionMode.accept_edits")}</option>
|
||||
<option value="bypass">{t("permissionMode.bypass")}</option>
|
||||
</select>
|
||||
{j.spec?.agent} · {j.spec?.model || t("agents.sessionModel")} · {t(`permissionMode.${j.spec?.permission_mode ?? "auto"}` as any)} · max {j.spec?.timeout_minutes} min
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
@@ -178,14 +167,8 @@ export function Jobs({ onMenu }: { onMenu: () => void }) {
|
||||
})}>
|
||||
{busy === j.id ? <Spinner small /> : <Icon name="play" />} {t("jobs.runNow")}
|
||||
</button>
|
||||
<button
|
||||
className="small ghost"
|
||||
onClick={() => {
|
||||
sessionStorage.setItem("codecraft.openFile", j.path);
|
||||
navigate("/files");
|
||||
}}
|
||||
>
|
||||
<Icon name="edit" /> {t("jobs.editFile")}
|
||||
<button className="small" onClick={() => navigate(`/jobs/${j.id}`)}>
|
||||
<Icon name="edit" /> {t("jobs.edit")}
|
||||
</button>
|
||||
<span className="grow" />
|
||||
<button
|
||||
@@ -205,20 +188,13 @@ export function Jobs({ onMenu }: { onMenu: () => void }) {
|
||||
<div className="row" style={{ gap: 8 }}>
|
||||
<input className="mono" style={{ flex: 1, minWidth: 0 }} value={path} placeholder="/workspace/project/.codecraft/jobs/nightly.md" onChange={(e) => setPath(e.target.value)} />
|
||||
<button disabled={!path.trim()} onClick={() => act("new", async () => {
|
||||
await post("/jobs", { path: path.trim() });
|
||||
const j = await post<JobInfo>("/jobs", { path: path.trim() });
|
||||
setPath("");
|
||||
navigate(`/jobs/${j.id}`);
|
||||
})}>
|
||||
{t("jobs.registerBtn")}
|
||||
</button>
|
||||
</div>
|
||||
<pre className="job-example">{`---
|
||||
name: "Nightly dependency check"
|
||||
schedule: "0 3 * * *"
|
||||
agent: build
|
||||
permission_mode: auto
|
||||
timeout_minutes: 60
|
||||
---
|
||||
Check the project for outdated dependencies …`}</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,128 @@
|
||||
import { useState } from "react";
|
||||
import { post } from "../api";
|
||||
import { getLang, useT } from "../i18n";
|
||||
import { JOB_TEMPLATES, type JobTemplate } from "../jobTemplates";
|
||||
import { navigate } from "../router";
|
||||
import { Icon } from "./Icon";
|
||||
import { FolderPicker } from "./NewSession";
|
||||
|
||||
/** Starting point of a new instructions file: headings to fill in (with the assistant). */
|
||||
function example(name: string, de: boolean) {
|
||||
return de
|
||||
? `# ${name}
|
||||
|
||||
## Ziel
|
||||
Was soll diese Automatisierung erreichen? (ein, zwei Sätze)
|
||||
|
||||
## Vorgehen
|
||||
1. …
|
||||
2. …
|
||||
|
||||
## Ergebnis
|
||||
Was am Ende vorliegen soll – z. B. ein kurzer Bericht, geänderte Dateien, ein Commit.
|
||||
|
||||
## Grenzen
|
||||
- Was der Agent nicht tun darf (z. B. nichts pushen, nichts löschen).
|
||||
`
|
||||
: `# ${name}
|
||||
|
||||
## Goal
|
||||
What should this automation achieve? (one or two sentences)
|
||||
|
||||
## Steps
|
||||
1. …
|
||||
2. …
|
||||
|
||||
## Result
|
||||
What should exist at the end – e.g. a short report, changed files, a commit.
|
||||
|
||||
## Limits
|
||||
- What the agent must not do (e.g. no pushing, no deleting).
|
||||
`;
|
||||
}
|
||||
|
||||
/**
|
||||
* New automation: name, project and a starting point (example or template). Creates the
|
||||
* instructions file (<project>/.codecraft/jobs/<name>.md, switched off) and opens the
|
||||
* editor, where the schedule is set and the instructions are worked out.
|
||||
*/
|
||||
export function NewJobDialog({ onClose }: { onClose: () => void }) {
|
||||
const t = useT();
|
||||
const de = getLang() === "de";
|
||||
const [tpl, setTpl] = useState<JobTemplate>();
|
||||
const [name, setName] = useState("");
|
||||
const [cwd, setCwd] = useState(localStorage.getItem("codecraft.lastDir") ?? "");
|
||||
const [error, setError] = useState<string>();
|
||||
const [busy, setBusy] = useState(false);
|
||||
|
||||
const choose = (x?: JobTemplate) => {
|
||||
setTpl(x);
|
||||
if (x && (!name.trim() || JOB_TEMPLATES.some((y) => name === y.name.de || name === y.name.en))) setName(de ? x.name.de : x.name.en);
|
||||
};
|
||||
|
||||
const create = async () => {
|
||||
setBusy(true);
|
||||
setError(undefined);
|
||||
try {
|
||||
const n = name.trim();
|
||||
const job = await post<{ id: string }>("/jobs/create", {
|
||||
cwd,
|
||||
name: n,
|
||||
prompt: tpl ? `# ${n}\n\n${tpl.prompt}\n` : example(n, de),
|
||||
schedule: tpl?.schedule,
|
||||
agent: tpl?.agent,
|
||||
});
|
||||
onClose();
|
||||
navigate(`/jobs/${job.id}`);
|
||||
} catch (e: any) {
|
||||
setError(e.message);
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="modal-backdrop" onClick={onClose}>
|
||||
<div className="modal job-tpl" role="dialog" aria-label={t("jobs.new")} onClick={(e) => e.stopPropagation()}>
|
||||
<h3>{t("jobs.new")}</h3>
|
||||
<label className="field">
|
||||
<span>{t("jobs.tplName")}</span>
|
||||
<input autoFocus value={name} placeholder={t("jobs.namePlaceholder")} onChange={(e) => setName(e.target.value)} />
|
||||
</label>
|
||||
<div className="field">
|
||||
<span>{t("jobs.tplProject")}</span>
|
||||
<FolderPicker path={cwd} onPick={setCwd} />
|
||||
<small className="hint">{t("jobs.fileHint")}</small>
|
||||
</div>
|
||||
<div className="field">
|
||||
<span>{t("jobs.startWith")}</span>
|
||||
<div className="job-tpl-grid">
|
||||
<button className={`job-tpl-card ${!tpl ? "active" : ""}`} onClick={() => choose(undefined)}>
|
||||
<Icon name="file-text" />
|
||||
<span>
|
||||
<b>{t("jobs.blank")}</b>
|
||||
<small>{t("jobs.blankDesc")}</small>
|
||||
</span>
|
||||
</button>
|
||||
{JOB_TEMPLATES.map((x) => (
|
||||
<button key={x.id} className={`job-tpl-card ${tpl?.id === x.id ? "active" : ""}`} onClick={() => choose(x)}>
|
||||
<Icon name={x.icon} />
|
||||
<span>
|
||||
<b>{de ? x.name.de : x.name.en}</b>
|
||||
<small>{de ? x.desc.de : x.desc.en}</small>
|
||||
</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
{error && <div className="notice err">{error}</div>}
|
||||
<div className="row" style={{ marginTop: 12, justifyContent: "flex-end" }}>
|
||||
<button onClick={onClose}>{t("common.cancel")}</button>
|
||||
<button className="primary" disabled={busy || !cwd || !name.trim()} onClick={create}>
|
||||
{t("jobs.createAndEdit")}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
+197
-11
@@ -2,7 +2,7 @@ import { Icon } from "./Icon";
|
||||
import { StatusLeds } from "./StatusLeds";
|
||||
import { cycleThemeMode, getThemeMode, onThemeChange } from "../theme";
|
||||
import { useEffect, useMemo, useState, useSyncExternalStore } from "react";
|
||||
import { get, patch, post } from "../api";
|
||||
import { get, patch, post, put } from "../api";
|
||||
import { promptDialog, toast } from "../dialogs";
|
||||
import { fmtRelative, useT, type Key } from "../i18n";
|
||||
import { navigate, openBeside } from "../router";
|
||||
@@ -102,6 +102,113 @@ function SessionRow({ s, active, attention, busy, folders }: { s: Session; activ
|
||||
);
|
||||
}
|
||||
|
||||
/** Order and pinning of folders and projects in the list (per user, all devices). */
|
||||
interface Layout {
|
||||
order: string[];
|
||||
pinned: string[];
|
||||
}
|
||||
|
||||
/** Folders and projects can be moved and pinned; time groups and the archive cannot. */
|
||||
const movable = (id: string) => id.startsWith("folder:") || id.startsWith("project:");
|
||||
|
||||
const DRAG_TYPE = "application/x-codecraft-group";
|
||||
|
||||
/** Header of a group: collapses it; folders and projects also have a menu and can be dragged. */
|
||||
function GroupHeader({
|
||||
g,
|
||||
collapsed,
|
||||
pinned,
|
||||
onToggle,
|
||||
onPin,
|
||||
onMove,
|
||||
onDrop,
|
||||
}: {
|
||||
g: { id: string; label: string; icon?: string; items: Session[] };
|
||||
collapsed: boolean;
|
||||
pinned: boolean;
|
||||
onToggle: () => void;
|
||||
onPin?: () => void;
|
||||
onMove?: (dir: -1 | 1) => void;
|
||||
onDrop?: (dragged: string, after: boolean) => void;
|
||||
}) {
|
||||
const t = useT();
|
||||
const [menu, setMenu] = useState(false);
|
||||
const [over, setOver] = useState<"before" | "after">();
|
||||
useEffect(() => {
|
||||
if (!menu) return;
|
||||
const close = () => setMenu(false);
|
||||
window.addEventListener("click", close);
|
||||
window.addEventListener("keydown", close);
|
||||
return () => {
|
||||
window.removeEventListener("click", close);
|
||||
window.removeEventListener("keydown", close);
|
||||
};
|
||||
}, [menu]);
|
||||
const canMove = !!onMove;
|
||||
return (
|
||||
<div
|
||||
className={`session-row group-row ${menu ? "menu-open" : ""} ${over ? `drop-${over}` : ""}`}
|
||||
draggable={canMove}
|
||||
onDragStart={(e) => {
|
||||
if (!canMove) return;
|
||||
e.dataTransfer.setData(DRAG_TYPE, g.id);
|
||||
e.dataTransfer.effectAllowed = "move";
|
||||
}}
|
||||
onDragOver={(e) => {
|
||||
if (!onDrop || !e.dataTransfer.types.includes(DRAG_TYPE)) return;
|
||||
e.preventDefault();
|
||||
const r = e.currentTarget.getBoundingClientRect();
|
||||
setOver(e.clientY > r.top + r.height / 2 ? "after" : "before");
|
||||
}}
|
||||
onDragLeave={() => setOver(undefined)}
|
||||
onDrop={(e) => {
|
||||
const id = e.dataTransfer.getData(DRAG_TYPE);
|
||||
const after = over === "after";
|
||||
setOver(undefined);
|
||||
if (id && id !== g.id && onDrop) {
|
||||
e.preventDefault();
|
||||
onDrop(id, after);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<button className="session-group" onClick={onToggle} aria-expanded={!collapsed}>
|
||||
<Icon name={collapsed ? "chevron-right" : "chevron-down"} className="tiny" />
|
||||
{g.icon && <Icon name={g.icon} className="tiny" />}
|
||||
<span className="grow">{g.label}</span>
|
||||
{pinned && <Icon name="pin" className="tiny group-pin" />}
|
||||
{collapsed && <span className="count">{g.items.length}</span>}
|
||||
</button>
|
||||
{canMove && (
|
||||
<button
|
||||
className="session-more ghost"
|
||||
aria-label={t("sidebar.groupMenu")}
|
||||
aria-haspopup="menu"
|
||||
aria-expanded={menu}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setMenu(!menu);
|
||||
}}
|
||||
>
|
||||
<Icon name="more" />
|
||||
</button>
|
||||
)}
|
||||
{menu && (
|
||||
<div className="session-menu" role="menu" onClick={(e) => e.stopPropagation()}>
|
||||
<button role="menuitem" onClick={() => (setMenu(false), onPin?.())}>
|
||||
<Icon name="pin" /> {t(pinned ? "sidebar.groupUnpin" : "sidebar.groupPin")}
|
||||
</button>
|
||||
<button role="menuitem" onClick={() => (setMenu(false), onMove?.(-1))}>
|
||||
<Icon name="arrow-up" /> {t("sidebar.groupUp")}
|
||||
</button>
|
||||
<button role="menuitem" onClick={() => (setMenu(false), onMove?.(1))}>
|
||||
<Icon name="arrow-down" /> {t("sidebar.groupDown")}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function Sidebar({ open, activeIds, section }: { open: boolean; activeIds: string[]; section: string }) {
|
||||
const t = useT();
|
||||
const sessions = useStore((s) => s.sessions);
|
||||
@@ -164,14 +271,15 @@ export function Sidebar({ open, activeIds, section }: { open: boolean; activeIds
|
||||
const live = sessions.filter((s) => !s.archived);
|
||||
for (const s of live.filter((s) => s.pinned)) add("pinned", t("sidebar.pinned"), s, "pin");
|
||||
const rest = live.filter((s) => !s.pinned);
|
||||
const folders = [...new Set(rest.map((s) => s.folder).filter(Boolean) as string[])].sort((a, b) => a.localeCompare(b));
|
||||
const folders = [...new Set(rest.map((s) => s.folder).filter(Boolean) as string[])];
|
||||
for (const f of folders) for (const s of rest.filter((s) => s.folder === f)) add(`folder:${f}`, f, s, "folder");
|
||||
const loose = rest.filter((s) => !s.folder);
|
||||
if (groupBy === "project") {
|
||||
const byProject = new Map<string, Session[]>();
|
||||
for (const s of loose) byProject.set(s.cwd, [...(byProject.get(s.cwd) ?? []), s]);
|
||||
// Projects with the most recent activity first.
|
||||
for (const [cwd, items] of [...byProject].sort((a, b) => b[1][0].updated_at - a[1][0].updated_at)) for (const s of items) add(`project:${cwd}`, basename(cwd) || "/", s, "folders");
|
||||
// Order of the projects: see `ordered` below (not by activity – a new message
|
||||
// moves the chat to the top of its project, not the project).
|
||||
for (const [cwd, items] of byProject) for (const s of items) add(`project:${cwd}`, basename(cwd) || "/", s, "folders");
|
||||
} else {
|
||||
for (const s of loose) {
|
||||
const key = groupKey(s.updated_at);
|
||||
@@ -181,6 +289,81 @@ export function Sidebar({ open, activeIds, section }: { open: boolean; activeIds
|
||||
for (const s of sessions.filter((s) => s.archived)) add("archive", t("sidebar.archive"), s, "archive");
|
||||
return out;
|
||||
}, [sessions, groupBy, t]);
|
||||
// Folders and projects: pinned first, then in the user's order. Groups not ordered yet
|
||||
// (new folder or project) start at the top and are then kept where they are.
|
||||
const [layout, setLayout] = useState<Layout>();
|
||||
useEffect(() => {
|
||||
get<Layout>("/account/sidebar")
|
||||
.then((l) => setLayout({ order: l.order ?? [], pinned: l.pinned ?? [] }))
|
||||
.catch(() => setLayout({ order: [], pinned: [] }));
|
||||
}, []);
|
||||
const ordered = useMemo(() => {
|
||||
const l = layout ?? { order: [], pinned: [] };
|
||||
const head = groups.filter((g) => g.id === "pinned");
|
||||
const tail = groups.filter((g) => g.id !== "pinned" && !movable(g.id));
|
||||
const rank = (id: string) => l.order.indexOf(id);
|
||||
const mid = groups
|
||||
.filter((g) => movable(g.id))
|
||||
.sort((a, b) => {
|
||||
const pa = l.pinned.includes(a.id);
|
||||
const pb = l.pinned.includes(b.id);
|
||||
if (pa !== pb) return pa ? -1 : 1;
|
||||
const ra = rank(a.id);
|
||||
const rb = rank(b.id);
|
||||
if (ra < 0 && rb < 0) return b.items[0].updated_at - a.items[0].updated_at;
|
||||
if (ra < 0 || rb < 0) return ra < 0 ? -1 : 1;
|
||||
return ra - rb;
|
||||
});
|
||||
return { head, mid, tail };
|
||||
}, [groups, layout]);
|
||||
const saveLayout = (next: Layout) => {
|
||||
// Forget groups that no longer exist (no chat in that folder or project).
|
||||
const known = new Set(sessions.flatMap((s) => [`project:${s.cwd}`, ...(s.folder ? [`folder:${s.folder}`] : [])]));
|
||||
const clean = { order: next.order.filter((id) => known.has(id)), pinned: next.pinned.filter((id) => known.has(id)) };
|
||||
setLayout(clean);
|
||||
void put("/account/sidebar", clean).catch((e) => toast(e.message));
|
||||
};
|
||||
// Freeze the position of groups that appeared since the last visit.
|
||||
useEffect(() => {
|
||||
if (!layout) return;
|
||||
const fresh = ordered.mid.map((g) => g.id).filter((id) => !layout.order.includes(id));
|
||||
if (fresh.length) saveLayout({ ...layout, order: [...fresh, ...layout.order] });
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [ordered, layout]);
|
||||
/** Order of the shown groups with `id` moved: by a step, or next to another group. */
|
||||
const reorder = (ids: string[]) => {
|
||||
if (!layout) return;
|
||||
const shown = new Set(ids);
|
||||
saveLayout({ ...layout, order: [...ids, ...layout.order.filter((id) => !shown.has(id))] });
|
||||
};
|
||||
const moveGroup = (id: string, dir: -1 | 1) => {
|
||||
if (!layout) return;
|
||||
const ids = ordered.mid.map((g) => g.id);
|
||||
const i = ids.indexOf(id);
|
||||
const j = i + dir;
|
||||
// Only within the pinned or the unpinned part.
|
||||
if (j < 0 || j >= ids.length || layout.pinned.includes(ids[j]) !== layout.pinned.includes(id)) return;
|
||||
[ids[i], ids[j]] = [ids[j], ids[i]];
|
||||
reorder(ids);
|
||||
};
|
||||
const dropGroup = (dragged: string, target: string, after: boolean) => {
|
||||
if (!layout || !movable(dragged)) return;
|
||||
const ids = ordered.mid.map((g) => g.id).filter((id) => id !== dragged);
|
||||
const at = ids.indexOf(target);
|
||||
if (at < 0) return;
|
||||
ids.splice(after ? at + 1 : at, 0, dragged);
|
||||
// Dropped among pinned groups: pinned too (and the other way round).
|
||||
const pinTarget = layout.pinned.includes(target);
|
||||
const pinned = pinTarget ? [...new Set([...layout.pinned, dragged])] : layout.pinned.filter((p) => p !== dragged);
|
||||
const shown = new Set(ids);
|
||||
saveLayout({ pinned, order: [...ids, ...layout.order.filter((id) => !shown.has(id))] });
|
||||
};
|
||||
const pinGroup = (id: string) => {
|
||||
if (!layout) return;
|
||||
const pinned = layout.pinned.includes(id) ? layout.pinned.filter((p) => p !== id) : [...layout.pinned, id];
|
||||
saveLayout({ ...layout, pinned });
|
||||
};
|
||||
|
||||
const folderNames = useMemo(() => [...new Set(sessions.map((s) => s.folder).filter(Boolean) as string[])].sort(), [sessions]);
|
||||
|
||||
return (
|
||||
@@ -235,14 +418,17 @@ export function Sidebar({ open, activeIds, section }: { open: boolean; activeIds
|
||||
</div>
|
||||
)}
|
||||
{!hits &&
|
||||
groups.map((g) => (
|
||||
[...ordered.head, ...ordered.mid, ...ordered.tail].map((g) => (
|
||||
<div key={g.id}>
|
||||
<button className="session-group" onClick={() => toggle(g.id)} aria-expanded={!collapsed.has(g.id)}>
|
||||
<Icon name={collapsed.has(g.id) ? "chevron-right" : "chevron-down"} className="tiny" />
|
||||
{g.icon && <Icon name={g.icon} className="tiny" />}
|
||||
<span className="grow">{g.label}</span>
|
||||
{collapsed.has(g.id) && <span className="count">{g.items.length}</span>}
|
||||
</button>
|
||||
<GroupHeader
|
||||
g={g}
|
||||
collapsed={collapsed.has(g.id)}
|
||||
pinned={!!layout?.pinned.includes(g.id)}
|
||||
onToggle={() => toggle(g.id)}
|
||||
onPin={movable(g.id) ? () => pinGroup(g.id) : undefined}
|
||||
onMove={movable(g.id) ? (dir) => moveGroup(g.id, dir) : undefined}
|
||||
onDrop={movable(g.id) ? (dragged, after) => dropGroup(dragged, g.id, after) : undefined}
|
||||
/>
|
||||
{!collapsed.has(g.id) &&
|
||||
g.items.map((s) => (
|
||||
<SessionRow key={s.id} s={s} active={activeIds.includes(s.id)} attention={attention.has(s.id)} busy={!!busy[s.id]} folders={folderNames} />
|
||||
|
||||
Reference in new issue
Block a user