Instructions per chat (system prompt addition; UI dialog and Telegram /prompt)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

web/src/components/ChatView.tsx

@@ -13,6 +13,7 @@ import { useReasoningMode } from "../prefs";
 import { Composer } from "./Composer";
 import { ShareDialog } from "./ShareDialog";
 import { RenameDialog } from "./RenameDialog";
+import { InstructionsDialog } from "./InstructionsDialog";
 import { RegenerateButton } from "./Regenerate";
 import { WorktreeChip } from "./WorktreeChip";
 import { QueueList } from "./QueueList";
@@ -151,6 +152,7 @@ export function ChatView({ sessionId, onMenu, onClosePane }: { sessionId: string
   const isAdmin = useStore((s) => s.me?.role === "admin");
   const tabs = useChatTabs(sessionId, session?.cwd ?? "");
   const [sharing, setSharing] = useState(false);
+  const [editingInstructions, setEditingInstructions] = useState(false);
   const models = useModels();
   const [loadError, setLoadError] = useState<string>();
   const [text, setText] = useState(() => takePrefill(sessionId) ?? "");
@@ -307,6 +309,11 @@ export function ChatView({ sessionId, onMenu, onClosePane }: { sessionId: string
         <ShellsChip sessionId={sessionId} busy={busy} />
         {isAdmin && <BudgetChip />}
         {session.permission_mode === "bypass" && <span className="chip warn">{t("permissionMode.bypass")}</span>}
+        {!!session.instructions && (
+          <button className="chip" style={{ border: "none" }} onClick={() => !readOnly && setEditingInstructions(true)} title={session.instructions}>
+            <Icon name="edit" /> {t("instructions.chip")}
+          </button>
+        )}
         {readOnly && <span className="chip">{t("chat.readOnly")}</span>}
         {!readOnly && (
           <>
@@ -335,6 +342,16 @@ export function ChatView({ sessionId, onMenu, onClosePane }: { sessionId: string
                 <Icon name="more" />
               </summary>
               <div className="menu-pop-body">
+                <a
+                  href="#"
+                  onClick={(e) => {
+                    e.preventDefault();
+                    (e.currentTarget.closest("details") as HTMLDetailsElement).open = false;
+                    setEditingInstructions(true);
+                  }}
+                >
+                  <Icon name="edit" /> {t("instructions.title")}
+                </a>
                 <a href={`/api/sessions/${sessionId}/export?format=md`} download>
                   <Icon name="download" /> {t("chat.exportMd")}
                 </a>
@@ -527,6 +544,7 @@ export function ChatView({ sessionId, onMenu, onClosePane }: { sessionId: string
           </div>
         )}
       </div>
+      {editingInstructions && <InstructionsDialog sessionId={sessionId} value={session.instructions ?? ""} onClose={() => setEditingInstructions(false)} />}
       {editingTitle && <RenameDialog sessionId={sessionId} title={session.title} onClose={() => setEditingTitle(false)} />}
       {sharing && <ShareDialog sessionId={sessionId} onClose={() => setSharing(false)} />}
       {rewinding && <RewindDialog sessionId={sessionId} messageId={rewinding.id} onDone={rewindDone} onClose={() => setRewinding(undefined)} />}

web/src/components/InstructionsDialog.tsx

@@ -0,0 +1,55 @@
+import { useState } from "react";
+import { patch } from "../api";
+import { useT } from "../i18n";
+
+/** Instructions for one chat: added to the system prompt of every turn. */
+export function InstructionsDialog({ sessionId, value, onClose }: { sessionId: string; value: string; onClose: () => void }) {
+  const t = useT();
+  const [text, setText] = useState(value);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string>();
+
+  const save = async (next: string) => {
+    setBusy(true);
+    try {
+      await patch(`/sessions/${sessionId}`, { instructions: next });
+      onClose();
+    } catch (e: any) {
+      setError(e.message);
+      setBusy(false);
+    }
+  };
+
+  return (
+    <div className="modal-backdrop" onClick={onClose}>
+      <div className="modal instructions-modal" role="dialog" aria-label={t("instructions.title")} onClick={(e) => e.stopPropagation()}>
+        <h3>{t("instructions.title")}</h3>
+        <div className="hint" style={{ marginBottom: 8 }}>
+          {t("instructions.hint")}
+        </div>
+        <textarea
+          autoFocus
+          rows={10}
+          style={{ width: "100%" }}
+          value={text}
+          placeholder={t("instructions.placeholder")}
+          onChange={(e) => setText(e.target.value)}
+          onKeyDown={(e) => (e.ctrlKey || e.metaKey) && e.key === "Enter" && !busy && void save(text)}
+        />
+        {error && <div className="notice err">{error}</div>}
+        <div className="row" style={{ marginTop: 10, justifyContent: "flex-end", gap: 6 }}>
+          {value && (
+            <button className="danger" onClick={() => void save("")} disabled={busy}>
+              {t("instructions.clear")}
+            </button>
+          )}
+          <span className="spacer" />
+          <button onClick={onClose}>{t("common.cancel")}</button>
+          <button className="primary" onClick={() => void save(text)} disabled={busy || text.trim() === value.trim()}>
+            {t("common.save")}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

web/src/i18n/de.ts

@@ -593,6 +593,11 @@ export const de: Messages = {
   "chat.compactingAuto": "Kontext fast voll – Unterhaltung wird automatisch komprimiert",
   "chat.compactingManual": "Unterhaltung wird komprimiert",
   "chat.compactingDetail": "{tokens} von {limit} Tokens ({pct}) – danach arbeitet der Agent mit einer Zusammenfassung weiter",
+  "instructions.title": "Anweisungen für diesen Chat",
+  "instructions.hint": "Gelten für jede Nachricht in diesem Chat, zusätzlich zum Modus – z. B. Sprache, Ton, Regeln oder der Teil des Projekts, um den es geht.",
+  "instructions.placeholder": "z. B. Antworte immer auf Englisch. Ändere nur Dateien unter api/. Frag, bevor du Abhängigkeiten hinzufügst.",
+  "instructions.clear": "Entfernen",
+  "instructions.chip": "Anweisungen",
   "chat.compacted": "Unterhaltung komprimiert – Zusammenfassung",
   "chat.context": "Kontext",
   "chat.contextHint": "{tokens} Tokens in der letzten Anfrage",

web/src/i18n/en.ts

@@ -592,6 +592,11 @@ export const en = {
   "chat.compactingAuto": "Context nearly full – compacting the conversation automatically",
   "chat.compactingManual": "Compacting the conversation",
   "chat.compactingDetail": "{tokens} of {limit} tokens ({pct}) – the agent continues with a summary afterwards",
+  "instructions.title": "Instructions for this chat",
+  "instructions.hint": "Apply to every message in this chat, in addition to the mode – e.g. language, tone, rules, the part of the project to work on.",
+  "instructions.placeholder": "e.g. Always answer in English. Only change files under api/. Ask before adding dependencies.",
+  "instructions.clear": "Remove",
+  "instructions.chip": "Instructions",
   "chat.compacted": "Conversation compacted – summary",
   "chat.context": "Context",
   "chat.contextHint": "{tokens} tokens in the last request",

web/src/styles.css

@@ -3770,3 +3770,6 @@ span.chat-tab > button {
     display: none;
   }
 }
+.instructions-modal {
+  width: min(640px, calc(100vw - 32px));
+}

web/src/types.ts

@@ -67,6 +67,8 @@ export interface Session {
   pinned?: boolean;
   archived?: boolean;
   folder?: string | null;
+  /** Instructions for this chat (added to the system prompt). */
+  instructions?: string;
 }
 
 export interface QuestionOption {

web/src/whatsnew.ts

@@ -3,6 +3,10 @@
  * under "unreleased"; scripts/release.sh renames the key to the release version.
  */
 export const WHATS_NEW: Record<string, { en: string[]; de: string[] }> = {
+  unreleased: {
+    en: ["Instructions per chat: ⋯ → Instructions for this chat (Telegram: /prompt)"],
+    de: ["Anweisungen pro Chat: ⋯ → Anweisungen für diesen Chat (Telegram: /prompt)"],
+  },
   "202611-00007": {
     en: ["Telegram: connect your own bot under Settings → Account → Telegram and chat with CodeCraft from your phone"],
     de: ["Telegram: eigenen Bot unter Einstellungen → Konto → Telegram verbinden und von unterwegs mit CodeCraft chatten"],