Require method selection and show ChatGPT sign-in in a modal

ARCHITECTURE.md

@@ -62,7 +62,7 @@ The host clears this run's patent collection on success, failure or cancellation
 
 SysML export is deterministic: nested actions for the function hierarchy and directed item flows with generic `FlowItem` payloads. Claims/interfaces remain documentation, not formal requirements or complete physical simulation semantics. The pinned SysIDE Legacy 0.9.1 language server checks the generated file against its 2024-12 grammar/library. This is a useful parser and semantic check, not certification against the final SysML 2.0 standard. Parser errors or unavailable validation prevent a successful generated export.
 
-The three Gradio tabs remain Diagram, JSON text, and SysML download. A research ZIP download is inside the JSON tab. The uploader accepts patent HTML (.html or .htm) only. JSON is available as an output download and cannot be uploaded as input.
+The Gradio interface reveals methods after upload and requires an explicit selection before exposing Process. AI agents opens a session-specific sign-in popup, which closes after connection. Results are revealed after processing; the three tabs remain Diagram, JSON text, and SysML download. A research ZIP download is inside the JSON tab. The uploader accepts patent HTML (.html or .htm) only. JSON is available as an output download and cannot be uploaded as input.
 
 ## Research record and persistence
 

README.md

@@ -16,7 +16,7 @@ short_description: Turn patent HTML into diagrams, JSON, and SysML
 
 [Open the app](https://huggingface.co/spaces/cmuchancel/patent2sysml) · [Workflow](ARCHITECTURE.md) · [Research record](RESEARCH_RECORD.md)
 
-A simple Gradio interface for your teammate's [Info-extraction](https://github.com/eandujar09/Info-extraction) agents, pinned at `848d0337cce01bebc620da4a2b3d873c16ffb326`. Upload patent HTML, connect ChatGPT, then click **Process**. The three output tabs show a diagram, JSON, and a downloadable SysML file. Fine Tuned NLP remains disabled.
+A simple Gradio interface for your teammate's [Info-extraction](https://github.com/eandujar09/Info-extraction) agents, pinned at `848d0337cce01bebc620da4a2b3d873c16ffb326`. Upload patent HTML, choose **AI agents**, connect ChatGPT in the sign-in popup, then click **Process**. No method is selected automatically. The popup closes on successful sign-in, and output tabs appear after processing. The three output tabs show a diagram, JSON, and a downloadable SysML file. Fine Tuned NLP remains disabled.
 
 The pipeline keeps the five fixed textbook queries, adds patent-specific questions, drafts a model, independently reviews it, and allows one repair pass followed by re-review. Unsupported unresolved items and dependent connections are omitted from the final model. Full findings, drafts and removal explanations stay in the private research archive. The JSON tab also downloads that complete ZIP.
 
@@ -46,7 +46,7 @@ The parser is pinned to open-source SysIDE Legacy 0.9.1 and its 2024-12 library.
 
 | File | Purpose |
 | --- | --- |
-| `agent_app.py`, `styles.css` | Simple Gradio layout and styling. |
+| `agent_app.py`, `ui_workflow.py`, `ui_dialog.js`, `styles.css` | Gradio processing, progressive controls, accessible sign-in popup, and styling. |
 | `workflow.py` | Fixed questions, new agent instructions, retrieval budgets. |
 | `agent_runner.py` | Configure/launch agents, enforce completion, cleanup and exports. |
 | `workspace_mcp.py`, `quality.py` | Draft/review/repair gates and final omission rules. |

agent_app.py

@@ -4,14 +4,13 @@ import os
 import tempfile
 from pathlib import Path
 
-import gradio as gr
 from rendering import diagram
 
 from agent_runner import run_agents
-from chatgpt_login import connect_chatgpt
 from sysml_export import to_sysml
 from textbook_index import load_index
-from user_session import SESSIONS, new_session, delete_session
+from user_session import SESSIONS
+from ui_workflow import build_app
 
 load_index()
 
@@ -50,43 +49,10 @@ def process(file: str | None, session=None):
         yield str(error), "", None, "", "", None, None
 
 
-with gr.Blocks(title="Translate patents to SysML v2") as app:
-    session = gr.State(new_session if os.getenv("SPACE_ID") else None,
-                       time_to_live=3600, delete_callback=delete_session)
-    if os.getenv("PATENT_SPACE_WRAPPER"):
-        gr.Button(visible=False).click(unused_gpu_slot, api_name=False)
-    gr.Markdown("# Translate patents to SysML v2\nUpload a patent. Generate a system model.")
-    if os.getenv("SPACE_ID"):
-        with gr.Accordion("Connect ChatGPT", open=True):
-            gr.Markdown("Sign in with your own ChatGPT account for this session. "
-                        "Your login is separate from other visitors and expires when the session is cleaned up.")
-            connect = gr.Button("Connect ChatGPT")
-            login_status = gr.Markdown()
-            connect.click(connect_chatgpt, inputs=session, outputs=login_status,
-                          api_name=False, concurrency_limit=4)
-    patent = gr.File(label="Patent HTML · .html or .htm · up to 10 MB", file_types=[".html", ".htm"], type="filepath")
-    with gr.Row():
-        agents = gr.Button("AI agents", variant="primary")
-        gr.Button("Fine Tuned NLP", interactive=False)
-    gr.Markdown("Research mode: uploaded patents, agent conversations, retrieved evidence, and outputs "
-                "are retained in the project owner’s private research archive. Login credentials are excluded.")
-    start = gr.Button("Process", variant="primary")
-    status = gr.Markdown("Ready. Each run uses your connected OpenCode model.")
-    agents.click(lambda: "AI agents selected.", outputs=status, api_name=False)
-    with gr.Tab("Diagram"):
-        preview = gr.HTML(elem_id="diagram")
-    with gr.Tab("JSON text"):
-        result = gr.Code(label="Functional-decomposition JSON", language="json", interactive=False)
-        download = gr.DownloadButton("Download JSON")
-        research_download = gr.DownloadButton("Download complete research record (.zip)")
-    with gr.Tab("SysML download"):
-        sysml_download = gr.DownloadButton("Download .sysml")
-        sysml_text = gr.Code(label="SysML v2", language=None, interactive=False)
-    gr.Markdown("Uses the Info-extraction agents. SJS conversion is a separate teammate integration.")
-    start.click(process, [patent, session], [status, result, download, preview, sysml_text, sysml_download, research_download],
-                api_name="process_patent", concurrency_limit=1)
+app = build_app(process, globals().get("unused_gpu_slot"))
 
 if __name__ == "__main__":
     app.queue(max_size=5).launch(server_name=os.getenv("GRADIO_SERVER_NAME", "0.0.0.0" if os.getenv("SPACE_ID") else "127.0.0.1"),
-                              css_paths=Path(__file__).with_name("styles.css"), max_file_size="10mb",
+                              css_paths=Path(__file__).with_name("styles.css"),
+                              js=Path(__file__).with_name("ui_dialog.js").read_text(), max_file_size="10mb",
                               blocked_paths=[str(SESSIONS), str(Path(__file__).parent / "assets")])

styles.css

@@ -1,4 +1,4 @@
-/* A CSS-only visual layer over the existing Gradio controls. */
+/* Light styling for the native Gradio upload, method, sign-in and result controls. */
 :root {
     color-scheme: light;
     --patent-bg: #f8fafc;
@@ -127,10 +127,9 @@ body, gradio-app { background: var(--patent-bg) !important; }
     border-style: solid !important;
     border-color: #ced9f3 !important;
 }
-/* Initially show just the heading and native upload area. */
-.gradio-container main > .column:has([data-testid="upload-text"]) > :not(.block:has(h1), .block:has([data-testid="upload-text"])) { display: none !important; }
-.gradio-container main > .column > .row:has(> button.primary) { gap: 15px; margin-top: 5px; }
-.gradio-container main > .column > .row > button {
+/* Visibility is controlled by Gradio events, not CSS guesses about upload state. */
+.gradio-container #method-options { gap: 15px; margin-top: 5px; }
+.gradio-container #method-options > button {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
@@ -147,34 +146,34 @@ body, gradio-app { background: var(--patent-bg) !important; }
     box-shadow: none;
     transition: background .2s, border-color .2s;
 }
-.gradio-container main > .column > .row > button.primary {
+.gradio-container #method-agents.primary {
     background: #f2f5ff !important;
     border: 1px solid #a4b8f2 !important;
     color: #233b78 !important;
 }
-.gradio-container main > .column > .row > button.primary::after {
+.gradio-container #method-agents::after {
     content: 'Use your connected ChatGPT account';
     font-size: 12px;
     font-weight: 400;
     letter-spacing: 0;
     color: #5c6f99;
 }
-.gradio-container main > .column > .row > button.primary:hover { background: #eaf0ff !important; border-color: #6483e6 !important; }
-.gradio-container main > .column > .row > button:disabled {
+.gradio-container #method-agents.primary:hover { background: #eaf0ff !important; border-color: #6483e6 !important; }
+.gradio-container #method-nlp {
     opacity: 1 !important;
     background: #f5f7fa !important;
     border: 1px solid #e1e6ed !important;
     color: #6d788b !important;
     cursor: not-allowed;
 }
-.gradio-container main > .column > .row > button:disabled::after {
+.gradio-container #method-nlp::after {
     content: 'Coming soon';
     color: #737f90;
     font-size: 12px;
     font-weight: 400;
     letter-spacing: 0;
 }
-.gradio-container main > .column > button.primary {
+.gradio-container #process-button {
     min-height: 52px;
     border-radius: 11px;
     border: 1px solid #315de8 !important;
@@ -185,11 +184,11 @@ body, gradio-app { background: var(--patent-bg) !important; }
     box-shadow: 0 4px 10px #315de81a;
     transition: background .2s;
 }
-.gradio-container main > .column > button.primary::after { content: '  →'; padding-left: 7px; }
-.gradio-container main > .column > button.primary:hover { background: #244bcc !important; }
-.gradio-container main > .column > .row + .block .prose p { color: #718096; font-size: 11px; line-height: 1.75; }
-.gradio-container main > .column > button.primary + .block { padding: 6px 0 6px 12px !important; border-left: 2px solid #c9d6f8 !important; min-height: 34px; }
-.gradio-container main > .column > button.primary + .block .prose p { color: #5b6980; font-size: 12px; line-height: 1.7; }
+.gradio-container #process-button::after { content: '  →'; padding-left: 7px; }
+.gradio-container #process-button:hover { background: #244bcc !important; }
+.gradio-container #research-disclosure .prose p { color: #718096; font-size: 11px; line-height: 1.75; }
+.gradio-container #process-status { padding: 6px 0 6px 12px !important; border-left: 2px solid #c9d6f8 !important; min-height: 34px; }
+.gradio-container #process-status .prose p { color: #5b6980; font-size: 12px; line-height: 1.7; }
 .gradio-container .block:has(> .label) { border-radius: 14px !important; border-color: #dce3ed !important; background: #fff !important; }
 .gradio-container .block:has(> .label) .prose p { color: #66748b; font-size: 13px; line-height: 1.7; }
 .gradio-container .prose a { color: #315de8 !important; text-underline-offset: 4px; }
@@ -229,7 +228,7 @@ body, gradio-app { background: var(--patent-bg) !important; }
     .prose h1 + p { font-size: 13px !important; }
     .upload-container { height: 265px !important; min-height: 265px; }
     .block:has(> [data-testid="block-label"]) { min-height: 265px; }
-    .row:has(> button.primary) { flex-direction: column; }
+    #method-options { flex-direction: column; }
     .row > button { width: 100%; min-height: 115px; padding: 22px; }
     .tabs { padding: 6px 12px 12px; }
     [role="tablist"] { gap: 9px; }
@@ -240,3 +239,50 @@ body, gradio-app { background: var(--patent-bg) !important; }
     *, *::before, *::after { animation: none !important; transition: none !important; }
     .patent-progress[aria-busy="true"] .patent-progress__fill { width: 100%; opacity: .6; }
 }
+
+/* Explicit neutral method state; only the selected card uses the blue treatment. */
+.gradio-container #method-agents.secondary {
+    background: #fff !important; border: 1px solid #d9e1ec !important; color: #263346 !important;
+}
+.gradio-container #method-agents.secondary:hover { border-color: #7896e9 !important; background: #f8faff !important; }
+.gradio-container #process-button:disabled { opacity: 1; background: #e7ecf5 !important; border-color: #e0e6ef !important; color: #6e7c92 !important; box-shadow: none; }
+.gradio-container #reconnect-chatgpt { width: auto; align-self: flex-start; min-height: 40px; padding: 9px 16px; font-size: 13px; color: #315de8 !important; background: #f0f4ff !important; border: 1px solid #d5dff8 !important; }
+/* Override table colors explicitly, including when the visitor prefers dark mode. */
+.gradio-container #patent-upload:has(.file-preview-holder) { padding: 19px 20px 17px !important; }
+.gradio-container #patent-upload:has(.file-preview-holder) > [data-testid="block-label"] { position: static !important; margin: 0 30px 13px 0 !important; }
+.gradio-container #patent-upload .file-preview-holder { background: transparent !important; padding: 0 !important; border: 0 !important; }
+.gradio-container #patent-upload :is(table, tbody, tr, td) { background: #f2f5fb !important; color: #263346 !important; border: 0 !important; }
+.gradio-container #patent-upload table { border-collapse: separate; border-spacing: 0; border-radius: 11px; overflow: hidden; }
+.gradio-container #patent-upload td { padding: 17px 15px !important; font-size: 13px; }
+.gradio-container #patent-upload :is(.filename, .stem, .ext) { color: #263346 !important; }
+.gradio-container #patent-upload .download-link { color: #315de8 !important; font-size: 12px; white-space: nowrap; }
+.gradio-container #patent-upload button[aria-label="Clear"] { background: #fff !important; color: #64748b !important; border-radius: 9px; }
+/* Gradio Column overlay; it is absent until the user chooses AI agents. */
+.gradio-container #login-modal {
+    position: fixed !important; inset: 0 !important; z-index: 10000 !important;
+    width: 100vw !important; height: 100dvh !important; max-width: none !important;
+    min-width: 0 !important; margin: 0 !important; padding: 24px !important;
+    align-items: center; justify-content: center; overflow-y: auto;
+    background: #17203366 !important; backdrop-filter: blur(7px);
+}
+.gradio-container #login-card {
+    position: relative; flex: 0 0 auto; width: min(440px, 100%); min-width: 0 !important;
+    gap: 19px; padding: 38px 30px 25px !important; border: 1px solid #dce4ef;
+    border-radius: 20px; background: #fff !important; color: #17202d !important;
+    box-shadow: 0 24px 100px #16233c30;
+}
+.gradio-container #login-card h2 { color: #17202d !important; font-size: 27px !important; font-weight: 600 !important; line-height: 1.2; letter-spacing: -.8px; margin: 9px 0 15px !important; }
+.gradio-container #login-description { color: #5c6a80 !important; font-size: 14px; line-height: 1.7; }
+.gradio-container #close-login { position: absolute; top: 12px; right: 12px; z-index: 1; width: 34px; min-width: 34px; min-height: 34px; padding: 0; border: 0; background: #f3f6fa !important; color: #526178 !important; }
+.gradio-container #login-status { padding: 16px !important; border: 1px solid #dce5f6 !important; border-radius: 11px; background: #f4f7fd !important; }
+.gradio-container #login-status .prose { color: #34445e !important; font-size: 13px; line-height: 1.75; }
+.gradio-container #login-status strong { color: #17202d !important; }
+.gradio-container #connect-chatgpt { min-height: 48px; background: #315de8 !important; color: #fff !important; border: 1px solid #315de8 !important; border-radius: 10px; font-size: 14px; }
+.gradio-container #connect-chatgpt:disabled { background: #e7ecf5 !important; color: #526178 !important; border-color: #dbe3ef !important; opacity: 1; }
+.gradio-container #login-note p { color: #6c7a8e !important; font-size: 11px; line-height: 1.6; }
+@media (max-width: 640px) {
+    #login-modal { padding: 16px !important; }
+    #login-card { padding: 36px 22px 23px !important; }
+    #patent-upload:has(.file-preview-holder) { min-height: 0 !important; padding: 17px 13px !important; }
+    #patent-upload td { padding: 15px 10px !important; }
+}

tests/test_ui_workflow.py

@@ -0,0 +1,99 @@
+"""Regression checks for progressive controls and login lifecycle, without model calls."""
+import sys
+import unittest
+from pathlib import Path
+from unittest.mock import patch
+
+sys.path.insert(0, str(Path(__file__).resolve().parents[1]))
+from ui_workflow import build_app
+
+
+def example_process(file, session):
+    yield 'Working', '', None, '', '', None, None
+    yield 'Complete', '{"views": {}}', '/tmp/result.json', '<svg/>', 'package Example {}', '/tmp/result.sysml', '/tmp/research.zip'
+
+
+class InterfaceTests(unittest.TestCase):
+    @classmethod
+    def setUpClass(cls):
+        cls.app = build_app(example_process)
+        cls.handlers = {f.fn.__name__: f.fn for f in cls.app.fns.values() if f.fn}
+        cls.components = {c.elem_id: c for c in cls.app.blocks.values() if getattr(c, 'elem_id', None)}
+
+    def component(self, name):
+        return self.components[name]
+
+    def test_initial_state_has_no_method_login_process_or_results(self):
+        for name in ['method-options', 'login-modal', 'process-button', 'results-section']:
+            self.assertFalse(self.component(name).visible)
+        self.assertEqual(self.component('method-agents').variant, 'secondary')
+
+    def test_upload_requires_fresh_selection_and_clears_results(self):
+        updates = self.handlers['on_upload']('/tmp/patent.html')
+        self.assertTrue(updates[self.component('method-options')]['visible'])
+        for name in ['process-button', 'login-modal', 'results-section']:
+            self.assertFalse(updates[self.component(name)]['visible'])
+        self.assertEqual(updates[self.component('method-agents')]['variant'], 'secondary')
+        self.assertFalse(self.handlers['on_upload'](None)[self.component('method-options')]['visible'])
+
+    @patch('ui_workflow.login_needed', return_value=True)
+    def test_explicit_selection_opens_login_and_disables_process(self, _):
+        updates = self.handlers['choose_agents']('/tmp/patent.html', 'session')
+        self.assertTrue(updates[self.component('login-modal')]['visible'])
+        self.assertTrue(updates[self.component('process-button')]['visible'])
+        self.assertFalse(updates[self.component('process-button')]['interactive'])
+
+    @patch('ui_workflow.login_needed', return_value=False)
+    def test_connected_user_can_choose_method_without_another_login(self, _):
+        updates = self.handlers['choose_agents']('/tmp/patent.html', 'session')
+        self.assertFalse(updates[self.component('login-modal')]['visible'])
+        self.assertTrue(updates[self.component('process-button')]['interactive'])
+
+    def test_successful_login_closes_dialog_and_enables_process(self):
+        state = {'needs_login': True}
+        def login(visitor):
+            yield 'Enter your code'
+            state['needs_login'] = False
+            yield 'Connected'
+        with patch('ui_workflow.login_needed', side_effect=lambda _: state['needs_login']), patch('ui_workflow.connect_chatgpt', login):
+            updates = list(self.handlers['sign_in']('session'))
+        completed = next(x for x in updates if self.component('login-modal') in x)
+        self.assertFalse(completed[self.component('login-modal')]['visible'])
+        self.assertFalse(completed[self.component('reconnect-chatgpt')]['visible'])
+        self.assertTrue(completed[self.component('process-button')]['interactive'])
+
+    def test_cancel_closes_underlying_login_generator(self):
+        state = {'closed': False}
+        def login(visitor):
+            try:
+                yield 'Waiting for sign-in'
+                yield 'Still waiting'
+            finally:
+                state['closed'] = True
+        with patch('ui_workflow.login_needed', return_value=True), patch('ui_workflow.connect_chatgpt', login):
+            stream = self.handlers['sign_in']('session')
+            next(stream)
+            next(stream)
+            stream.close()
+        self.assertTrue(state['closed'])
+
+    @patch('ui_workflow.login_needed', return_value=True)
+    def test_failed_login_does_not_unlock_process(self, _):
+        def failed_login(visitor):
+            yield 'Sign-in expired'
+        with patch('ui_workflow.connect_chatgpt', failed_login):
+            updates = list(self.handlers['sign_in']('session'))
+        self.assertFalse(any(x.get(self.component('process-button'), {}).get('interactive') for x in updates))
+        self.assertTrue(updates[-1][self.component('connect-chatgpt')]['interactive'])
+
+    @patch('ui_workflow.login_needed', return_value=False)
+    def test_results_are_revealed_only_after_processing_finishes(self, _):
+        updates = list(self.handlers['run_ui']('/tmp/patent.html', 'agents', 'session'))
+        result_states = [u[self.component('results-section')]['visible'] for u in updates if self.component('results-section') in u]
+        self.assertEqual(result_states, [False, True])
+        self.assertTrue(updates[-1][self.component('patent-upload')]['interactive'])
+        self.assertTrue(updates[-1][self.component('process-button')]['interactive'])
+
+
+if __name__ == '__main__':
+    unittest.main()

ui_dialog.js

@@ -0,0 +1,61 @@
+() => {
+  window.__patentDialogCleanup?.();
+  let open = false;
+  let previousFocus;
+  let previousOverflow = '';
+  let inerted = [];
+  const visible = element => !!element?.getClientRects().length;
+  const sync = () => {
+    const modal = document.getElementById('login-modal');
+    const card = document.getElementById('login-card');
+    const close = document.getElementById('close-login');
+    if (card) {
+      card.setAttribute('role', 'dialog');
+      card.setAttribute('aria-modal', 'true');
+      card.setAttribute('aria-labelledby', 'login-title');
+      card.setAttribute('aria-describedby', 'login-description');
+    }
+    close?.setAttribute('aria-label', 'Close ChatGPT sign-in');
+    const agents = document.getElementById('method-agents');
+    agents?.setAttribute('aria-pressed', String(agents.classList.contains('primary')));
+    const next = visible(modal);
+    if (next === open) return;
+    open = next;
+    if (open) {
+      previousFocus = document.activeElement;
+      previousOverflow = document.body.style.overflow;
+      document.body.style.overflow = 'hidden';
+      inerted = [...(modal.parentElement?.children || [])]
+        .filter(el => el !== modal && !el.inert);
+      inerted.forEach(el => { el.inert = true; });
+      close?.focus();
+    } else {
+      document.body.style.overflow = previousOverflow;
+      inerted.forEach(el => { el.inert = false; });
+      inerted = [];
+      if (previousFocus?.isConnected) previousFocus.focus();
+    }
+  };
+  const onKey = event => {
+    if (!open) return;
+    if (event.key === 'Escape') {
+      event.preventDefault();
+      document.getElementById('close-login')?.click();
+    }
+    if (event.key !== 'Tab') return;
+    const controls = [...document.querySelectorAll('#login-card button:not(:disabled), #login-card a[href]')].filter(visible);
+    const first = controls[0], last = controls[controls.length - 1];
+    if (event.shiftKey && document.activeElement === first) { event.preventDefault(); last?.focus(); }
+    else if (!event.shiftKey && document.activeElement === last) { event.preventDefault(); first?.focus(); }
+  };
+  const observer = new MutationObserver(sync);
+  observer.observe(document.body, {childList: true, subtree: true, attributes: true, attributeFilter: ['class', 'style']});
+  document.addEventListener('keydown', onKey);
+  window.__patentDialogCleanup = () => {
+    observer.disconnect();
+    document.removeEventListener('keydown', onKey);
+    inerted.forEach(el => { el.inert = false; });
+    if (open) document.body.style.overflow = previousOverflow;
+  };
+  sync();
+}

ui_workflow.py

@@ -0,0 +1,156 @@
+"""Gradio presentation states for upload, explicit method choice, sign-in and results."""
+from contextlib import closing
+import logging
+import os
+
+import gradio as gr
+
+from chatgpt_login import connect_chatgpt
+from user_session import connected, delete_session, new_session
+
+
+def login_needed(visitor):
+    if not os.getenv('SPACE_ID'):
+        return False
+    try:
+        return not connected(visitor)
+    except ValueError:
+        return True
+
+
+def build_app(process, unused_gpu_slot=None):
+    with gr.Blocks(title='Translate patents to SysML v2') as app:
+        session = gr.State(new_session if os.getenv('SPACE_ID') else None,
+                           time_to_live=3600, delete_callback=delete_session)
+        method = gr.State(None)
+        if unused_gpu_slot:
+            gr.Button(visible=False).click(unused_gpu_slot, api_name=False)
+        gr.Markdown('# Translate patents to SysML v2\nUpload a patent. Generate a system model.')
+        patent = gr.File(label='Patent HTML · .html or .htm · up to 10 MB',
+                         file_types=['.html', '.htm'], type='filepath', elem_id='patent-upload')
+        with gr.Row(visible=False, elem_id='method-options') as methods:
+            agents = gr.Button('AI agents', variant='secondary', elem_id='method-agents')
+            gr.Button('Fine Tuned NLP', interactive=False, elem_id='method-nlp')
+        disclosure = gr.Markdown('Research mode: uploaded patents, agent conversations, retrieved evidence, and outputs '
+                                'are retained in the project owner’s private research archive. Login credentials are excluded.',
+                                visible=False, elem_id='research-disclosure')
+        reconnect = gr.Button('Connect ChatGPT', visible=False, elem_id='reconnect-chatgpt')
+        start = gr.Button('Process', variant='primary', visible=False, interactive=False, elem_id='process-button')
+        status = gr.Markdown(visible=False, elem_id='process-status')
+        with gr.Column(visible=False, elem_id='results-section') as results:
+            with gr.Tab('Diagram'):
+                preview = gr.HTML(elem_id='diagram')
+            with gr.Tab('JSON text'):
+                result = gr.Code(label='Functional-decomposition JSON', language='json', interactive=False)
+                download = gr.DownloadButton('Download JSON')
+                research_download = gr.DownloadButton('Download complete research record (.zip)')
+            with gr.Tab('SysML download'):
+                sysml_download = gr.DownloadButton('Download .sysml')
+                sysml_text = gr.Code(label='SysML v2', language=None, interactive=False)
+
+        # Native Gradio components styled as a dialog; JS supplies focus trapping and Escape.
+        with gr.Column(visible=False, elem_id='login-modal') as modal:
+            with gr.Column(elem_id='login-card'):
+                close = gr.Button('✕', elem_id='close-login', min_width=36, scale=0, size='sm')
+                gr.HTML('<h2 id="login-title">Connect ChatGPT</h2>'
+                        '<p id="login-description">Sign in with your ChatGPT account to use AI agents. '
+                        'Your connection is private to this session.</p>')
+                login_status = gr.Markdown('Continue to get a secure OpenAI sign-in link and code.', elem_id='login-status')
+                connect = gr.Button('Connect ChatGPT', variant='primary', elem_id='connect-chatgpt')
+                gr.Markdown('This window closes automatically once you’re connected.', elem_id='login-note')
+
+        output_components = [status, result, download, preview, sysml_text, sysml_download, research_download]
+
+        def on_upload(file):
+            return {methods: gr.update(visible=bool(file)), method: None,
+                    agents: gr.update(variant='secondary'), disclosure: gr.update(visible=bool(file)),
+                    start: gr.update(visible=False, interactive=False, value='Process'),
+                    status: gr.update(visible=False, value=''), modal: gr.update(visible=False),
+                    reconnect: gr.update(visible=False), connect: gr.update(interactive=True, value='Connect ChatGPT'),
+                    results: gr.update(visible=False), result: '', download: None, preview: '',
+                    sysml_text: '', sysml_download: None, research_download: None}
+
+        def choose_agents(file, visitor):
+            if not file:
+                raise gr.Error('Upload a patent HTML file first.')
+            needs_login = login_needed(visitor)
+            return {method: 'agents', agents: gr.update(variant='primary'),
+                    modal: gr.update(visible=needs_login),
+                    start: gr.update(visible=True, interactive=not needs_login),
+                    reconnect: gr.update(visible=needs_login),
+                    login_status: 'Continue to get a secure OpenAI sign-in link and code.',
+                    connect: gr.update(interactive=True, value='Connect ChatGPT'),
+                    status: gr.update(visible=True, value='AI agents selected. Connect ChatGPT to continue.' if needs_login
+                                      else 'AI agents selected. Ready to process.')}
+
+        def sign_in(visitor):
+            yield {connect: gr.update(interactive=False, value='Waiting for sign-in…')}
+            try:
+                if login_needed(visitor):
+                    # Closing the dialog cancels this generator and the login subprocess.
+                    with closing(connect_chatgpt(visitor)) as messages:
+                        for message in messages:
+                            yield {login_status: message}
+                if not login_needed(visitor):
+                    yield {modal: gr.update(visible=False), reconnect: gr.update(visible=False),
+                           start: gr.update(interactive=True),
+                           status: gr.update(visible=True, value='ChatGPT connected. Ready to process.')}
+                else:
+                    yield {start: gr.update(interactive=False)}
+            except (ValueError, OSError) as error:
+                yield {login_status: str(error), start: gr.update(interactive=False)}
+            yield {connect: gr.update(interactive=True, value='Connect ChatGPT')}
+
+        def dismiss_login():
+            return {modal: gr.update(visible=False), connect: gr.update(interactive=True, value='Connect ChatGPT')}
+
+        def run_ui(file, selected, visitor):
+            if not file or selected != 'agents':
+                yield {status: gr.update(visible=True, value='Upload a patent and select a method first.')}
+                return
+            if login_needed(visitor):
+                yield {modal: gr.update(visible=True), reconnect: gr.update(visible=True),
+                       start: gr.update(interactive=False),
+                       status: gr.update(visible=True, value='Connect ChatGPT to continue.')}
+                return
+            yield {start: gr.update(interactive=False, value='Processing…'), patent: gr.update(interactive=False),
+                   agents: gr.update(interactive=False), results: gr.update(visible=False),
+                   reconnect: gr.update(visible=False), status: gr.update(visible=True, value='Processing your patent…'),
+                   result: '', download: None, preview: '', sysml_text: '', sysml_download: None, research_download: None}
+            finished = None
+            try:
+                with closing(process(file, visitor)) as rows:
+                    for row in rows:
+                        finished = row
+                        yield {status: gr.update(visible=True, value=row[0])}
+                if finished:
+                    updates = dict(zip(output_components, finished))
+                    updates[status] = gr.update(visible=True, value=finished[0])
+                    # Failed runs can still expose their retained research archive.
+                    updates[results] = gr.update(visible=bool(finished[1] or finished[6]))
+                    yield updates
+            except Exception:
+                logging.exception('Patent processing failed')
+                yield {status: gr.update(visible=True, value='Processing could not finish. Please try again.')}
+            yield {start: gr.update(interactive=True, value='Process'), patent: gr.update(interactive=True),
+                   agents: gr.update(interactive=True)}
+
+        selection_outputs = [method, agents, modal, start, reconnect, login_status, connect, status]
+        agents.click(choose_agents, [patent, session], selection_outputs,
+                     api_name=False, queue=False, show_progress='hidden')
+        reconnect.click(choose_agents, [patent, session], selection_outputs,
+                        api_name=False, queue=False, show_progress='hidden')
+        login_event = connect.click(sign_in, session, [connect, login_status, modal, reconnect, start, status],
+                                    api_name=False, concurrency_limit=4, show_progress='hidden')
+        close.click(dismiss_login, outputs=[modal, connect], cancels=[login_event],
+                    api_name=False, queue=False, show_progress='hidden')
+        patent.change(on_upload, patent, [methods, method, agents, disclosure, start, status, modal, reconnect, connect,
+                      results, result, download, preview, sysml_text, sysml_download, research_download],
+                      cancels=[login_event], api_name=False, queue=False, show_progress='hidden')
+        start.click(run_ui, [patent, method, session],
+                    [*output_components, start, patent, agents, results, modal, reconnect],
+                    api_name=False, concurrency_limit=1, concurrency_id='patent_processing', show_progress='hidden')
+        # Preserve the existing seven-output API and backend authentication gate.
+        gr.Button(visible=False).click(process, [patent, session], output_components,
+                    api_name='process_patent', concurrency_limit=1, concurrency_id='patent_processing')
+    return app