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