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>

web/src/components/Sidebar.tsx

@@ -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} />