From 82fbbb9ebd909645ff2e4dcb2952bfc97d5227aa Mon Sep 17 00:00:00 2001 From: Irit Katriel Date: Thu, 23 Apr 2026 21:47:35 +0100 Subject: [PATCH 1/7] Rework web app layout to prioritize source panel. Place source on its own first row with the Run button in-panel, and constrain remaining analysis panels to a max three-column responsive grid. Made-with: Cursor --- web/index.html | 41 ++++++++++++++++++++++++++++++++++++----- 1 file changed, 36 insertions(+), 5 deletions(-) diff --git a/web/index.html b/web/index.html index a23b275..7e844c5 100644 --- a/web/index.html +++ b/web/index.html @@ -83,8 +83,18 @@ padding: 14px; display: grid; gap: 14px; - grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); - grid-auto-rows: minmax(320px, 1fr); + grid-template-columns: repeat(3, minmax(320px, 1fr)); + grid-auto-rows: minmax(320px, auto); + } + @media (max-width: 1200px) { + main { + grid-template-columns: repeat(2, minmax(320px, 1fr)); + } + } + @media (max-width: 860px) { + main { + grid-template-columns: minmax(320px, 1fr); + } } .panel { display: flex; @@ -96,6 +106,7 @@ min-height: 320px; } .panel.hidden { display: none; } + .panel.source-panel { grid-column: 1 / -1; } .panel > h2 { margin: 0; padding: 8px 12px; @@ -108,6 +119,24 @@ letter-spacing: 0.04em; text-transform: uppercase; } + .panel-titlebar { + margin: 0; + padding: 8px 12px; + display: flex; + align-items: center; + justify-content: space-between; + gap: 10px; + background: #1b212a; + border-bottom: 1px solid var(--panel-border); + letter-spacing: 0.04em; + text-transform: uppercase; + } + .panel-titlebar h2 { + margin: 0; + font-size: 12px; + font-weight: 600; + color: #f0f4f8; + } .panel > .content { flex: 1; overflow: auto; @@ -167,7 +196,6 @@

codoscopeloading CPython…

-
@@ -183,8 +211,11 @@

codoscopeloading CPython…
-
-

Source

+
+
+

Source

+ +
def f(x): return x * 2 + 10 + 1 From 01cdb0ae10d5425e8fac17bd87537d4561f1c747 Mon Sep 17 00:00:00 2001 From: Irit Katriel Date: Thu, 23 Apr 2026 21:49:43 +0100 Subject: [PATCH 2/7] Update web driver tests for structured view output. Assert against the new {text, lines} payload shape returned by web.driver views and verify basic line metadata consistency. Made-with: Cursor --- tests/test_web_driver.py | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/tests/test_web_driver.py b/tests/test_web_driver.py index 688cfdd..aa5b629 100644 --- a/tests/test_web_driver.py +++ b/tests/test_web_driver.py @@ -16,21 +16,25 @@ class WebDriverTests(unittest.TestCase): def test_view_tokens_includes_token_names(self) -> None: rendered = driver.view_tokens("x = 1\n") - self.assertIn("NAME", rendered) - self.assertIn("NUMBER", rendered) + self.assertIn("NAME", rendered["text"]) + self.assertIn("NUMBER", rendered["text"]) + self.assertEqual(len(rendered["lines"]), len(rendered["text"].splitlines())) def test_view_ast_returns_module_dump(self) -> None: rendered = driver.view_ast("x = 1\n", optimize=False) - self.assertIn("Module(", rendered) - self.assertIn("Assign(", rendered) + self.assertIn("Module(", rendered["text"]) + self.assertIn("Assign(", rendered["text"]) + self.assertEqual(len(rendered["lines"]), len(rendered["text"].splitlines())) def test_view_pseudo_smoke(self) -> None: rendered = driver.view_pseudo("def f(x):\n return x\n\nprint(f(42))\n") - self.assertIn("LOAD_CONST", rendered) + self.assertIn("LOAD_CONST", rendered["text"]) + self.assertEqual(len(rendered["lines"]), len(rendered["text"].splitlines())) def test_view_compiled_smoke(self) -> None: rendered = driver.view_compiled("x = 1\n") - self.assertIn("LOAD_CONST", rendered) + self.assertIn("LOAD_CONST", rendered["text"]) + self.assertEqual(len(rendered["lines"]), len(rendered["text"].splitlines())) def test_instruction_items_supports_list_and_get_instructions(self) -> None: inst = dis.Instruction( From cbc79a9c214b7ec6c8f805a366550c33896ac5bf Mon Sep 17 00:00:00 2001 From: Irit Katriel Date: Thu, 23 Apr 2026 22:02:29 +0100 Subject: [PATCH 3/7] Move source panel Run button closer to title. Align source header controls to the left so Run is easier to reach when working from the editor pane. Made-with: Cursor --- web/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/index.html b/web/index.html index 7e844c5..24b2b40 100644 --- a/web/index.html +++ b/web/index.html @@ -124,7 +124,7 @@ padding: 8px 12px; display: flex; align-items: center; - justify-content: space-between; + justify-content: flex-start; gap: 10px; background: #1b212a; border-bottom: 1px solid var(--panel-border); From 43192462ae1bb67c57c91fe9ef826575ab901d92 Mon Sep 17 00:00:00 2001 From: Irit Katriel Date: Thu, 23 Apr 2026 22:12:06 +0100 Subject: [PATCH 4/7] Place Run button before Source title in panel header. Move the Run control to the left edge of the source title bar to make it quicker to reach while editing code. Made-with: Cursor --- web/index.html | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/web/index.html b/web/index.html index 24b2b40..ff5d92f 100644 --- a/web/index.html +++ b/web/index.html @@ -131,6 +131,8 @@ letter-spacing: 0.04em; text-transform: uppercase; } + .panel-titlebar #run { order: 1; } + .panel-titlebar h2 { order: 2; } .panel-titlebar h2 { margin: 0; font-size: 12px; @@ -213,8 +215,8 @@

codoscopeloading CPython…
-

Source

+

Source

def f(x): return x * 2 + 10 + 1 From d964375c0ec24777054f0f1e5cae2c1b8ee71b16 Mon Sep 17 00:00:00 2001 From: Irit Katriel Date: Thu, 23 Apr 2026 22:16:00 +0100 Subject: [PATCH 5/7] Reduce source panel width on large web layouts. Make the source panel span two columns in the 3-column layout while keeping full-width behavior on smaller breakpoints. Made-with: Cursor --- web/index.html | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/web/index.html b/web/index.html index ff5d92f..cf77336 100644 --- a/web/index.html +++ b/web/index.html @@ -90,11 +90,13 @@ main { grid-template-columns: repeat(2, minmax(320px, 1fr)); } + .panel.source-panel { grid-column: 1 / -1; } } @media (max-width: 860px) { main { grid-template-columns: minmax(320px, 1fr); } + .panel.source-panel { grid-column: 1 / -1; } } .panel { display: flex; @@ -106,7 +108,7 @@ min-height: 320px; } .panel.hidden { display: none; } - .panel.source-panel { grid-column: 1 / -1; } + .panel.source-panel { grid-column: span 2; } .panel > h2 { margin: 0; padding: 8px 12px; From 11d959351407dacffe84969b122897526fff9258 Mon Sep 17 00:00:00 2001 From: Irit Katriel Date: Thu, 23 Apr 2026 22:53:26 +0100 Subject: [PATCH 6/7] Split source and run controls into separate first-row panels. Use a wide Source panel plus a narrow Actions panel with the Run button to keep execution controls close without consuming source editor width. Made-with: Cursor --- web/index.html | 19 ++++++++++++++++--- 1 file changed, 16 insertions(+), 3 deletions(-) diff --git a/web/index.html b/web/index.html index cf77336..75de202 100644 --- a/web/index.html +++ b/web/index.html @@ -133,14 +133,19 @@ letter-spacing: 0.04em; text-transform: uppercase; } - .panel-titlebar #run { order: 1; } - .panel-titlebar h2 { order: 2; } .panel-titlebar h2 { margin: 0; font-size: 12px; font-weight: 600; color: #f0f4f8; } + .run-controls { + display: flex; + flex: 1; + align-items: flex-start; + justify-content: center; + padding: 12px; + } .panel > .content { flex: 1; overflow: auto; @@ -175,6 +180,9 @@ min-height: 0; } .ace_editor { font-size: 12px !important; } + .source-panel #editor { + min-height: 360px; + } .banner { padding: 8px 16px; color: var(--error); @@ -217,7 +225,6 @@

codoscopeloading CPython…
-

Source

def f(x): @@ -225,6 +232,12 @@

Source

print(f(42))
+
+

Actions

+
+ +
+

Tokens


             
From 9ca2447bb9312b03c968c072d4f1b7fbdb451e1c Mon Sep 17 00:00:00 2001 From: Irit Katriel Date: Thu, 23 Apr 2026 23:06:30 +0100 Subject: [PATCH 7/7] Keep source and run panels aligned at medium widths. Adjust responsive grid rules so source and run stay side-by-side in the two-column layout and only stack on narrow single-column screens. Made-with: Cursor --- web/index.html | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/web/index.html b/web/index.html index 75de202..6791b58 100644 --- a/web/index.html +++ b/web/index.html @@ -90,13 +90,15 @@ main { grid-template-columns: repeat(2, minmax(320px, 1fr)); } - .panel.source-panel { grid-column: 1 / -1; } + .panel.source-panel { grid-column: span 1; } + .panel.run-panel { grid-column: span 1; } } @media (max-width: 860px) { main { grid-template-columns: minmax(320px, 1fr); } .panel.source-panel { grid-column: 1 / -1; } + .panel.run-panel { grid-column: 1 / -1; } } .panel { display: flex;