From 1ea27f9c716f27d84565380965579f25228584ac Mon Sep 17 00:00:00 2001
From: Szymon0C <szymon.cichonski30@gmail.com>
Date: Thu, 2 Apr 2026 10:26:06 +0200
Subject: [PATCH 01/18] feat: add Rust backend for sidecar, AI streaming, and
 hardware detection

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src-tauri/Cargo.lock                | 772 ++++++++++++++--------------
 src-tauri/Cargo.toml                |   5 +
 src-tauri/capabilities/default.json |   4 +-
 src-tauri/src/ai.rs                 | 108 ++++
 src-tauri/src/hardware.rs           | 102 ++++
 src-tauri/src/lib.rs                |  13 +
 src-tauri/src/sidecar.rs            | 146 ++++++
 7 files changed, 766 insertions(+), 384 deletions(-)
 create mode 100644 src-tauri/src/ai.rs
 create mode 100644 src-tauri/src/hardware.rs
 create mode 100644 src-tauri/src/sidecar.rs

diff --git a/src-tauri/Cargo.lock b/src-tauri/Cargo.lock
index 2091435..f3a2d2e 100644
--- a/src-tauri/Cargo.lock
+++ b/src-tauri/Cargo.lock
@@ -53,137 +53,6 @@ version = "1.0.102"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "7f202df86484c868dbad7eaa557ef785d5c66295e41b460ef922eca0723b842c"
 
-[[package]]
-name = "async-broadcast"
-version = "0.7.2"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "435a87a52755b8f27fcf321ac4f04b2802e337c8c4872923137471ec39c37532"
-dependencies = [
- "event-listener",
- "event-listener-strategy",
- "futures-core",
- "pin-project-lite",
-]
-
-[[package]]
-name = "async-channel"
-version = "2.5.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "924ed96dd52d1b75e9c1a3e6275715fd320f5f9439fb5a4a11fa51f4221158d2"
-dependencies = [
- "concurrent-queue",
- "event-listener-strategy",
- "futures-core",
- "pin-project-lite",
-]
-
-[[package]]
-name = "async-executor"
-version = "1.14.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "c96bf972d85afc50bf5ab8fe2d54d1586b4e0b46c97c50a0c9e71e2f7bcd812a"
-dependencies = [
- "async-task",
- "concurrent-queue",
- "fastrand",
- "futures-lite",
- "pin-project-lite",
- "slab",
-]
-
-[[package]]
-name = "async-io"
-version = "2.6.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "456b8a8feb6f42d237746d4b3e9a178494627745c3c56c6ea55d92ba50d026fc"
-dependencies = [
- "autocfg",
- "cfg-if",
- "concurrent-queue",
- "futures-io",
- "futures-lite",
- "parking",
- "polling",
- "rustix",
- "slab",
- "windows-sys 0.61.2",
-]
-
-[[package]]
-name = "async-lock"
-version = "3.4.2"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "290f7f2596bd5b78a9fec8088ccd89180d7f9f55b94b0576823bbbdc72ee8311"
-dependencies = [
- "event-listener",
- "event-listener-strategy",
- "pin-project-lite",
-]
-
-[[package]]
-name = "async-process"
-version = "2.5.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "fc50921ec0055cdd8a16de48773bfeec5c972598674347252c0399676be7da75"
-dependencies = [
- "async-channel",
- "async-io",
- "async-lock",
- "async-signal",
- "async-task",
- "blocking",
- "cfg-if",
- "event-listener",
- "futures-lite",
- "rustix",
-]
-
-[[package]]
-name = "async-recursion"
-version = "1.1.1"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "3b43422f69d8ff38f95f1b2bb76517c91589a924d1559a0e935d7c8ce0274c11"
-dependencies = [
- "proc-macro2",
- "quote",
- "syn 2.0.117",
-]
-
-[[package]]
-name = "async-signal"
-version = "0.2.13"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "43c070bbf59cd3570b6b2dd54cd772527c7c3620fce8be898406dd3ed6adc64c"
-dependencies = [
- "async-io",
- "async-lock",
- "atomic-waker",
- "cfg-if",
- "futures-core",
- "futures-io",
- "rustix",
- "signal-hook-registry",
- "slab",
- "windows-sys 0.61.2",
-]
-
-[[package]]
-name = "async-task"
-version = "4.7.1"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "8b75356056920673b02621b35afd0f7dda9306d03c79a30f5c56c44cf256e3de"
-
-[[package]]
-name = "async-trait"
-version = "0.1.89"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "9035ad2d096bed7955a320ee7e2230574d28fd3c3a0f186cbea1ff3c7eed5dbb"
-dependencies = [
- "proc-macro2",
- "quote",
- "syn 2.0.117",
-]
-
 [[package]]
 name = "atk"
 version = "0.18.2"
@@ -294,19 +163,6 @@ dependencies = [
  "objc2",
 ]
 
-[[package]]
-name = "blocking"
-version = "1.6.2"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "e83f8d02be6967315521be875afa792a316e28d57b5a2d401897e2a7921b7f21"
-dependencies = [
- "async-channel",
- "async-task",
- "futures-io",
- "futures-lite",
- "piper",
-]
-
 [[package]]
 name = "brotli"
 version = "8.0.2"
@@ -518,6 +374,16 @@ dependencies = [
  "version_check",
 ]
 
+[[package]]
+name = "core-foundation"
+version = "0.9.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "91e195e091a93c46f7102ec7818a2aa394e1e1771c3ab4825963fa03e45afb8f"
+dependencies = [
+ "core-foundation-sys",
+ "libc",
+]
+
 [[package]]
 name = "core-foundation"
 version = "0.10.1"
@@ -541,9 +407,9 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "064badf302c3194842cf2c5d61f56cc88e54a759313879cdf03abdd27d0c3b97"
 dependencies = [
  "bitflags 2.11.0",
- "core-foundation",
+ "core-foundation 0.10.1",
  "core-graphics-types",
- "foreign-types",
+ "foreign-types 0.5.0",
  "libc",
 ]
 
@@ -554,7 +420,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "3d44a101f213f6c4cdc1853d4b78aef6db6bdfa3468798cc1d9912f4735013eb"
 dependencies = [
  "bitflags 2.11.0",
- "core-foundation",
+ "core-foundation 0.10.1",
  "libc",
 ]
 
@@ -938,33 +804,6 @@ dependencies = [
  "cfg-if",
 ]
 
-[[package]]
-name = "endi"
-version = "1.1.1"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "66b7e2430c6dff6a955451e2cfc438f09cea1965a9d6f87f7e3b90decc014099"
-
-[[package]]
-name = "enumflags2"
-version = "0.7.12"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "1027f7680c853e056ebcec683615fb6fbbc07dbaa13b4d5d9442b146ded4ecef"
-dependencies = [
- "enumflags2_derive",
- "serde",
-]
-
-[[package]]
-name = "enumflags2_derive"
-version = "0.7.12"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "67c78a4d8fdf9953a5c9d458f9efe940fd97a0cab0941c075a813ac594733827"
-dependencies = [
- "proc-macro2",
- "quote",
- "syn 2.0.117",
-]
-
 [[package]]
 name = "equivalent"
 version = "1.0.2"
@@ -1014,16 +853,6 @@ dependencies = [
  "pin-project-lite",
 ]
 
-[[package]]
-name = "event-listener-strategy"
-version = "0.5.4"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "8be9f3dfaaffdae2972880079a491a1a8bb7cbed0b8dd7a347f668b4150a3b93"
-dependencies = [
- "event-listener",
- "pin-project-lite",
-]
-
 [[package]]
 name = "fastrand"
 version = "2.3.0"
@@ -1094,6 +923,15 @@ version = "0.2.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "77ce24cb58228fbb8aa041425bb1050850ac19177686ea6e0f41a70416f56fdb"
 
+[[package]]
+name = "foreign-types"
+version = "0.3.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f6f339eb8adc052cd2ca78910fda869aefa38d22d5cb648e6485e4d3fc06f3b1"
+dependencies = [
+ "foreign-types-shared 0.1.1",
+]
+
 [[package]]
 name = "foreign-types"
 version = "0.5.0"
@@ -1101,7 +939,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "d737d9aa519fb7b749cbc3b962edcf310a8dd1f4b67c91c4f83975dbdd17d965"
 dependencies = [
  "foreign-types-macros",
- "foreign-types-shared",
+ "foreign-types-shared 0.3.1",
 ]
 
 [[package]]
@@ -1115,6 +953,12 @@ dependencies = [
  "syn 2.0.117",
 ]
 
+[[package]]
+name = "foreign-types-shared"
+version = "0.1.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "00b0228411908ca8685dba7fc2cdd70ec9990a6e753e89b6ac91a84c40fbaf4b"
+
 [[package]]
 name = "foreign-types-shared"
 version = "0.3.1"
@@ -1184,19 +1028,6 @@ version = "0.3.32"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "cecba35d7ad927e23624b22ad55235f2239cfa44fd10428eecbeba6d6a717718"
 
-[[package]]
-name = "futures-lite"
-version = "2.6.1"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "f78e10609fe0e0b3f4157ffab1876319b5b0db102a2c60dc4626306dc46b44ad"
-dependencies = [
- "fastrand",
- "futures-core",
- "futures-io",
- "parking",
- "pin-project-lite",
-]
-
 [[package]]
 name = "futures-macro"
 version = "0.3.32"
@@ -1549,6 +1380,25 @@ dependencies = [
  "syn 2.0.117",
 ]
 
+[[package]]
+name = "h2"
+version = "0.4.13"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2f44da3a8150a6703ed5d34e164b875fd14c2cdab9af1252a9a1020bde2bdc54"
+dependencies = [
+ "atomic-waker",
+ "bytes",
+ "fnv",
+ "futures-core",
+ "futures-sink",
+ "http",
+ "indexmap 2.13.0",
+ "slab",
+ "tokio",
+ "tokio-util",
+ "tracing",
+]
+
 [[package]]
 name = "hashbrown"
 version = "0.12.3"
@@ -1593,12 +1443,6 @@ version = "0.5.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "2304e00983f87ffb38b55b444b5e3b60a884b5d30c0fca7d82fe33449bbe55ea"
 
-[[package]]
-name = "hermit-abi"
-version = "0.5.2"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "fc0fef456e4baa96da950455cd02c081ca953b141298e41db3fc7e36b1da849c"
-
 [[package]]
 name = "hex"
 version = "0.4.3"
@@ -1703,6 +1547,7 @@ dependencies = [
  "bytes",
  "futures-channel",
  "futures-core",
+ "h2",
  "http",
  "http-body",
  "httparse",
@@ -1713,6 +1558,38 @@ dependencies = [
  "want",
 ]
 
+[[package]]
+name = "hyper-rustls"
+version = "0.27.7"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e3c93eb611681b207e1fe55d5a71ecf91572ec8a6705cdb6857f7d8d5242cf58"
+dependencies = [
+ "http",
+ "hyper",
+ "hyper-util",
+ "rustls",
+ "rustls-pki-types",
+ "tokio",
+ "tokio-rustls",
+ "tower-service",
+]
+
+[[package]]
+name = "hyper-tls"
+version = "0.6.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "70206fc6890eaca9fde8a0bf71caa2ddfc9fe045ac9e5c70df101a7dbde866e0"
+dependencies = [
+ "bytes",
+ "http-body-util",
+ "hyper",
+ "hyper-util",
+ "native-tls",
+ "tokio",
+ "tokio-native-tls",
+ "tower-service",
+]
+
 [[package]]
 name = "hyper-util"
 version = "0.1.20"
@@ -1731,9 +1608,11 @@ dependencies = [
  "percent-encoding",
  "pin-project-lite",
  "socket2",
+ "system-configuration",
  "tokio",
  "tower-service",
  "tracing",
+ "windows-registry",
 ]
 
 [[package]]
@@ -2314,6 +2193,23 @@ dependencies = [
  "windows-sys 0.60.2",
 ]
 
+[[package]]
+name = "native-tls"
+version = "0.2.18"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "465500e14ea162429d264d44189adc38b199b62b1c21eea9f69e4b73cb03bbf2"
+dependencies = [
+ "libc",
+ "log",
+ "openssl",
+ "openssl-probe",
+ "openssl-sys",
+ "schannel",
+ "security-framework",
+ "security-framework-sys",
+ "tempfile",
+]
+
 [[package]]
 name = "ndk"
 version = "0.9.0"
@@ -2356,6 +2252,15 @@ version = "0.1.14"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "72ef4a56884ca558e5ddb05a1d1e7e1bfd9a68d9ed024c21704cc98872dae1bb"
 
+[[package]]
+name = "ntapi"
+version = "0.4.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c3b335231dfd352ffb0f8017f3b6027a4917f7df785ea2143d8af2adc66980ae"
+dependencies = [
+ "winapi",
+]
+
 [[package]]
 name = "num-bigint-dig"
 version = "0.8.6"
@@ -2504,6 +2409,16 @@ dependencies = [
  "objc2-core-foundation",
 ]
 
+[[package]]
+name = "objc2-io-kit"
+version = "0.3.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "33fafba39597d6dc1fb709123dfa8289d39406734be322956a69f0931c73bb15"
+dependencies = [
+ "libc",
+ "objc2-core-foundation",
+]
+
 [[package]]
 name = "objc2-io-surface"
 version = "0.3.2"
@@ -2557,13 +2472,16 @@ dependencies = [
 name = "offpage"
 version = "0.1.0"
 dependencies = [
+ "futures-util",
+ "reqwest 0.12.28",
  "serde",
  "serde_json",
+ "sysinfo",
  "tauri",
  "tauri-build",
- "tauri-plugin-opener",
  "tauri-plugin-shell",
  "tauri-plugin-sql",
+ "tokio",
 ]
 
 [[package]]
@@ -2585,21 +2503,55 @@ dependencies = [
 ]
 
 [[package]]
-name = "option-ext"
-version = "0.2.0"
+name = "openssl"
+version = "0.10.76"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "04744f49eae99ab78e0d5c0b603ab218f515ea8cfe5a456d7629ad883a3b6e7d"
+checksum = "951c002c75e16ea2c65b8c7e4d3d51d5530d8dfa7d060b4776828c88cfb18ecf"
+dependencies = [
+ "bitflags 2.11.0",
+ "cfg-if",
+ "foreign-types 0.3.2",
+ "libc",
+ "once_cell",
+ "openssl-macros",
+ "openssl-sys",
+]
 
 [[package]]
-name = "ordered-stream"
-version = "0.2.0"
+name = "openssl-macros"
+version = "0.1.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "9aa2b01e1d916879f73a53d01d1d6cee68adbb31d6d9177a8cfce093cced1d50"
+checksum = "a948666b637a0f465e8564c73e89d4dde00d72d4d473cc972f390fc3dcee7d9c"
 dependencies = [
- "futures-core",
- "pin-project-lite",
+ "proc-macro2",
+ "quote",
+ "syn 2.0.117",
 ]
 
+[[package]]
+name = "openssl-probe"
+version = "0.2.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7c87def4c32ab89d880effc9e097653c8da5d6ef28e6b539d313baaacfbafcbe"
+
+[[package]]
+name = "openssl-sys"
+version = "0.9.112"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "57d55af3b3e226502be1526dfdba67ab0e9c96fc293004e79576b2b9edb0dbdb"
+dependencies = [
+ "cc",
+ "libc",
+ "pkg-config",
+ "vcpkg",
+]
+
+[[package]]
+name = "option-ext"
+version = "0.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "04744f49eae99ab78e0d5c0b603ab218f515ea8cfe5a456d7629ad883a3b6e7d"
+
 [[package]]
 name = "os_pipe"
 version = "1.2.3"
@@ -2872,22 +2824,11 @@ dependencies = [
  "siphasher 1.0.2",
 ]
 
-[[package]]
-name = "pin-project-lite"
-version = "0.2.17"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "a89322df9ebe1c1578d689c92318e070967d1042b512afbe49518723f4e6d5cd"
-
-[[package]]
-name = "piper"
-version = "0.2.5"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "c835479a4443ded371d6c535cbfd8d31ad92c5d23ae9770a61bc155e4992a3c1"
-dependencies = [
- "atomic-waker",
- "fastrand",
- "futures-io",
-]
+[[package]]
+name = "pin-project-lite"
+version = "0.2.17"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a89322df9ebe1c1578d689c92318e070967d1042b512afbe49518723f4e6d5cd"
 
 [[package]]
 name = "pkcs1"
@@ -2948,20 +2889,6 @@ dependencies = [
  "miniz_oxide",
 ]
 
-[[package]]
-name = "polling"
-version = "3.11.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "5d0e4f59085d47d8241c88ead0f274e8a0cb551f3625263c05eb8dd897c34218"
-dependencies = [
- "cfg-if",
- "concurrent-queue",
- "hermit-abi",
- "pin-project-lite",
- "rustix",
- "windows-sys 0.61.2",
-]
-
 [[package]]
 name = "potential_utf"
 version = "0.1.5"
@@ -3265,6 +3192,49 @@ version = "0.8.10"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "dc897dd8d9e8bd1ed8cdad82b5966c3e0ecae09fb1907d58efaa013543185d0a"
 
+[[package]]
+name = "reqwest"
+version = "0.12.28"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "eddd3ca559203180a307f12d114c268abf583f59b03cb906fd0b3ff8646c1147"
+dependencies = [
+ "base64 0.22.1",
+ "bytes",
+ "encoding_rs",
+ "futures-core",
+ "futures-util",
+ "h2",
+ "http",
+ "http-body",
+ "http-body-util",
+ "hyper",
+ "hyper-rustls",
+ "hyper-tls",
+ "hyper-util",
+ "js-sys",
+ "log",
+ "mime",
+ "native-tls",
+ "percent-encoding",
+ "pin-project-lite",
+ "rustls-pki-types",
+ "serde",
+ "serde_json",
+ "serde_urlencoded",
+ "sync_wrapper",
+ "tokio",
+ "tokio-native-tls",
+ "tokio-util",
+ "tower",
+ "tower-http",
+ "tower-service",
+ "url",
+ "wasm-bindgen",
+ "wasm-bindgen-futures",
+ "wasm-streams 0.4.2",
+ "web-sys",
+]
+
 [[package]]
 name = "reqwest"
 version = "0.13.2"
@@ -3295,10 +3265,24 @@ dependencies = [
  "url",
  "wasm-bindgen",
  "wasm-bindgen-futures",
- "wasm-streams",
+ "wasm-streams 0.5.0",
  "web-sys",
 ]
 
+[[package]]
+name = "ring"
+version = "0.17.14"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a4689e6c2294d81e88dc6261c768b63bc4fcdb852be6d1352498b114f61383b7"
+dependencies = [
+ "cc",
+ "cfg-if",
+ "getrandom 0.2.17",
+ "libc",
+ "untrusted",
+ "windows-sys 0.52.0",
+]
+
 [[package]]
 name = "rsa"
 version = "0.9.10"
@@ -3347,6 +3331,39 @@ dependencies = [
  "windows-sys 0.61.2",
 ]
 
+[[package]]
+name = "rustls"
+version = "0.23.37"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "758025cb5fccfd3bc2fd74708fd4682be41d99e5dff73c377c0646c6012c73a4"
+dependencies = [
+ "once_cell",
+ "rustls-pki-types",
+ "rustls-webpki",
+ "subtle",
+ "zeroize",
+]
+
+[[package]]
+name = "rustls-pki-types"
+version = "1.14.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "be040f8b0a225e40375822a563fa9524378b9d63112f53e19ffff34df5d33fdd"
+dependencies = [
+ "zeroize",
+]
+
+[[package]]
+name = "rustls-webpki"
+version = "0.103.10"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "df33b2b81ac578cabaf06b89b0631153a3f416b0a886e8a7a1707fb51abbd1ef"
+dependencies = [
+ "ring",
+ "rustls-pki-types",
+ "untrusted",
+]
+
 [[package]]
 name = "rustversion"
 version = "1.0.22"
@@ -3368,6 +3385,15 @@ dependencies = [
  "winapi-util",
 ]
 
+[[package]]
+name = "schannel"
+version = "0.1.29"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "91c1b7e4904c873ef0710c1f407dde2e6287de2bebc1bbbf7d430bb7cbffd939"
+dependencies = [
+ "windows-sys 0.61.2",
+]
+
 [[package]]
 name = "schemars"
 version = "0.8.22"
@@ -3425,6 +3451,29 @@ version = "1.2.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "94143f37725109f92c262ed2cf5e59bce7498c01bcc1502d7b9afe439a4e9f49"
 
+[[package]]
+name = "security-framework"
+version = "3.7.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b7f4bc775c73d9a02cde8bf7b2ec4c9d12743edf609006c7facc23998404cd1d"
+dependencies = [
+ "bitflags 2.11.0",
+ "core-foundation 0.10.1",
+ "core-foundation-sys",
+ "libc",
+ "security-framework-sys",
+]
+
+[[package]]
+name = "security-framework-sys"
+version = "2.17.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6ce2691df843ecc5d231c0b14ece2acc3efb62c0a398c7e1d875f3983ce020e3"
+dependencies = [
+ "core-foundation-sys",
+ "libc",
+]
+
 [[package]]
 name = "selectors"
 version = "0.24.0"
@@ -4168,6 +4217,41 @@ dependencies = [
  "syn 2.0.117",
 ]
 
+[[package]]
+name = "sysinfo"
+version = "0.35.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3c3ffa3e4ff2b324a57f7aeb3c349656c7b127c3c189520251a648102a92496e"
+dependencies = [
+ "libc",
+ "memchr",
+ "ntapi",
+ "objc2-core-foundation",
+ "objc2-io-kit",
+ "windows",
+]
+
+[[package]]
+name = "system-configuration"
+version = "0.7.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a13f3d0daba03132c0aa9767f98351b3488edc2c100cda2d2ec2b04f3d8d3c8b"
+dependencies = [
+ "bitflags 2.11.0",
+ "core-foundation 0.9.4",
+ "system-configuration-sys",
+]
+
+[[package]]
+name = "system-configuration-sys"
+version = "0.6.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8e1d1b10ced5ca923a1fcb8d03e96b8d3268065d724548c0211415ff6ac6bac4"
+dependencies = [
+ "core-foundation-sys",
+ "libc",
+]
+
 [[package]]
 name = "system-deps"
 version = "6.2.2"
@@ -4189,7 +4273,7 @@ checksum = "9103edf55f2da3c82aea4c7fab7c4241032bfeea0e71fa557d98e00e7ce7cc20"
 dependencies = [
  "bitflags 2.11.0",
  "block2",
- "core-foundation",
+ "core-foundation 0.10.1",
  "core-graphics",
  "crossbeam-channel",
  "dispatch2",
@@ -4266,7 +4350,7 @@ dependencies = [
  "percent-encoding",
  "plist",
  "raw-window-handle",
- "reqwest",
+ "reqwest 0.13.2",
  "serde",
  "serde_json",
  "serde_repr",
@@ -4367,28 +4451,6 @@ dependencies = [
  "walkdir",
 ]
 
-[[package]]
-name = "tauri-plugin-opener"
-version = "2.5.3"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "fc624469b06f59f5a29f874bbc61a2ed737c0f9c23ef09855a292c389c42e83f"
-dependencies = [
- "dunce",
- "glob",
- "objc2-app-kit",
- "objc2-foundation",
- "open",
- "schemars 0.8.22",
- "serde",
- "serde_json",
- "tauri",
- "tauri-plugin",
- "thiserror 2.0.18",
- "url",
- "windows",
- "zbus",
-]
-
 [[package]]
 name = "tauri-plugin-shell"
 version = "2.3.5"
@@ -4674,6 +4736,26 @@ dependencies = [
  "windows-sys 0.61.2",
 ]
 
+[[package]]
+name = "tokio-native-tls"
+version = "0.3.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "bbae76ab933c85776efabc971569dd6119c580d8f5d448769dec1764bf796ef2"
+dependencies = [
+ "native-tls",
+ "tokio",
+]
+
+[[package]]
+name = "tokio-rustls"
+version = "0.26.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1729aa945f29d91ba541258c8df89027d5792d85a8841fb65e8bf0f4ede4ef61"
+dependencies = [
+ "rustls",
+ "tokio",
+]
+
 [[package]]
 name = "tokio-stream"
 version = "0.1.18"
@@ -4920,17 +5002,6 @@ version = "1.19.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "562d481066bde0658276a35467c4af00bdc6ee726305698a55b86e61d7ad82bb"
 
-[[package]]
-name = "uds_windows"
-version = "1.2.1"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "f2f6fb2847f6742cd76af783a2a2c49e9375d0a111c7bef6f71cd9e738c72d6e"
-dependencies = [
- "memoffset",
- "tempfile",
- "windows-sys 0.61.2",
-]
-
 [[package]]
 name = "unic-char-property"
 version = "0.9.0"
@@ -5011,6 +5082,12 @@ version = "0.2.6"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "ebc1c04c71510c7f702b52b7c350734c9ff1295c464a03335b00bb84fc54f853"
 
+[[package]]
+name = "untrusted"
+version = "0.9.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8ecb6da28b8a351d773b68d5825ac39017e680750f980f3a1a85cd8dd28a47c1"
+
 [[package]]
 name = "url"
 version = "2.5.8"
@@ -5230,6 +5307,19 @@ dependencies = [
  "wasmparser",
 ]
 
+[[package]]
+name = "wasm-streams"
+version = "0.4.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "15053d8d85c7eccdbefef60f06769760a563c7f0a9d6902a13d35c7800b0ad65"
+dependencies = [
+ "futures-util",
+ "js-sys",
+ "wasm-bindgen",
+ "wasm-bindgen-futures",
+ "web-sys",
+]
+
 [[package]]
 name = "wasm-streams"
 version = "0.5.0"
@@ -5516,6 +5606,17 @@ dependencies = [
  "windows-link 0.1.3",
 ]
 
+[[package]]
+name = "windows-registry"
+version = "0.6.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "02752bf7fbdcce7f2a27a742f798510f3e5ad88dbe84871e5168e2120c3d5720"
+dependencies = [
+ "windows-link 0.2.1",
+ "windows-result 0.4.1",
+ "windows-strings 0.5.1",
+]
+
 [[package]]
 name = "windows-result"
 version = "0.3.4"
@@ -5570,6 +5671,15 @@ dependencies = [
  "windows-targets 0.48.5",
 ]
 
+[[package]]
+name = "windows-sys"
+version = "0.52.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "282be5f36a8ce781fad8c8ae18fa3f9beff57ec1b52cb3de0789201425d9a33d"
+dependencies = [
+ "windows-targets 0.52.6",
+]
+
 [[package]]
 name = "windows-sys"
 version = "0.59.0"
@@ -5872,9 +5982,6 @@ name = "winnow"
 version = "0.7.15"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "df79d97927682d2fd8adb29682d1140b343be4ac0f08fd68b7765d9c059d3945"
-dependencies = [
- "memchr",
-]
 
 [[package]]
 name = "winnow"
@@ -6077,67 +6184,6 @@ dependencies = [
  "synstructure",
 ]
 
-[[package]]
-name = "zbus"
-version = "5.14.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "ca82f95dbd3943a40a53cfded6c2d0a2ca26192011846a1810c4256ef92c60bc"
-dependencies = [
- "async-broadcast",
- "async-executor",
- "async-io",
- "async-lock",
- "async-process",
- "async-recursion",
- "async-task",
- "async-trait",
- "blocking",
- "enumflags2",
- "event-listener",
- "futures-core",
- "futures-lite",
- "hex",
- "libc",
- "ordered-stream",
- "rustix",
- "serde",
- "serde_repr",
- "tracing",
- "uds_windows",
- "uuid",
- "windows-sys 0.61.2",
- "winnow 0.7.15",
- "zbus_macros",
- "zbus_names",
- "zvariant",
-]
-
-[[package]]
-name = "zbus_macros"
-version = "5.14.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "897e79616e84aac4b2c46e9132a4f63b93105d54fe8c0e8f6bffc21fa8d49222"
-dependencies = [
- "proc-macro-crate 3.5.0",
- "proc-macro2",
- "quote",
- "syn 2.0.117",
- "zbus_names",
- "zvariant",
- "zvariant_utils",
-]
-
-[[package]]
-name = "zbus_names"
-version = "4.3.1"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "ffd8af6d5b78619bab301ff3c560a5bd22426150253db278f164d6cf3b72c50f"
-dependencies = [
- "serde",
- "winnow 0.7.15",
- "zvariant",
-]
-
 [[package]]
 name = "zerocopy"
 version = "0.8.48"
@@ -6223,43 +6269,3 @@ name = "zmij"
 version = "1.0.21"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "b8848ee67ecc8aedbaf3e4122217aff892639231befc6a1b58d29fff4c2cabaa"
-
-[[package]]
-name = "zvariant"
-version = "5.10.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "5708299b21903bbe348e94729f22c49c55d04720a004aa350f1f9c122fd2540b"
-dependencies = [
- "endi",
- "enumflags2",
- "serde",
- "winnow 0.7.15",
- "zvariant_derive",
- "zvariant_utils",
-]
-
-[[package]]
-name = "zvariant_derive"
-version = "5.10.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "5b59b012ebe9c46656f9cc08d8da8b4c726510aef12559da3e5f1bf72780752c"
-dependencies = [
- "proc-macro-crate 3.5.0",
- "proc-macro2",
- "quote",
- "syn 2.0.117",
- "zvariant_utils",
-]
-
-[[package]]
-name = "zvariant_utils"
-version = "3.3.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "f75c23a64ef8f40f13a6989991e643554d9bef1d682a281160cf0c1bc389c5e9"
-dependencies = [
- "proc-macro2",
- "quote",
- "serde",
- "syn 2.0.117",
- "winnow 0.7.15",
-]
diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml
index 3ee597b..8a74be2 100644
--- a/src-tauri/Cargo.toml
+++ b/src-tauri/Cargo.toml
@@ -20,6 +20,11 @@ tauri-build = { version = "2", features = [] }
 [dependencies]
 tauri = { version = "2", features = [] }
 tauri-plugin-sql = { version = "2", features = ["sqlite"] }
+tauri-plugin-shell = "2"
 serde = { version = "1", features = ["derive"] }
 serde_json = "1"
+reqwest = { version = "0.12", features = ["json", "stream"] }
+futures-util = "0.3"
+sysinfo = "0.35"
+tokio = { version = "1", features = ["time"] }
 
diff --git a/src-tauri/capabilities/default.json b/src-tauri/capabilities/default.json
index 181e100..7471bb5 100644
--- a/src-tauri/capabilities/default.json
+++ b/src-tauri/capabilities/default.json
@@ -7,6 +7,8 @@
     "core:default",
     "sql:default",
     "sql:allow-execute",
-    "sql:allow-select"
+    "sql:allow-select",
+    "shell:allow-spawn",
+    "shell:allow-execute"
   ]
 }
diff --git a/src-tauri/src/ai.rs b/src-tauri/src/ai.rs
new file mode 100644
index 0000000..3726e82
--- /dev/null
+++ b/src-tauri/src/ai.rs
@@ -0,0 +1,108 @@
+use futures_util::StreamExt;
+use serde::{Deserialize, Serialize};
+use tauri::{AppHandle, Emitter, Runtime};
+
+use crate::sidecar::SidecarState;
+
+#[derive(Debug, Clone, Serialize)]
+pub struct AiChunk {
+    pub token: String,
+    pub done: bool,
+}
+
+#[derive(Deserialize)]
+struct ChatDelta {
+    content: Option<String>,
+}
+
+#[derive(Deserialize)]
+struct ChatChoice {
+    delta: ChatDelta,
+    finish_reason: Option<String>,
+}
+
+#[derive(Deserialize)]
+struct ChatChunkResponse {
+    choices: Vec<ChatChoice>,
+}
+
+#[tauri::command]
+pub async fn stream_generate<R: Runtime>(
+    app: AppHandle<R>,
+    state: tauri::State<'_, SidecarState>,
+    messages: Vec<serde_json::Value>,
+) -> Result<String, String> {
+    let port = {
+        let port_lock = state.port.lock().map_err(|e| e.to_string())?;
+        *port_lock
+    };
+
+    let url = format!("http://127.0.0.1:{}/v1/chat/completions", port);
+
+    let body = serde_json::json!({
+        "messages": messages,
+        "stream": true,
+    });
+
+    let client = reqwest::Client::new();
+    let response = client
+        .post(&url)
+        .json(&body)
+        .send()
+        .await
+        .map_err(|e| format!("Request failed: {}", e))?;
+
+    if !response.status().is_success() {
+        return Err(format!("Server returned status: {}", response.status()));
+    }
+
+    let mut stream = response.bytes_stream();
+    let mut full_response = String::new();
+    let mut buffer = String::new();
+
+    while let Some(chunk) = stream.next().await {
+        let chunk = chunk.map_err(|e| format!("Stream error: {}", e))?;
+        let text = String::from_utf8_lossy(&chunk);
+        buffer.push_str(&text);
+
+        // Process complete SSE lines
+        while let Some(newline_pos) = buffer.find('\n') {
+            let line = buffer[..newline_pos].trim().to_string();
+            buffer = buffer[newline_pos + 1..].to_string();
+
+            if line.is_empty() || !line.starts_with("data: ") {
+                continue;
+            }
+
+            let data = &line[6..];
+
+            if data == "[DONE]" {
+                let _ = app.emit(
+                    "ai-chunk",
+                    AiChunk {
+                        token: String::new(),
+                        done: true,
+                    },
+                );
+                return Ok(full_response);
+            }
+
+            if let Ok(parsed) = serde_json::from_str::<ChatChunkResponse>(data) {
+                for choice in &parsed.choices {
+                    if let Some(content) = &choice.delta.content {
+                        full_response.push_str(content);
+                        let _ = app.emit(
+                            "ai-chunk",
+                            AiChunk {
+                                token: content.clone(),
+                                done: choice.finish_reason.is_some(),
+                            },
+                        );
+                    }
+                }
+            }
+        }
+    }
+
+    Ok(full_response)
+}
diff --git a/src-tauri/src/hardware.rs b/src-tauri/src/hardware.rs
new file mode 100644
index 0000000..11f2ff0
--- /dev/null
+++ b/src-tauri/src/hardware.rs
@@ -0,0 +1,102 @@
+use serde::Serialize;
+use sysinfo::System;
+use tauri::Runtime;
+
+#[derive(Debug, Clone, Serialize)]
+pub enum GpuType {
+    Metal,
+    Nvidia { vram_gb: f64 },
+    Cpu,
+}
+
+#[derive(Debug, Clone, Serialize)]
+pub enum HardwareTier {
+    Minimum,
+    Recommended,
+    Optimal,
+}
+
+#[derive(Debug, Clone, Serialize)]
+pub struct HardwareInfo {
+    pub total_ram_gb: f64,
+    pub cpu_cores: usize,
+    pub gpu_type: GpuType,
+    pub tier: HardwareTier,
+    pub recommended_quantization: String,
+}
+
+fn detect_gpu() -> GpuType {
+    // Check for Apple Silicon via sysctl
+    #[cfg(target_os = "macos")]
+    {
+        if let Ok(output) = std::process::Command::new("sysctl")
+            .args(["-n", "machdep.cpu.brand_string"])
+            .output()
+        {
+            let brand = String::from_utf8_lossy(&output.stdout);
+            if brand.contains("Apple") {
+                return GpuType::Metal;
+            }
+        }
+    }
+
+    // Check for NVIDIA GPU via nvidia-smi
+    if let Ok(output) = std::process::Command::new("nvidia-smi")
+        .args(["--query-gpu=memory.total", "--format=csv,noheader,nounits"])
+        .output()
+    {
+        if output.status.success() {
+            let vram_str = String::from_utf8_lossy(&output.stdout);
+            if let Ok(vram_mb) = vram_str.trim().parse::<f64>() {
+                return GpuType::Nvidia {
+                    vram_gb: vram_mb / 1024.0,
+                };
+            }
+        }
+    }
+
+    GpuType::Cpu
+}
+
+fn classify_tier(ram_gb: f64, gpu: &GpuType) -> HardwareTier {
+    match gpu {
+        GpuType::Metal if ram_gb >= 32.0 => HardwareTier::Optimal,
+        GpuType::Nvidia { vram_gb } if ram_gb >= 32.0 && *vram_gb >= 8.0 => HardwareTier::Optimal,
+        GpuType::Metal if ram_gb >= 16.0 => HardwareTier::Recommended,
+        GpuType::Nvidia { vram_gb } if *vram_gb >= 6.0 => HardwareTier::Recommended,
+        _ if ram_gb >= 8.0 => HardwareTier::Minimum,
+        _ => HardwareTier::Minimum,
+    }
+}
+
+fn recommended_quantization(tier: &HardwareTier) -> String {
+    match tier {
+        HardwareTier::Optimal => "Q8_0".to_string(),
+        HardwareTier::Recommended => "Q5_K_M".to_string(),
+        HardwareTier::Minimum => "Q4_K_M".to_string(),
+    }
+}
+
+pub fn detect_hardware() -> HardwareInfo {
+    let mut sys = System::new_all();
+    sys.refresh_all();
+
+    let total_ram_gb = sys.total_memory() as f64 / (1024.0 * 1024.0 * 1024.0);
+    let cpu_cores = sys.cpus().len();
+    let gpu_type = detect_gpu();
+    let tier = classify_tier(total_ram_gb, &gpu_type);
+    let quantization = recommended_quantization(&tier);
+
+    HardwareInfo {
+        total_ram_gb,
+        cpu_cores,
+        gpu_type,
+        tier,
+        recommended_quantization: quantization,
+    }
+}
+
+#[tauri::command]
+pub fn get_hardware_info<R: Runtime>(_app: tauri::AppHandle<R>) -> Result<HardwareInfo, String> {
+    Ok(detect_hardware())
+}
diff --git a/src-tauri/src/lib.rs b/src-tauri/src/lib.rs
index 634a820..278d85b 100644
--- a/src-tauri/src/lib.rs
+++ b/src-tauri/src/lib.rs
@@ -1,7 +1,20 @@
+mod ai;
+mod hardware;
+mod sidecar;
+
 #[cfg_attr(mobile, tauri::mobile_entry_point)]
 pub fn run() {
     tauri::Builder::default()
         .plugin(tauri_plugin_sql::Builder::default().build())
+        .plugin(tauri_plugin_shell::init())
+        .manage(sidecar::SidecarState::default())
+        .invoke_handler(tauri::generate_handler![
+            sidecar::start_sidecar,
+            sidecar::stop_sidecar,
+            sidecar::sidecar_status,
+            ai::stream_generate,
+            hardware::get_hardware_info,
+        ])
         .run(tauri::generate_context!())
         .expect("error while running tauri application");
 }
diff --git a/src-tauri/src/sidecar.rs b/src-tauri/src/sidecar.rs
new file mode 100644
index 0000000..99dee15
--- /dev/null
+++ b/src-tauri/src/sidecar.rs
@@ -0,0 +1,146 @@
+use serde::Serialize;
+use std::sync::Mutex;
+use tauri::{AppHandle, Emitter, Runtime};
+use tauri_plugin_shell::process::{CommandChild, CommandEvent};
+use tauri_plugin_shell::ShellExt;
+
+pub struct SidecarState {
+    child: Mutex<Option<CommandChild>>,
+    pub port: Mutex<u16>,
+}
+
+impl Default for SidecarState {
+    fn default() -> Self {
+        Self {
+            child: Mutex::new(None),
+            port: Mutex::new(8080),
+        }
+    }
+}
+
+#[derive(Debug, Clone, Serialize)]
+struct SidecarEvent {
+    message: String,
+    source: String,
+}
+
+#[tauri::command]
+pub async fn start_sidecar<R: Runtime>(
+    app: AppHandle<R>,
+    state: tauri::State<'_, SidecarState>,
+    model_path: String,
+    port: Option<u16>,
+) -> Result<u16, String> {
+    // Check if already running
+    {
+        let child = state.child.lock().map_err(|e| e.to_string())?;
+        if child.is_some() {
+            return Err("Sidecar is already running".to_string());
+        }
+    }
+
+    let port = port.unwrap_or(8080);
+
+    let (mut rx, child) = app
+        .shell()
+        .sidecar("llama-server")
+        .map_err(|e| format!("Failed to create sidecar command: {}", e))?
+        .args([
+            "-m",
+            &model_path,
+            "--port",
+            &port.to_string(),
+            "--host",
+            "127.0.0.1",
+            "-ngl",
+            "99",
+        ])
+        .spawn()
+        .map_err(|e| format!("Failed to spawn sidecar: {}", e))?;
+
+    // Store child process and port
+    {
+        let mut child_lock = state.child.lock().map_err(|e| e.to_string())?;
+        *child_lock = Some(child);
+    }
+    {
+        let mut port_lock = state.port.lock().map_err(|e| e.to_string())?;
+        *port_lock = port;
+    }
+
+    // Monitor stdout/stderr via Tauri events
+    let app_clone = app.clone();
+    tauri::async_runtime::spawn(async move {
+        while let Some(event) = rx.recv().await {
+            match event {
+                CommandEvent::Stdout(line) => {
+                    let msg = String::from_utf8_lossy(&line).to_string();
+                    let _ = app_clone.emit(
+                        "sidecar-output",
+                        SidecarEvent {
+                            message: msg,
+                            source: "stdout".to_string(),
+                        },
+                    );
+                }
+                CommandEvent::Stderr(line) => {
+                    let msg = String::from_utf8_lossy(&line).to_string();
+                    let _ = app_clone.emit(
+                        "sidecar-output",
+                        SidecarEvent {
+                            message: msg,
+                            source: "stderr".to_string(),
+                        },
+                    );
+                }
+                CommandEvent::Terminated(status) => {
+                    let _ = app_clone.emit(
+                        "sidecar-output",
+                        SidecarEvent {
+                            message: format!("Process terminated with status: {:?}", status),
+                            source: "system".to_string(),
+                        },
+                    );
+                    break;
+                }
+                _ => {}
+            }
+        }
+    });
+
+    // Poll /health endpoint for readiness (30s timeout)
+    let health_url = format!("http://127.0.0.1:{}/health", port);
+    let client = reqwest::Client::new();
+    let start = std::time::Instant::now();
+    let timeout = std::time::Duration::from_secs(30);
+
+    loop {
+        if start.elapsed() > timeout {
+            return Err("Sidecar health check timed out after 30 seconds".to_string());
+        }
+
+        match client.get(&health_url).send().await {
+            Ok(resp) if resp.status().is_success() => break,
+            _ => {
+                tokio::time::sleep(std::time::Duration::from_millis(500)).await;
+            }
+        }
+    }
+
+    Ok(port)
+}
+
+#[tauri::command]
+pub fn stop_sidecar(state: tauri::State<'_, SidecarState>) -> Result<(), String> {
+    let mut child = state.child.lock().map_err(|e| e.to_string())?;
+    if let Some(child_process) = child.take() {
+        child_process.kill().map_err(|e| e.to_string())?;
+    }
+    Ok(())
+}
+
+#[tauri::command]
+pub fn sidecar_status(state: tauri::State<'_, SidecarState>) -> Result<bool, String> {
+    let child = state.child.lock().map_err(|e| e.to_string())?;
+    Ok(child.is_some())
+}

From ef4b558dc2cf3a203aeb04edf78b7ea572fc8967 Mon Sep 17 00:00:00 2001
From: Szymon0C <szymon.cichonski30@gmail.com>
Date: Thu, 2 Apr 2026 10:28:09 +0200
Subject: [PATCH 02/18] feat: add system prompts for generation and editing

---
 src/lib/prompts.ts | 78 ++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 78 insertions(+)
 create mode 100644 src/lib/prompts.ts

diff --git a/src/lib/prompts.ts b/src/lib/prompts.ts
new file mode 100644
index 0000000..3571e06
--- /dev/null
+++ b/src/lib/prompts.ts
@@ -0,0 +1,78 @@
+export const SYSTEM_PROMPTS = {
+  generate: `You are a web developer AI. Generate a complete, single-file HTML page with inline CSS and JavaScript.
+
+Rules:
+- Output ONLY valid HTML. No markdown, no explanation, no code fences.
+- Start with <!DOCTYPE html> and end with </html>.
+- All CSS must be in a <style> tag in <head>.
+- All JavaScript must be in a <script> tag before </body>.
+- Use modern CSS (flexbox, grid, custom properties).
+- Make the page fully responsive.
+- Use semantic HTML elements (header, main, section, footer, nav, article).
+- Each major section should be a direct child of <body> or <main>.
+- Include placeholder text that matches the site's purpose.
+- Design should be clean, modern, and professional.`,
+
+  editFull: `You are a web developer AI. You will receive the current HTML of a page and a user request to modify it.
+
+Rules:
+- Output ONLY the complete modified HTML page. No markdown, no explanation, no code fences.
+- Start with <!DOCTYPE html> and end with </html>.
+- Preserve the existing structure and content unless the user specifically asks to change it.
+- Apply the requested changes precisely.
+- Keep all existing styles and scripts unless they conflict with the change.`,
+
+  editSection: `You are a web developer AI. You will receive the HTML of a single section and a user request to modify it.
+
+Rules:
+- Output ONLY the modified HTML section. No markdown, no explanation, no code fences.
+- Output a single HTML element (the section) with its contents.
+- Preserve the existing structure unless the user specifically asks to change it.
+- Keep inline styles consistent with what was provided.
+- Do not add <!DOCTYPE>, <html>, <head>, or <body> tags.`,
+} as const;
+
+export function buildGenerateMessages(
+  userPrompt: string,
+  siteType: string
+): Array<{ role: string; content: string }> {
+  return [
+    {
+      role: 'user',
+      content: `Create a ${siteType} website: ${userPrompt}`,
+    },
+  ];
+}
+
+export function buildEditMessages(
+  currentHtml: string,
+  chatHistory: Array<{ role: string; content: string }>,
+  userPrompt: string
+): Array<{ role: string; content: string }> {
+  const messages: Array<{ role: string; content: string }> = [
+    {
+      role: 'user',
+      content: `Here is the current HTML of the page:\n\n${currentHtml}`,
+    },
+    {
+      role: 'assistant',
+      content: 'I see the current page. What would you like me to change?',
+    },
+  ];
+  const recentHistory = chatHistory.slice(-6);
+  messages.push(...recentHistory);
+  messages.push({ role: 'user', content: userPrompt });
+  return messages;
+}
+
+export function buildSectionEditMessages(
+  sectionHtml: string,
+  userPrompt: string
+): Array<{ role: string; content: string }> {
+  return [
+    {
+      role: 'user',
+      content: `Here is the HTML of the section to modify:\n\n${sectionHtml}\n\nChange request: ${userPrompt}`,
+    },
+  ];
+}

From 40986bc6a8eda47c9957c4ed7d3419fe01d870c8 Mon Sep 17 00:00:00 2001
From: Szymon0C <szymon.cichonski30@gmail.com>
Date: Thu, 2 Apr 2026 10:28:56 +0200
Subject: [PATCH 03/18] feat: add AI and chat stores with streaming hook

---
 src/hooks/useAiStream.ts | 71 ++++++++++++++++++++++++++++++++++++++
 src/stores/aiStore.ts    | 61 +++++++++++++++++++++++++++++++++
 src/stores/chatStore.ts  | 74 ++++++++++++++++++++++++++++++++++++++++
 3 files changed, 206 insertions(+)
 create mode 100644 src/hooks/useAiStream.ts
 create mode 100644 src/stores/aiStore.ts
 create mode 100644 src/stores/chatStore.ts

diff --git a/src/hooks/useAiStream.ts b/src/hooks/useAiStream.ts
new file mode 100644
index 0000000..6b28812
--- /dev/null
+++ b/src/hooks/useAiStream.ts
@@ -0,0 +1,71 @@
+import { useCallback, useEffect, useRef } from 'react';
+import { invoke } from '@tauri-apps/api/core';
+import { listen, UnlistenFn } from '@tauri-apps/api/event';
+import { useChatStore } from '../stores/chatStore';
+import { useAiStore } from '../stores/aiStore';
+import { useProjectStore } from '../stores/projectStore';
+
+interface AiChunk {
+  token: string;
+  done: boolean;
+}
+
+export function useAiStream() {
+  const unlistenRef = useRef<UnlistenFn | null>(null);
+  const sidecarPort = useAiStore((s) => s.sidecarPort);
+  const sidecarStatus = useAiStore((s) => s.sidecarStatus);
+  const { setStreaming, appendToStream, finalizeStream } = useChatStore();
+  const updateProjectHtml = useProjectStore((s) => s.updateProjectHtml);
+
+  useEffect(() => {
+    return () => {
+      unlistenRef.current?.();
+    };
+  }, []);
+
+  const generate = useCallback(
+    async (
+      projectId: string,
+      systemPrompt: string,
+      messages: Array<{ role: string; content: string }>,
+      maxTokens?: number
+    ): Promise<string | null> => {
+      if (sidecarStatus !== 'running') {
+        console.error('Sidecar not running');
+        return null;
+      }
+
+      setStreaming(true);
+
+      unlistenRef.current = await listen<AiChunk>('ai-chunk', (event) => {
+        if (!event.payload.done) {
+          appendToStream(event.payload.token);
+        }
+      });
+
+      try {
+        const fullHtml = await invoke<string>('stream_generate', {
+          port: sidecarPort,
+          systemPrompt,
+          messages,
+          maxTokens: maxTokens ?? null,
+        });
+
+        await finalizeStream(projectId);
+        await updateProjectHtml(projectId, fullHtml);
+
+        return fullHtml;
+      } catch (error) {
+        console.error('AI generation failed:', error);
+        setStreaming(false);
+        return null;
+      } finally {
+        unlistenRef.current?.();
+        unlistenRef.current = null;
+      }
+    },
+    [sidecarPort, sidecarStatus, setStreaming, appendToStream, finalizeStream, updateProjectHtml]
+  );
+
+  return { generate };
+}
diff --git a/src/stores/aiStore.ts b/src/stores/aiStore.ts
new file mode 100644
index 0000000..619e9c6
--- /dev/null
+++ b/src/stores/aiStore.ts
@@ -0,0 +1,61 @@
+import { create } from 'zustand';
+import { invoke } from '@tauri-apps/api/core';
+
+interface HardwareInfo {
+  total_ram_gb: number;
+  cpu_cores: number;
+  gpu_type: { Metal: null } | { Nvidia: { vram_gb: number } } | { Cpu: null };
+  tier: 'Minimum' | 'Recommended' | 'Optimal';
+  recommended_quantization: string;
+}
+
+type SidecarStatus = 'stopped' | 'starting' | 'running' | 'error';
+
+interface AiState {
+  sidecarStatus: SidecarStatus;
+  sidecarPort: number;
+  hardwareInfo: HardwareInfo | null;
+  error: string | null;
+  detectHardware: () => Promise<void>;
+  startSidecar: (modelPath: string) => Promise<void>;
+  stopSidecar: () => Promise<void>;
+}
+
+export const useAiStore = create<AiState>((set) => ({
+  sidecarStatus: 'stopped',
+  sidecarPort: 8080,
+  hardwareInfo: null,
+  error: null,
+
+  detectHardware: async () => {
+    try {
+      const info = await invoke<HardwareInfo>('get_hardware_info');
+      set({ hardwareInfo: info });
+    } catch (error) {
+      console.error('Hardware detection failed:', error);
+    }
+  },
+
+  startSidecar: async (modelPath: string) => {
+    set({ sidecarStatus: 'starting', error: null });
+    try {
+      const port = await invoke<number>('start_sidecar', {
+        modelPath,
+        port: 8080,
+      });
+      set({ sidecarStatus: 'running', sidecarPort: port });
+    } catch (error) {
+      const msg = error instanceof Error ? error.message : String(error);
+      set({ sidecarStatus: 'error', error: msg });
+    }
+  },
+
+  stopSidecar: async () => {
+    try {
+      await invoke('stop_sidecar');
+      set({ sidecarStatus: 'stopped' });
+    } catch (error) {
+      console.error('Failed to stop sidecar:', error);
+    }
+  },
+}));
diff --git a/src/stores/chatStore.ts b/src/stores/chatStore.ts
new file mode 100644
index 0000000..4e7a64c
--- /dev/null
+++ b/src/stores/chatStore.ts
@@ -0,0 +1,74 @@
+import { create } from 'zustand';
+import { getDatabase } from '../db/database';
+import type { ChatMessage } from '../types/project';
+
+interface ChatState {
+  messages: ChatMessage[];
+  streaming: boolean;
+  streamBuffer: string;
+  loadMessages: (projectId: string) => Promise<void>;
+  addMessage: (
+    projectId: string,
+    role: 'user' | 'assistant',
+    content: string,
+    editType?: 'chat' | 'inline' | 'wysiwyg' | null
+  ) => Promise<ChatMessage>;
+  setStreaming: (streaming: boolean) => void;
+  appendToStream: (token: string) => void;
+  finalizeStream: (projectId: string) => Promise<ChatMessage>;
+  clearMessages: () => void;
+}
+
+export const useChatStore = create<ChatState>((set, get) => ({
+  messages: [],
+  streaming: false,
+  streamBuffer: '',
+
+  loadMessages: async (projectId: string) => {
+    const db = await getDatabase();
+    const messages = await db.select<ChatMessage[]>(
+      'SELECT * FROM chat_messages WHERE project_id = ? ORDER BY created_at ASC',
+      [projectId]
+    );
+    set({ messages });
+  },
+
+  addMessage: async (projectId, role, content, editType = null) => {
+    const db = await getDatabase();
+    const id = crypto.randomUUID();
+    const now = new Date().toISOString();
+    await db.execute(
+      'INSERT INTO chat_messages (id, project_id, role, content, edit_type, created_at) VALUES (?, ?, ?, ?, ?, ?)',
+      [id, projectId, role, content, editType, now]
+    );
+    const message: ChatMessage = {
+      id,
+      project_id: projectId,
+      role,
+      content,
+      edit_type: editType,
+      created_at: now,
+    };
+    set((state) => ({ messages: [...state.messages, message] }));
+    return message;
+  },
+
+  setStreaming: (streaming) => {
+    set({ streaming, streamBuffer: streaming ? '' : get().streamBuffer });
+  },
+
+  appendToStream: (token) => {
+    set((state) => ({ streamBuffer: state.streamBuffer + token }));
+  },
+
+  finalizeStream: async (projectId) => {
+    const { streamBuffer, addMessage } = get();
+    const message = await addMessage(projectId, 'assistant', streamBuffer, 'chat');
+    set({ streaming: false, streamBuffer: '' });
+    return message;
+  },
+
+  clearMessages: () => {
+    set({ messages: [], streaming: false, streamBuffer: '' });
+  },
+}));

From a971a5fe9bd68a467134cf70b529603f88bfcf08 Mon Sep 17 00:00:00 2001
From: Szymon0C <szymon.cichonski30@gmail.com>
Date: Thu, 2 Apr 2026 10:29:27 +0200
Subject: [PATCH 04/18] feat: add ChatPanel, ChatMessage, and ChatInput
 components

---
 src/components/chat/ChatInput.tsx   |  52 ++++++++++++++
 src/components/chat/ChatMessage.tsx |  21 ++++++
 src/components/chat/ChatPanel.tsx   | 106 ++++++++++++++++++++++++++++
 3 files changed, 179 insertions(+)
 create mode 100644 src/components/chat/ChatInput.tsx
 create mode 100644 src/components/chat/ChatMessage.tsx
 create mode 100644 src/components/chat/ChatPanel.tsx

diff --git a/src/components/chat/ChatInput.tsx b/src/components/chat/ChatInput.tsx
new file mode 100644
index 0000000..bc4a863
--- /dev/null
+++ b/src/components/chat/ChatInput.tsx
@@ -0,0 +1,52 @@
+import { useState, KeyboardEvent } from 'react';
+
+interface ChatInputProps {
+  onSend: (message: string) => void;
+  disabled?: boolean;
+  placeholder?: string;
+}
+
+export function ChatInput({
+  onSend,
+  disabled = false,
+  placeholder = 'Describe what you want...',
+}: ChatInputProps) {
+  const [value, setValue] = useState('');
+
+  const handleSend = () => {
+    const trimmed = value.trim();
+    if (!trimmed || disabled) return;
+    onSend(trimmed);
+    setValue('');
+  };
+
+  const handleKeyDown = (e: KeyboardEvent) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleSend();
+    }
+  };
+
+  return (
+    <div className="p-2 border-t border-[var(--color-border)]">
+      <div className="flex gap-2">
+        <textarea
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+          onKeyDown={handleKeyDown}
+          disabled={disabled}
+          placeholder={placeholder}
+          rows={1}
+          className="flex-1 bg-[var(--color-bg-elevated)] text-[var(--color-text-primary)] text-xs p-2 rounded-lg resize-none outline-none placeholder:text-[var(--color-text-secondary)] disabled:opacity-50"
+        />
+        <button
+          onClick={handleSend}
+          disabled={disabled || !value.trim()}
+          className="bg-[var(--color-accent)] hover:bg-[var(--color-accent-hover)] disabled:opacity-50 disabled:cursor-not-allowed text-white px-3 rounded-lg text-xs transition-colors"
+        >
+          ↑
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/chat/ChatMessage.tsx b/src/components/chat/ChatMessage.tsx
new file mode 100644
index 0000000..b2a2cdc
--- /dev/null
+++ b/src/components/chat/ChatMessage.tsx
@@ -0,0 +1,21 @@
+interface ChatMessageProps {
+  role: 'user' | 'assistant';
+  content: string;
+}
+
+export function ChatMessage({ role, content }: ChatMessageProps) {
+  const isUser = role === 'user';
+  return (
+    <div className={`flex ${isUser ? 'justify-end' : 'justify-start'}`}>
+      <div
+        className={`max-w-[85%] px-3 py-2 rounded-xl text-xs leading-relaxed ${
+          isUser
+            ? 'bg-[var(--color-accent)] text-white rounded-br-sm'
+            : 'bg-[var(--color-bg-elevated)] text-[var(--color-text-primary)] rounded-bl-sm'
+        }`}
+      >
+        {content}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/chat/ChatPanel.tsx b/src/components/chat/ChatPanel.tsx
new file mode 100644
index 0000000..80be609
--- /dev/null
+++ b/src/components/chat/ChatPanel.tsx
@@ -0,0 +1,106 @@
+import { useEffect, useRef } from 'react';
+import { ChatMessage } from './ChatMessage';
+import { ChatInput } from './ChatInput';
+import { useChatStore } from '../../stores/chatStore';
+import { useAiStore } from '../../stores/aiStore';
+import { useProjectStore } from '../../stores/projectStore';
+import { useAiStream } from '../../hooks/useAiStream';
+import {
+  SYSTEM_PROMPTS,
+  buildGenerateMessages,
+  buildEditMessages,
+} from '../../lib/prompts';
+
+export function ChatPanel() {
+  const currentProject = useProjectStore((s) => s.currentProject);
+  const { messages, streaming, streamBuffer, loadMessages, addMessage } =
+    useChatStore();
+  const sidecarStatus = useAiStore((s) => s.sidecarStatus);
+  const { generate } = useAiStream();
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (currentProject) {
+      loadMessages(currentProject.id);
+    }
+  }, [currentProject?.id, loadMessages]);
+
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [messages, streamBuffer]);
+
+  const handleSend = async (text: string) => {
+    if (!currentProject) return;
+
+    await addMessage(currentProject.id, 'user', text, 'chat');
+
+    const hasHtml = currentProject.html.length > 0;
+
+    if (hasHtml) {
+      const chatHistory = messages
+        .filter((m) => m.edit_type === 'chat')
+        .slice(-6)
+        .map((m) => ({ role: m.role, content: m.content }));
+
+      await generate(
+        currentProject.id,
+        SYSTEM_PROMPTS.editFull,
+        buildEditMessages(currentProject.html, chatHistory, text)
+      );
+    } else {
+      await generate(
+        currentProject.id,
+        SYSTEM_PROMPTS.generate,
+        buildGenerateMessages(text, currentProject.site_type)
+      );
+    }
+  };
+
+  const isReady = sidecarStatus === 'running';
+
+  return (
+    <div className="w-[300px] bg-[var(--color-bg-tertiary)] border-r border-[var(--color-border)] flex flex-col">
+      <div className="p-3 border-b border-[var(--color-border)] text-xs text-[var(--color-text-secondary)] flex items-center justify-between">
+        <span>AI Chat</span>
+        <span
+          className={`w-2 h-2 rounded-full ${
+            sidecarStatus === 'running'
+              ? 'bg-green-500'
+              : sidecarStatus === 'starting'
+                ? 'bg-yellow-500 animate-pulse'
+                : 'bg-red-500'
+          }`}
+          title={`AI: ${sidecarStatus}`}
+        />
+      </div>
+
+      <div className="flex-1 overflow-y-auto p-3 flex flex-col gap-2">
+        {messages.length === 0 && !streaming && (
+          <div className="text-xs text-[var(--color-text-secondary)] text-center mt-8">
+            {isReady
+              ? 'Describe the website you want to create.'
+              : 'Waiting for AI model to load...'}
+          </div>
+        )}
+
+        {messages.map((msg) => (
+          <ChatMessage key={msg.id} role={msg.role} content={msg.content} />
+        ))}
+
+        {streaming && streamBuffer && (
+          <ChatMessage role="assistant" content={streamBuffer} />
+        )}
+
+        <div ref={messagesEndRef} />
+      </div>
+
+      <ChatInput
+        onSend={handleSend}
+        disabled={!isReady || streaming}
+        placeholder={
+          isReady ? 'Describe what you want...' : 'AI model loading...'
+        }
+      />
+    </div>
+  );
+}

From 19da4bc1d9fcd4d1769168a47f1e2831382cdb23 Mon Sep 17 00:00:00 2001
From: Szymon0C <szymon.cichonski30@gmail.com>
Date: Thu, 2 Apr 2026 10:29:55 +0200
Subject: [PATCH 05/18] feat: wire ChatPanel into ProjectPage with basic iframe
 preview

---
 src/pages/ProjectPage.tsx  | 36 ++++++++++++++++--------------------
 src/stores/projectStore.ts | 15 +++++++++++++++
 2 files changed, 31 insertions(+), 20 deletions(-)

diff --git a/src/pages/ProjectPage.tsx b/src/pages/ProjectPage.tsx
index ba2594b..d2ed0f2 100644
--- a/src/pages/ProjectPage.tsx
+++ b/src/pages/ProjectPage.tsx
@@ -1,6 +1,7 @@
 import { useEffect } from 'react';
 import { useParams } from 'react-router-dom';
 import { useProjectStore } from '../stores/projectStore';
+import { ChatPanel } from '../components/chat/ChatPanel';
 
 export function ProjectPage() {
   const { id } = useParams<{ id: string }>();
@@ -15,33 +16,28 @@ export function ProjectPage() {
 
   return (
     <div className="h-full flex">
-      {/* Chat panel — placeholder */}
-      <div className="w-[300px] bg-[var(--color-bg-tertiary)] border-r border-[var(--color-border)] flex flex-col">
-        <div className="p-3 border-b border-[var(--color-border)] text-xs text-[var(--color-text-secondary)]">
-          AI Chat
-        </div>
-        <div className="flex-1 flex items-center justify-center text-[var(--color-text-secondary)] text-sm">
-          Chat coming in Phase 2
-        </div>
-        <div className="p-2 border-t border-[var(--color-border)]">
-          <div className="bg-[var(--color-bg-elevated)] p-2 rounded-lg text-xs text-[var(--color-text-secondary)]">
-            Describe what you want...
-          </div>
-        </div>
-      </div>
+      <ChatPanel />
 
-      {/* Preview area — placeholder */}
       <div className="flex-1 flex flex-col">
         <div className="p-2 bg-[var(--color-bg-tertiary)] border-b border-[var(--color-border)] text-xs text-[var(--color-text-secondary)] flex justify-between">
           <span>Live Preview</span>
           <span>1280 × 720</span>
         </div>
         <div className="flex-1 bg-white flex items-center justify-center">
-          <p className="text-gray-400 text-sm">
-            {currentProject
-              ? 'Preview coming in Phase 3'
-              : 'No project selected'}
-          </p>
+          {currentProject?.html ? (
+            <iframe
+              srcDoc={currentProject.html}
+              className="w-full h-full border-0"
+              title="Preview"
+              sandbox="allow-scripts"
+            />
+          ) : (
+            <p className="text-gray-400 text-sm">
+              {currentProject
+                ? 'Start by describing your website in the chat'
+                : 'No project selected'}
+            </p>
+          )}
         </div>
       </div>
     </div>
diff --git a/src/stores/projectStore.ts b/src/stores/projectStore.ts
index 32fcef6..0ceeaec 100644
--- a/src/stores/projectStore.ts
+++ b/src/stores/projectStore.ts
@@ -12,6 +12,7 @@ interface ProjectState {
   setCurrentProject: (project: Project | null) => void;
   updateProjectHtml: (id: string, html: string) => Promise<void>;
   deleteProject: (id: string) => Promise<void>;
+  createSnapshot: (projectId: string, html: string, description: string) => Promise<void>;
 }
 
 export const useProjectStore = create<ProjectState>((set, _get) => ({
@@ -96,4 +97,18 @@ export const useProjectStore = create<ProjectState>((set, _get) => ({
         state.currentProject?.id === id ? null : state.currentProject,
     }));
   },
+
+  createSnapshot: async (projectId: string, html: string, description: string) => {
+    const db = await getDatabase();
+    const id = crypto.randomUUID();
+    const rows = await db.select<Array<{ max_version: number | null }>>(
+      'SELECT MAX(version) as max_version FROM snapshots WHERE project_id = ?',
+      [projectId]
+    );
+    const nextVersion = (rows[0]?.max_version ?? 0) + 1;
+    await db.execute(
+      'INSERT INTO snapshots (id, project_id, html, description, version) VALUES (?, ?, ?, ?, ?)',
+      [id, projectId, html, description, nextVersion]
+    );
+  },
 }));

From 17d31b5e5b0fba16021662e7b61dca7cfc836ffc Mon Sep 17 00:00:00 2001
From: Szymon0C <szymon.cichonski30@gmail.com>
Date: Thu, 2 Apr 2026 14:00:42 +0200
Subject: [PATCH 06/18] feat: add sidecar setup script and bundle config

Add setup-sidecar.sh to download platform-specific llama-server binary
from llama.cpp releases. Configure Tauri to bundle the sidecar binary
and update .gitignore to exclude downloaded binaries.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .gitignore                |  3 ++
 scripts/setup-sidecar.sh  | 61 +++++++++++++++++++++++++++++++++++++++
 src-tauri/tauri.conf.json |  1 +
 3 files changed, 65 insertions(+)
 create mode 100755 scripts/setup-sidecar.sh

diff --git a/.gitignore b/.gitignore
index af49c79..e5a2bed 100644
--- a/.gitignore
+++ b/.gitignore
@@ -30,3 +30,6 @@ dist-ssr
 
 # OS files
 Thumbs.db
+
+# Sidecar binaries (downloaded, not committed)
+src-tauri/binaries/
diff --git a/scripts/setup-sidecar.sh b/scripts/setup-sidecar.sh
new file mode 100755
index 0000000..a954127
--- /dev/null
+++ b/scripts/setup-sidecar.sh
@@ -0,0 +1,61 @@
+#!/bin/bash
+set -e
+
+LLAMA_VERSION="b5460"
+BINARIES_DIR="src-tauri/binaries"
+mkdir -p "$BINARIES_DIR"
+
+TARGET=$(rustc --print host-triple 2>/dev/null || echo "unknown")
+
+echo "Detected target: $TARGET"
+echo "Setting up llama-server for Offpage..."
+
+case "$TARGET" in
+  aarch64-apple-darwin)
+    ARCHIVE="llama-${LLAMA_VERSION}-bin-macos-arm64.tar.gz"
+    URL="https://github.com/ggml-org/llama.cpp/releases/download/${LLAMA_VERSION}/${ARCHIVE}"
+    ;;
+  x86_64-apple-darwin)
+    ARCHIVE="llama-${LLAMA_VERSION}-bin-macos-x64.tar.gz"
+    URL="https://github.com/ggml-org/llama.cpp/releases/download/${LLAMA_VERSION}/${ARCHIVE}"
+    ;;
+  x86_64-pc-windows-msvc)
+    ARCHIVE="llama-${LLAMA_VERSION}-bin-win-vulkan-x64.zip"
+    URL="https://github.com/ggml-org/llama.cpp/releases/download/${LLAMA_VERSION}/${ARCHIVE}"
+    ;;
+  *)
+    echo "Unsupported platform: $TARGET"
+    exit 1
+    ;;
+esac
+
+DEST="$BINARIES_DIR/llama-server-$TARGET"
+if [ "$TARGET" = "x86_64-pc-windows-msvc" ]; then
+  DEST="${DEST}.exe"
+fi
+
+if [ -f "$DEST" ]; then
+  echo "llama-server already exists at $DEST"
+  exit 0
+fi
+
+echo "Downloading $URL..."
+TMP_DIR=$(mktemp -d)
+curl -L -o "$TMP_DIR/$ARCHIVE" "$URL"
+
+echo "Extracting..."
+case "$ARCHIVE" in
+  *.tar.gz)
+    tar -xzf "$TMP_DIR/$ARCHIVE" -C "$TMP_DIR"
+    cp "$TMP_DIR/build/bin/llama-server" "$DEST"
+    ;;
+  *.zip)
+    unzip -o "$TMP_DIR/$ARCHIVE" -d "$TMP_DIR/extracted"
+    cp "$TMP_DIR/extracted/build/bin/llama-server.exe" "$DEST"
+    ;;
+esac
+
+chmod +x "$DEST"
+rm -rf "$TMP_DIR"
+
+echo "llama-server installed at $DEST"
diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
index 0193272..cd2101a 100644
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -32,6 +32,7 @@
   },
   "bundle": {
     "active": true,
+    "externalBin": ["binaries/llama-server"],
     "targets": "all",
     "icon": [
       "icons/32x32.png",

From 1c2e058524b0b301cdfa3e282071839a040489db Mon Sep 17 00:00:00 2001
From: Szymon0C <szymon.cichonski30@gmail.com>
Date: Thu, 2 Apr 2026 14:04:57 +0200
Subject: [PATCH 07/18] Add Phase 3 Preview & Editing implementation plan

12 tasks covering iframe bridge, helper script injection, section
detection, inline AI editing, WYSIWYG contentEditable, responsive
viewport toggle, and integration wiring.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../2026-04-02-phase3-preview-editing.md      | 1189 +++++++++++++++++
 1 file changed, 1189 insertions(+)
 create mode 100644 docs/superpowers/plans/2026-04-02-phase3-preview-editing.md

diff --git a/docs/superpowers/plans/2026-04-02-phase3-preview-editing.md b/docs/superpowers/plans/2026-04-02-phase3-preview-editing.md
new file mode 100644
index 0000000..8bd86e1
--- /dev/null
+++ b/docs/superpowers/plans/2026-04-02-phase3-preview-editing.md
@@ -0,0 +1,1189 @@
+# Phase 3: Preview & Editing — Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Enable interactive preview with responsive viewport toggle, inline section editing via AI prompts, and direct WYSIWYG text editing — all communicating through a postMessage bridge between the app and an isolated preview iframe.
+
+**Architecture:** The preview iframe loads user HTML with an injected helper script that detects semantic sections, handles click/hover events, and communicates with the parent app via postMessage. The parent maintains an `editorStore` that tracks edit mode (view/inline/wysiwyg), selected section, and viewport size. Inline edits send section HTML to AI for modification; WYSIWYG edits use contentEditable directly and sync changes back via postMessage.
+
+**Tech Stack:** React 19, TypeScript, Zustand, Tauri IPC, postMessage API, contentEditable
+
+---
+
+## File Structure
+
+### New Files
+| File | Responsibility |
+|------|---------------|
+| `src/stores/editorStore.ts` | Editor state: edit mode, selected section, viewport, section list |
+| `src/lib/iframeBridge.ts` | postMessage protocol types, send/receive helpers, helper script injection |
+| `src/lib/helperScript.ts` | Raw JS string injected into iframe — section detection, hover overlays, click handling, WYSIWYG mode, postMessage sender |
+| `src/lib/htmlSections.ts` | Parse full HTML to extract/replace sections by data-offpage-id |
+| `src/components/preview/PreviewFrame.tsx` | iframe wrapper: injects HTML+helper script, listens for postMessage, responsive viewport sizing |
+| `src/components/preview/PreviewToolbar.tsx` | Viewport toggle (desktop/tablet/mobile), edit mode toggle buttons |
+| `src/components/preview/InlineEditBar.tsx` | Floating prompt bar shown when a section is selected in inline mode |
+
+### Modified Files
+| File | Changes |
+|------|---------|
+| `src/pages/ProjectPage.tsx` | Replace raw iframe with PreviewFrame, add PreviewToolbar, wire InlineEditBar |
+| `src/components/chat/ChatPanel.tsx` | Handle inline edit submissions (section prompt → AI → replace section) |
+| `src/hooks/useAiStream.ts` | Add `generateSection` method for inline section edits |
+| `src/components/layout/TopBar.tsx` | Wire responsive viewport toggle and edit mode buttons |
+
+---
+
+### Task 1: Editor Store
+
+**Files:**
+- Create: `src/stores/editorStore.ts`
+
+- [ ] **Step 1: Create the editor store**
+
+```typescript
+// src/stores/editorStore.ts
+import { create } from 'zustand';
+
+export type EditMode = 'view' | 'inline' | 'wysiwyg';
+export type ViewportSize = 'desktop' | 'tablet' | 'mobile';
+
+export interface SelectedSection {
+  id: string;
+  tagName: string;
+  outerHtml: string;
+}
+
+interface EditorState {
+  editMode: EditMode;
+  viewport: ViewportSize;
+  selectedSection: SelectedSection | null;
+  setEditMode: (mode: EditMode) => void;
+  setViewport: (size: ViewportSize) => void;
+  selectSection: (section: SelectedSection | null) => void;
+  clearSelection: () => void;
+}
+
+export const useEditorStore = create<EditorState>((set) => ({
+  editMode: 'view',
+  viewport: 'desktop',
+  selectedSection: null,
+
+  setEditMode: (mode) => set({ editMode: mode, selectedSection: null }),
+  setViewport: (size) => set({ viewport: size }),
+  selectSection: (section) => set({ selectedSection: section }),
+  clearSelection: () => set({ selectedSection: null }),
+}));
+```
+
+- [ ] **Step 2: Verify TypeScript compiles**
+
+Run: `npx tsc --noEmit`
+Expected: No errors
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add src/stores/editorStore.ts
+git commit -m "feat: add editor store for edit mode, viewport, and section selection"
+```
+
+---
+
+### Task 2: Helper Script (injected into iframe)
+
+**Files:**
+- Create: `src/lib/helperScript.ts`
+
+This is the JavaScript that runs inside the preview iframe. It detects semantic sections, adds hover overlays, handles clicks, enables WYSIWYG contentEditable, and communicates with the parent via postMessage.
+
+- [ ] **Step 1: Create the helper script**
+
+```typescript
+// src/lib/helperScript.ts
+
+/**
+ * Returns a string of JavaScript to be injected into the preview iframe.
+ * This script runs in the iframe's context — it has NO access to React or app code.
+ * Communication is exclusively via window.parent.postMessage.
+ */
+export function getHelperScript(): string {
+  return `
+(function() {
+  const SEMANTIC_TAGS = ['HEADER', 'SECTION', 'FOOTER', 'MAIN', 'NAV', 'ARTICLE'];
+  let currentMode = 'view'; // 'view' | 'inline' | 'wysiwyg'
+  let hoveredEl = null;
+  let selectedEl = null;
+  let overlay = null;
+
+  // --- Section Detection ---
+  function detectSections() {
+    const sections = [];
+    const candidates = Array.from(document.body.children);
+    candidates.forEach((el, i) => {
+      if (el.nodeType !== 1) return;
+      if (el.id === '__offpage-overlay') return;
+      const tag = el.tagName;
+      const isSemantic = SEMANTIC_TAGS.includes(tag);
+      const hasContent = el.textContent && el.textContent.trim().length > 20;
+      if (isSemantic || hasContent) {
+        const id = el.getAttribute('data-offpage-id') || 'section-' + i;
+        el.setAttribute('data-offpage-id', id);
+        sections.push({ id: id, tagName: tag, outerHtml: el.outerHTML });
+      }
+    });
+    return sections;
+  }
+
+  // --- Overlay ---
+  function createOverlay() {
+    overlay = document.createElement('div');
+    overlay.id = '__offpage-overlay';
+    overlay.style.cssText = 'position:absolute;pointer-events:none;border:2px solid #6366f1;border-radius:4px;transition:all 0.15s ease;display:none;z-index:99999;';
+    document.body.appendChild(overlay);
+  }
+
+  function positionOverlay(el) {
+    if (!overlay || !el) return;
+    const rect = el.getBoundingClientRect();
+    overlay.style.display = 'block';
+    overlay.style.top = (rect.top + window.scrollY) + 'px';
+    overlay.style.left = (rect.left + window.scrollX) + 'px';
+    overlay.style.width = rect.width + 'px';
+    overlay.style.height = rect.height + 'px';
+  }
+
+  function hideOverlay() {
+    if (overlay) overlay.style.display = 'none';
+  }
+
+  // --- Event Handlers ---
+  function onMouseOver(e) {
+    if (currentMode === 'view') return;
+    const section = findParentSection(e.target);
+    if (section && section !== hoveredEl) {
+      hoveredEl = section;
+      positionOverlay(section);
+      overlay.style.borderColor = currentMode === 'wysiwyg' ? '#f59e0b' : '#6366f1';
+    }
+  }
+
+  function onMouseOut(e) {
+    if (currentMode === 'view') return;
+    const section = findParentSection(e.relatedTarget);
+    if (!section || section !== hoveredEl) {
+      hoveredEl = null;
+      if (!selectedEl) hideOverlay();
+    }
+  }
+
+  function onClick(e) {
+    if (currentMode === 'view') return;
+    e.preventDefault();
+    e.stopPropagation();
+    const section = findParentSection(e.target);
+    if (!section) return;
+
+    selectedEl = section;
+    positionOverlay(section);
+
+    if (currentMode === 'inline') {
+      overlay.style.borderColor = '#6366f1';
+      overlay.style.backgroundColor = 'rgba(99,102,241,0.05)';
+      window.parent.postMessage({
+        type: 'offpage:section-selected',
+        payload: {
+          id: section.getAttribute('data-offpage-id'),
+          tagName: section.tagName,
+          outerHtml: section.outerHTML
+        }
+      }, '*');
+    } else if (currentMode === 'wysiwyg') {
+      overlay.style.borderColor = '#f59e0b';
+      overlay.style.backgroundColor = 'rgba(245,158,11,0.05)';
+      enableContentEditable(section);
+    }
+  }
+
+  // --- WYSIWYG ---
+  function enableContentEditable(section) {
+    // Disable previous
+    if (selectedEl && selectedEl !== section) {
+      disableContentEditable(selectedEl);
+    }
+    section.contentEditable = 'true';
+    section.focus();
+    section.addEventListener('input', onContentEdit);
+    section.addEventListener('blur', onContentBlur);
+  }
+
+  function disableContentEditable(section) {
+    section.contentEditable = 'false';
+    section.removeEventListener('input', onContentEdit);
+    section.removeEventListener('blur', onContentBlur);
+  }
+
+  let editDebounce = null;
+  function onContentEdit(e) {
+    clearTimeout(editDebounce);
+    editDebounce = setTimeout(() => {
+      const section = e.target;
+      window.parent.postMessage({
+        type: 'offpage:wysiwyg-edit',
+        payload: {
+          id: section.getAttribute('data-offpage-id'),
+          outerHtml: section.outerHTML
+        }
+      }, '*');
+    }, 300);
+  }
+
+  function onContentBlur(e) {
+    const section = e.target;
+    disableContentEditable(section);
+    window.parent.postMessage({
+      type: 'offpage:wysiwyg-done',
+      payload: {
+        id: section.getAttribute('data-offpage-id'),
+        outerHtml: section.outerHTML
+      }
+    }, '*');
+    selectedEl = null;
+    hideOverlay();
+  }
+
+  // --- Helpers ---
+  function findParentSection(el) {
+    while (el && el !== document.body) {
+      if (el.hasAttribute && el.hasAttribute('data-offpage-id')) return el;
+      el = el.parentElement;
+    }
+    return null;
+  }
+
+  // --- Message Handler (from parent) ---
+  window.addEventListener('message', (e) => {
+    if (!e.data || !e.data.type) return;
+    switch (e.data.type) {
+      case 'offpage:set-mode':
+        currentMode = e.data.payload.mode;
+        if (currentMode === 'view') {
+          if (selectedEl) disableContentEditable(selectedEl);
+          selectedEl = null;
+          hoveredEl = null;
+          hideOverlay();
+        }
+        break;
+      case 'offpage:replace-section': {
+        const { id, newHtml } = e.data.payload;
+        const el = document.querySelector('[data-offpage-id="' + id + '"]');
+        if (el) {
+          const temp = document.createElement('div');
+          temp.innerHTML = newHtml;
+          const newEl = temp.firstElementChild;
+          if (newEl) {
+            newEl.setAttribute('data-offpage-id', id);
+            el.replaceWith(newEl);
+          }
+        }
+        selectedEl = null;
+        hideOverlay();
+        break;
+      }
+      case 'offpage:get-full-html':
+        window.parent.postMessage({
+          type: 'offpage:full-html',
+          payload: { html: document.documentElement.outerHTML }
+        }, '*');
+        break;
+      case 'offpage:get-sections':
+        window.parent.postMessage({
+          type: 'offpage:sections-list',
+          payload: { sections: detectSections() }
+        }, '*');
+        break;
+    }
+  });
+
+  // --- Init ---
+  createOverlay();
+  document.body.addEventListener('mouseover', onMouseOver);
+  document.body.addEventListener('mouseout', onMouseOut);
+  document.body.addEventListener('click', onClick, true);
+
+  // Notify parent that helper is ready
+  detectSections();
+  window.parent.postMessage({ type: 'offpage:ready' }, '*');
+})();
+`;
+}
+```
+
+- [ ] **Step 2: Verify TypeScript compiles**
+
+Run: `npx tsc --noEmit`
+Expected: No errors
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add src/lib/helperScript.ts
+git commit -m "feat: add iframe helper script for section detection and edit overlays"
+```
+
+---
+
+### Task 3: iframe Bridge (postMessage protocol)
+
+**Files:**
+- Create: `src/lib/iframeBridge.ts`
+
+This module defines the typed postMessage protocol and provides helpers for communicating with the iframe.
+
+- [ ] **Step 1: Create the iframe bridge**
+
+```typescript
+// src/lib/iframeBridge.ts
+import { getHelperScript } from './helperScript';
+import type { EditMode } from '../stores/editorStore';
+
+// Messages FROM iframe TO parent
+export type IframeToParentMessage =
+  | { type: 'offpage:ready' }
+  | { type: 'offpage:section-selected'; payload: { id: string; tagName: string; outerHtml: string } }
+  | { type: 'offpage:wysiwyg-edit'; payload: { id: string; outerHtml: string } }
+  | { type: 'offpage:wysiwyg-done'; payload: { id: string; outerHtml: string } }
+  | { type: 'offpage:full-html'; payload: { html: string } }
+  | { type: 'offpage:sections-list'; payload: { sections: Array<{ id: string; tagName: string; outerHtml: string }> } };
+
+// Messages FROM parent TO iframe
+export type ParentToIframeMessage =
+  | { type: 'offpage:set-mode'; payload: { mode: EditMode } }
+  | { type: 'offpage:replace-section'; payload: { id: string; newHtml: string } }
+  | { type: 'offpage:get-full-html' }
+  | { type: 'offpage:get-sections' };
+
+/**
+ * Send a message to the iframe's contentWindow.
+ */
+export function sendToIframe(iframe: HTMLIFrameElement, message: ParentToIframeMessage): void {
+  iframe.contentWindow?.postMessage(message, '*');
+}
+
+/**
+ * Inject the helper script into HTML before the closing </body> tag.
+ * If no </body> is found, appends to the end.
+ */
+export function injectHelperScript(html: string): string {
+  const script = `<script id="__offpage-helper">${getHelperScript()}<\/script>`;
+  const bodyCloseIndex = html.lastIndexOf('</body>');
+  if (bodyCloseIndex !== -1) {
+    return html.slice(0, bodyCloseIndex) + script + html.slice(bodyCloseIndex);
+  }
+  return html + script;
+}
+```
+
+- [ ] **Step 2: Verify TypeScript compiles**
+
+Run: `npx tsc --noEmit`
+Expected: No errors
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add src/lib/iframeBridge.ts
+git commit -m "feat: add iframe bridge with typed postMessage protocol"
+```
+
+---
+
+### Task 4: HTML Section Parser
+
+**Files:**
+- Create: `src/lib/htmlSections.ts`
+
+Utility to extract a section from full HTML by `data-offpage-id` and replace it. Uses string manipulation (regex) instead of DOM to work on raw HTML strings stored in the database.
+
+- [ ] **Step 1: Create the section parser**
+
+```typescript
+// src/lib/htmlSections.ts
+
+/**
+ * Replace a section in full HTML identified by data-offpage-id.
+ * Uses regex to find the element with the matching attribute and replaces its outerHTML.
+ *
+ * @param fullHtml - The complete page HTML
+ * @param sectionId - The data-offpage-id value to find
+ * @param newSectionHtml - The replacement HTML for that section
+ * @returns Updated full HTML, or original if section not found
+ */
+export function replaceSectionInHtml(
+  fullHtml: string,
+  sectionId: string,
+  newSectionHtml: string
+): string {
+  // Match the opening tag with data-offpage-id="sectionId"
+  const escapedId = sectionId.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  const openTagRegex = new RegExp(
+    `(<(\\w+)[^>]*data-offpage-id\\s*=\\s*"${escapedId}"[^>]*>)`,
+    's'
+  );
+  const match = openTagRegex.exec(fullHtml);
+  if (!match) return fullHtml;
+
+  const tagName = match[2];
+  const startIndex = match.index;
+
+  // Find the matching closing tag
+  // Simple approach: find the corresponding closing tag by counting nesting
+  let depth = 1;
+  let searchFrom = startIndex + match[0].length;
+  const openPattern = new RegExp(`<${tagName}[\\s>]`, 'gi');
+  const closePattern = new RegExp(`</${tagName}>`, 'gi');
+
+  openPattern.lastIndex = searchFrom;
+  closePattern.lastIndex = searchFrom;
+
+  while (depth > 0) {
+    const nextOpen = openPattern.exec(fullHtml);
+    const nextClose = closePattern.exec(fullHtml);
+
+    if (!nextClose) break; // malformed HTML, bail
+
+    if (nextOpen && nextOpen.index < nextClose.index) {
+      depth++;
+      openPattern.lastIndex = nextOpen.index + nextOpen[0].length;
+      closePattern.lastIndex = nextClose.index; // re-check this close
+    } else {
+      depth--;
+      if (depth === 0) {
+        const endIndex = nextClose.index + nextClose[0].length;
+        return fullHtml.slice(0, startIndex) + newSectionHtml + fullHtml.slice(endIndex);
+      }
+    }
+  }
+
+  return fullHtml;
+}
+
+/**
+ * Ensure the replacement HTML has the correct data-offpage-id attribute.
+ */
+export function ensureSectionId(sectionHtml: string, sectionId: string): string {
+  // Check if data-offpage-id already present
+  if (sectionHtml.includes(`data-offpage-id="${sectionId}"`)) {
+    return sectionHtml;
+  }
+  // Add to first opening tag
+  return sectionHtml.replace(/^(<\w+)/, `$1 data-offpage-id="${sectionId}"`);
+}
+```
+
+- [ ] **Step 2: Verify TypeScript compiles**
+
+Run: `npx tsc --noEmit`
+Expected: No errors
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add src/lib/htmlSections.ts
+git commit -m "feat: add HTML section parser for extract/replace by data-offpage-id"
+```
+
+---
+
+### Task 5: PreviewFrame Component
+
+**Files:**
+- Create: `src/components/preview/PreviewFrame.tsx`
+
+The iframe wrapper that injects HTML with the helper script, listens for postMessage events, and dispatches to the editor store.
+
+- [ ] **Step 1: Create the PreviewFrame component**
+
+```tsx
+// src/components/preview/PreviewFrame.tsx
+import { useEffect, useRef, useCallback } from 'react';
+import { useProjectStore } from '../../stores/projectStore';
+import { useEditorStore } from '../../stores/editorStore';
+import { injectHelperScript, sendToIframe } from '../../lib/iframeBridge';
+import { replaceSectionInHtml, ensureSectionId } from '../../lib/htmlSections';
+import type { IframeToParentMessage } from '../../lib/iframeBridge';
+
+const VIEWPORT_WIDTHS = {
+  desktop: '100%',
+  tablet: '768px',
+  mobile: '375px',
+} as const;
+
+export function PreviewFrame() {
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+  const currentProject = useProjectStore((s) => s.currentProject);
+  const updateProjectHtml = useProjectStore((s) => s.updateProjectHtml);
+  const { editMode, viewport, selectSection } = useEditorStore();
+
+  // Send edit mode changes to iframe
+  useEffect(() => {
+    if (iframeRef.current) {
+      sendToIframe(iframeRef.current, {
+        type: 'offpage:set-mode',
+        payload: { mode: editMode },
+      });
+    }
+  }, [editMode]);
+
+  // Handle messages from iframe
+  const handleMessage = useCallback(
+    (event: MessageEvent<IframeToParentMessage>) => {
+      const data = event.data;
+      if (!data || !data.type || !data.type.startsWith('offpage:')) return;
+
+      switch (data.type) {
+        case 'offpage:section-selected':
+          selectSection({
+            id: data.payload.id,
+            tagName: data.payload.tagName,
+            outerHtml: data.payload.outerHtml,
+          });
+          break;
+
+        case 'offpage:wysiwyg-done':
+          if (currentProject) {
+            const newSectionHtml = ensureSectionId(data.payload.outerHtml, data.payload.id);
+            const updatedHtml = replaceSectionInHtml(
+              currentProject.html,
+              data.payload.id,
+              newSectionHtml
+            );
+            updateProjectHtml(currentProject.id, updatedHtml);
+          }
+          break;
+
+        case 'offpage:ready':
+          // iframe loaded, send current mode
+          if (iframeRef.current) {
+            sendToIframe(iframeRef.current, {
+              type: 'offpage:set-mode',
+              payload: { mode: editMode },
+            });
+          }
+          break;
+      }
+    },
+    [editMode, currentProject, selectSection, updateProjectHtml]
+  );
+
+  useEffect(() => {
+    window.addEventListener('message', handleMessage);
+    return () => window.removeEventListener('message', handleMessage);
+  }, [handleMessage]);
+
+  // Prepare HTML with injected helper script
+  const srcDoc = currentProject?.html ? injectHelperScript(currentProject.html) : '';
+
+  const viewportWidth = VIEWPORT_WIDTHS[viewport];
+
+  return (
+    <div className="flex-1 flex items-center justify-center bg-[var(--color-bg-primary)] overflow-auto p-4">
+      {currentProject?.html ? (
+        <iframe
+          ref={iframeRef}
+          srcDoc={srcDoc}
+          title="Preview"
+          sandbox="allow-scripts"
+          className="border border-[var(--color-border)] rounded-lg shadow-lg bg-white transition-all duration-300"
+          style={{
+            width: viewportWidth,
+            maxWidth: '100%',
+            height: '100%',
+          }}
+        />
+      ) : (
+        <p className="text-[var(--color-text-secondary)] text-sm">
+          {currentProject
+            ? 'Start by describing your website in the chat'
+            : 'No project selected'}
+        </p>
+      )}
+    </div>
+  );
+}
+```
+
+- [ ] **Step 2: Verify TypeScript compiles**
+
+Run: `npx tsc --noEmit`
+Expected: No errors
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add src/components/preview/PreviewFrame.tsx
+git commit -m "feat: add PreviewFrame component with iframe bridge and viewport sizing"
+```
+
+---
+
+### Task 6: PreviewToolbar Component
+
+**Files:**
+- Create: `src/components/preview/PreviewToolbar.tsx`
+
+Toolbar above the preview with viewport toggle and edit mode buttons.
+
+- [ ] **Step 1: Create the PreviewToolbar component**
+
+```tsx
+// src/components/preview/PreviewToolbar.tsx
+import { useEditorStore } from '../../stores/editorStore';
+import { useProjectStore } from '../../stores/projectStore';
+import type { EditMode, ViewportSize } from '../../stores/editorStore';
+
+const VIEWPORTS: Array<{ value: ViewportSize; label: string; icon: string }> = [
+  { value: 'desktop', label: 'Desktop', icon: '🖥' },
+  { value: 'tablet', label: 'Tablet', icon: '📱' },
+  { value: 'mobile', label: 'Mobile', icon: '📲' },
+];
+
+const EDIT_MODES: Array<{ value: EditMode; label: string }> = [
+  { value: 'view', label: 'View' },
+  { value: 'inline', label: 'Inline Edit' },
+  { value: 'wysiwyg', label: 'WYSIWYG' },
+];
+
+export function PreviewToolbar() {
+  const { viewport, setViewport, editMode, setEditMode } = useEditorStore();
+  const currentProject = useProjectStore((s) => s.currentProject);
+  const hasHtml = !!currentProject?.html;
+
+  return (
+    <div className="p-2 bg-[var(--color-bg-tertiary)] border-b border-[var(--color-border)] flex items-center justify-between">
+      <div className="flex items-center gap-1">
+        <span className="text-xs text-[var(--color-text-secondary)] mr-2">Preview</span>
+        {VIEWPORTS.map((v) => (
+          <button
+            key={v.value}
+            type="button"
+            onClick={() => setViewport(v.value)}
+            disabled={!hasHtml}
+            className={`px-2 py-1 rounded text-xs transition-colors ${
+              viewport === v.value
+                ? 'bg-[var(--color-accent)] text-white'
+                : 'bg-[var(--color-bg-elevated)] text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)]'
+            } ${!hasHtml ? 'opacity-50 cursor-not-allowed' : ''}`}
+            title={v.label}
+          >
+            {v.icon} {v.label}
+          </button>
+        ))}
+      </div>
+
+      <div className="flex items-center gap-1">
+        {EDIT_MODES.map((m) => (
+          <button
+            key={m.value}
+            type="button"
+            onClick={() => setEditMode(m.value)}
+            disabled={!hasHtml}
+            className={`px-2 py-1 rounded text-xs transition-colors ${
+              editMode === m.value
+                ? 'bg-[var(--color-accent)] text-white'
+                : 'bg-[var(--color-bg-elevated)] text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)]'
+            } ${!hasHtml ? 'opacity-50 cursor-not-allowed' : ''}`}
+          >
+            {m.label}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}
+```
+
+- [ ] **Step 2: Verify TypeScript compiles**
+
+Run: `npx tsc --noEmit`
+Expected: No errors
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add src/components/preview/PreviewToolbar.tsx
+git commit -m "feat: add PreviewToolbar with viewport and edit mode toggles"
+```
+
+---
+
+### Task 7: InlineEditBar Component
+
+**Files:**
+- Create: `src/components/preview/InlineEditBar.tsx`
+
+A floating prompt bar that appears at the bottom of the preview when a section is selected in inline edit mode. User types a prompt, it's sent to AI for that section only.
+
+- [ ] **Step 1: Create the InlineEditBar component**
+
+```tsx
+// src/components/preview/InlineEditBar.tsx
+import { useState } from 'react';
+import { useEditorStore } from '../../stores/editorStore';
+
+interface InlineEditBarProps {
+  onSubmit: (sectionId: string, sectionHtml: string, prompt: string) => void;
+  disabled: boolean;
+}
+
+export function InlineEditBar({ onSubmit, disabled }: InlineEditBarProps) {
+  const [prompt, setPrompt] = useState('');
+  const { selectedSection, editMode, clearSelection } = useEditorStore();
+
+  if (editMode !== 'inline' || !selectedSection) return null;
+
+  const handleSubmit = () => {
+    const text = prompt.trim();
+    if (!text) return;
+    onSubmit(selectedSection.id, selectedSection.outerHtml, text);
+    setPrompt('');
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleSubmit();
+    }
+    if (e.key === 'Escape') {
+      clearSelection();
+    }
+  };
+
+  return (
+    <div className="absolute bottom-4 left-4 right-4 bg-[var(--color-bg-elevated)] border border-[var(--color-border)] rounded-lg shadow-xl p-3 flex gap-2 items-center z-10">
+      <div className="text-xs text-[var(--color-text-secondary)] whitespace-nowrap">
+        Editing: <span className="text-[var(--color-accent)]">&lt;{selectedSection.tagName.toLowerCase()}&gt;</span>
+      </div>
+      <input
+        type="text"
+        value={prompt}
+        onChange={(e) => setPrompt(e.target.value)}
+        onKeyDown={handleKeyDown}
+        disabled={disabled}
+        placeholder="Describe the change for this section..."
+        className="flex-1 bg-[var(--color-bg-primary)] text-[var(--color-text-primary)] text-sm px-3 py-1.5 rounded border border-[var(--color-border)] outline-none focus:border-[var(--color-accent)]"
+        autoFocus
+      />
+      <button
+        type="button"
+        onClick={handleSubmit}
+        disabled={disabled || !prompt.trim()}
+        className="bg-[var(--color-accent)] text-white text-xs px-3 py-1.5 rounded hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed"
+      >
+        Apply
+      </button>
+      <button
+        type="button"
+        onClick={clearSelection}
+        className="text-[var(--color-text-secondary)] text-xs px-2 py-1.5 hover:text-[var(--color-text-primary)]"
+      >
+        Cancel
+      </button>
+    </div>
+  );
+}
+```
+
+- [ ] **Step 2: Verify TypeScript compiles**
+
+Run: `npx tsc --noEmit`
+Expected: No errors
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add src/components/preview/InlineEditBar.tsx
+git commit -m "feat: add InlineEditBar for section-level AI editing prompts"
+```
+
+---
+
+### Task 8: Extend useAiStream for Section Edits
+
+**Files:**
+- Modify: `src/hooks/useAiStream.ts`
+
+Add a `generateSection` method that sends only the section's HTML to the AI with the `editSection` system prompt, then replaces the section in the full page HTML.
+
+- [ ] **Step 1: Update useAiStream hook**
+
+Add `generateSection` to the existing hook. The existing `generate` function stays unchanged.
+
+In `src/hooks/useAiStream.ts`, add these imports at the top:
+
+```typescript
+import { replaceSectionInHtml, ensureSectionId } from '../lib/htmlSections';
+import { SYSTEM_PROMPTS, buildSectionEditMessages } from '../lib/prompts';
+```
+
+Add after the existing `generate` callback (before the `return` statement):
+
+```typescript
+  const generateSection = useCallback(
+    async (
+      projectId: string,
+      sectionId: string,
+      sectionHtml: string,
+      userPrompt: string,
+      fullHtml: string
+    ): Promise<string | null> => {
+      if (sidecarStatus !== 'running') {
+        console.error('Sidecar not running');
+        return null;
+      }
+
+      setStreaming(true);
+
+      unlistenRef.current = await listen<AiChunk>('ai-chunk', (event) => {
+        if (!event.payload.done) {
+          appendToStream(event.payload.token);
+        }
+      });
+
+      try {
+        const newSectionHtml = await invoke<string>('stream_generate', {
+          port: sidecarPort,
+          systemPrompt: SYSTEM_PROMPTS.editSection,
+          messages: buildSectionEditMessages(sectionHtml, userPrompt),
+          maxTokens: null,
+        });
+
+        await finalizeStream(projectId);
+
+        const taggedSection = ensureSectionId(newSectionHtml, sectionId);
+        const updatedHtml = replaceSectionInHtml(fullHtml, sectionId, taggedSection);
+        await updateProjectHtml(projectId, updatedHtml);
+
+        return updatedHtml;
+      } catch (error) {
+        console.error('Section edit failed:', error);
+        setStreaming(false);
+        return null;
+      } finally {
+        unlistenRef.current?.();
+        unlistenRef.current = null;
+      }
+    },
+    [sidecarPort, sidecarStatus, setStreaming, appendToStream, finalizeStream, updateProjectHtml]
+  );
+```
+
+Update the return:
+
+```typescript
+  return { generate, generateSection };
+```
+
+- [ ] **Step 2: Verify TypeScript compiles**
+
+Run: `npx tsc --noEmit`
+Expected: No errors
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add src/hooks/useAiStream.ts
+git commit -m "feat: add generateSection to useAiStream for inline section editing"
+```
+
+---
+
+### Task 9: Wire Everything into ProjectPage
+
+**Files:**
+- Modify: `src/pages/ProjectPage.tsx`
+
+Replace the raw iframe with the new PreviewFrame, PreviewToolbar, and InlineEditBar. Wire inline edit submissions.
+
+- [ ] **Step 1: Rewrite ProjectPage**
+
+Replace the entire content of `src/pages/ProjectPage.tsx`:
+
+```tsx
+// src/pages/ProjectPage.tsx
+import { useEffect, useRef } from 'react';
+import { useParams } from 'react-router-dom';
+import { useProjectStore } from '../stores/projectStore';
+import { useEditorStore } from '../stores/editorStore';
+import { useChatStore } from '../stores/chatStore';
+import { useAiStream } from '../hooks/useAiStream';
+import { ChatPanel } from '../components/chat/ChatPanel';
+import { PreviewFrame } from '../components/preview/PreviewFrame';
+import { PreviewToolbar } from '../components/preview/PreviewToolbar';
+import { InlineEditBar } from '../components/preview/InlineEditBar';
+import { sendToIframe } from '../lib/iframeBridge';
+
+export function ProjectPage() {
+  const { id } = useParams<{ id: string }>();
+  const currentProject = useProjectStore((s) => s.currentProject);
+  const loadProjectById = useProjectStore((s) => s.loadProjectById);
+  const createSnapshot = useProjectStore((s) => s.createSnapshot);
+  const { addMessage } = useChatStore();
+  const streaming = useChatStore((s) => s.streaming);
+  const clearSelection = useEditorStore((s) => s.clearSelection);
+  const { generateSection } = useAiStream();
+  const previewIframeRef = useRef<HTMLIFrameElement>(null);
+
+  useEffect(() => {
+    if (id && !currentProject) {
+      loadProjectById(id);
+    }
+  }, [id, currentProject, loadProjectById]);
+
+  const handleInlineEdit = async (sectionId: string, sectionHtml: string, prompt: string) => {
+    if (!currentProject) return;
+
+    await addMessage(currentProject.id, 'user', prompt, 'inline');
+
+    const result = await generateSection(
+      currentProject.id,
+      sectionId,
+      sectionHtml,
+      prompt,
+      currentProject.html
+    );
+
+    if (result) {
+      await createSnapshot(currentProject.id, result, `Inline edit: ${prompt.slice(0, 50)}`);
+
+      // Update the section in the iframe without full reload
+      if (previewIframeRef.current) {
+        sendToIframe(previewIframeRef.current, {
+          type: 'offpage:replace-section',
+          payload: { id: sectionId, newHtml: sectionHtml },
+        });
+      }
+    }
+
+    clearSelection();
+  };
+
+  return (
+    <div className="h-full flex">
+      <ChatPanel />
+
+      <div className="flex-1 flex flex-col relative">
+        <PreviewToolbar />
+        <PreviewFrame />
+        <InlineEditBar onSubmit={handleInlineEdit} disabled={streaming} />
+      </div>
+    </div>
+  );
+}
+```
+
+- [ ] **Step 2: Verify TypeScript compiles**
+
+Run: `npx tsc --noEmit`
+Expected: No errors
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add src/pages/ProjectPage.tsx
+git commit -m "feat: wire PreviewFrame, toolbar, and InlineEditBar into ProjectPage"
+```
+
+---
+
+### Task 10: Update TopBar with Functional Viewport Toggle
+
+**Files:**
+- Modify: `src/components/layout/TopBar.tsx`
+
+Replace the disabled placeholder buttons with functional viewport toggle that reads from and writes to the editor store.
+
+- [ ] **Step 1: Update TopBar**
+
+Replace the content of `src/components/layout/TopBar.tsx`:
+
+```tsx
+// src/components/layout/TopBar.tsx
+import { useProjectStore } from '../../stores/projectStore';
+import { useEditorStore } from '../../stores/editorStore';
+import type { ViewportSize } from '../../stores/editorStore';
+
+const VIEWPORT_OPTIONS: Array<{ value: ViewportSize; label: string }> = [
+  { value: 'desktop', label: '🖥 Desktop' },
+  { value: 'tablet', label: '📱 Tablet' },
+  { value: 'mobile', label: '📲 Mobile' },
+];
+
+export function TopBar() {
+  const currentProject = useProjectStore((s) => s.currentProject);
+  const { viewport, setViewport } = useEditorStore();
+  const hasHtml = !!currentProject?.html;
+
+  return (
+    <header className="h-10 bg-[var(--color-bg-tertiary)] border-b border-[var(--color-border)] flex items-center justify-between px-4">
+      <div className="flex items-center gap-3">
+        <span className="font-bold text-sm text-white">◈ Offpage</span>
+        {currentProject && (
+          <>
+            <span className="text-[var(--color-text-secondary)] opacity-50">|</span>
+            <span className="text-[var(--color-text-secondary)] text-sm">
+              {currentProject.name}
+            </span>
+          </>
+        )}
+      </div>
+      <div className="flex gap-2">
+        {currentProject && (
+          <>
+            <div className="flex gap-0.5">
+              {VIEWPORT_OPTIONS.map((v) => (
+                <button
+                  key={v.value}
+                  type="button"
+                  onClick={() => setViewport(v.value)}
+                  disabled={!hasHtml}
+                  className={`px-2 py-1 text-xs rounded transition-colors ${
+                    viewport === v.value
+                      ? 'bg-[var(--color-accent)] text-white'
+                      : 'bg-[var(--color-bg-elevated)] text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)]'
+                  } ${!hasHtml ? 'opacity-50 cursor-not-allowed' : ''}`}
+                >
+                  {v.label}
+                </button>
+              ))}
+            </div>
+            <button
+              type="button"
+              disabled
+              aria-disabled="true"
+              className="bg-[var(--color-accent)] px-2.5 py-1 rounded-md text-xs text-white opacity-60 cursor-not-allowed"
+            >
+              Deploy
+            </button>
+          </>
+        )}
+      </div>
+    </header>
+  );
+}
+```
+
+- [ ] **Step 2: Verify TypeScript compiles**
+
+Run: `npx tsc --noEmit`
+Expected: No errors
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add src/components/layout/TopBar.tsx
+git commit -m "feat: wire TopBar viewport toggle to editor store"
+```
+
+---
+
+### Task 11: Update ChatPanel for Edit Type Awareness
+
+**Files:**
+- Modify: `src/components/chat/ChatPanel.tsx`
+
+Update to show inline edit messages differently and add a snapshot after each chat edit.
+
+- [ ] **Step 1: Update ChatPanel**
+
+Add snapshot creation after successful chat edits. In `src/components/chat/ChatPanel.tsx`:
+
+Add import for `createSnapshot`:
+
+```typescript
+const createSnapshot = useProjectStore((s) => s.createSnapshot);
+```
+
+Update `handleSend` to create a snapshot after successful generation:
+
+Replace the existing `handleSend` function:
+
+```typescript
+  const handleSend = async (text: string) => {
+    if (!currentProject) return;
+
+    await addMessage(currentProject.id, 'user', text, 'chat');
+
+    const hasHtml = currentProject.html.length > 0;
+    let result: string | null = null;
+
+    if (hasHtml) {
+      const chatHistory = messages
+        .filter((m) => m.edit_type === 'chat')
+        .slice(-6)
+        .map((m) => ({ role: m.role, content: m.content }));
+
+      result = await generate(
+        currentProject.id,
+        SYSTEM_PROMPTS.editFull,
+        buildEditMessages(currentProject.html, chatHistory, text)
+      );
+    } else {
+      result = await generate(
+        currentProject.id,
+        SYSTEM_PROMPTS.generate,
+        buildGenerateMessages(text, currentProject.site_type)
+      );
+    }
+
+    if (result) {
+      await createSnapshot(
+        currentProject.id,
+        result,
+        hasHtml ? `Chat edit: ${text.slice(0, 50)}` : `Generated: ${text.slice(0, 50)}`
+      );
+    }
+  };
+```
+
+- [ ] **Step 2: Verify TypeScript compiles**
+
+Run: `npx tsc --noEmit`
+Expected: No errors
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add src/components/chat/ChatPanel.tsx
+git commit -m "feat: add snapshot creation after chat edits and generation"
+```
+
+---
+
+### Task 12: Final Integration Verification
+
+**Files:**
+- None (verification only)
+
+- [ ] **Step 1: Run TypeScript compilation**
+
+Run: `npx tsc --noEmit`
+Expected: No errors
+
+- [ ] **Step 2: Run Vite build**
+
+Run: `npm run build`
+Expected: Build succeeds
+
+- [ ] **Step 3: Run Cargo check**
+
+Run: `cd src-tauri && cargo check`
+Expected: No errors (backend unchanged in this phase)
+
+- [ ] **Step 4: Commit any remaining fixes**
+
+If any compilation issues are found, fix them and commit:
+
+```bash
+git add -A
+git commit -m "fix: resolve Phase 3 integration issues"
+```

From 8ca3e3a4e0d64fefd81745e8bb21756acdeacc5d Mon Sep 17 00:00:00 2001
From: Szymon0C <szymon.cichonski30@gmail.com>
Date: Thu, 2 Apr 2026 14:06:09 +0200
Subject: [PATCH 08/18] feat: add editor store for edit mode, viewport, and
 section selection

---
 src/stores/editorStore.ts | 31 +++++++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)
 create mode 100644 src/stores/editorStore.ts

diff --git a/src/stores/editorStore.ts b/src/stores/editorStore.ts
new file mode 100644
index 0000000..4e5b5cd
--- /dev/null
+++ b/src/stores/editorStore.ts
@@ -0,0 +1,31 @@
+import { create } from 'zustand';
+
+export type EditMode = 'view' | 'inline' | 'wysiwyg';
+export type ViewportSize = 'desktop' | 'tablet' | 'mobile';
+
+export interface SelectedSection {
+  id: string;
+  tagName: string;
+  outerHtml: string;
+}
+
+interface EditorState {
+  editMode: EditMode;
+  viewport: ViewportSize;
+  selectedSection: SelectedSection | null;
+  setEditMode: (mode: EditMode) => void;
+  setViewport: (size: ViewportSize) => void;
+  selectSection: (section: SelectedSection | null) => void;
+  clearSelection: () => void;
+}
+
+export const useEditorStore = create<EditorState>((set) => ({
+  editMode: 'view',
+  viewport: 'desktop',
+  selectedSection: null,
+
+  setEditMode: (mode) => set({ editMode: mode, selectedSection: null }),
+  setViewport: (size) => set({ viewport: size }),
+  selectSection: (section) => set({ selectedSection: section }),
+  clearSelection: () => set({ selectedSection: null }),
+}));

From e1b24cb02223c31c07326123e9cc5d5ce5009fe7 Mon Sep 17 00:00:00 2001
From: Szymon0C <szymon.cichonski30@gmail.com>
Date: Thu, 2 Apr 2026 14:07:35 +0200
Subject: [PATCH 09/18] feat: add iframe helper script for section detection
 and edit overlays

---
 src/lib/helperScript.ts | 217 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 217 insertions(+)
 create mode 100644 src/lib/helperScript.ts

diff --git a/src/lib/helperScript.ts b/src/lib/helperScript.ts
new file mode 100644
index 0000000..7cfd064
--- /dev/null
+++ b/src/lib/helperScript.ts
@@ -0,0 +1,217 @@
+// src/lib/helperScript.ts
+
+/**
+ * Returns a string of JavaScript to be injected into the preview iframe.
+ * This script runs in the iframe's context — it has NO access to React or app code.
+ * Communication is exclusively via window.parent.postMessage.
+ */
+export function getHelperScript(): string {
+  return `
+(function() {
+  const SEMANTIC_TAGS = ['HEADER', 'SECTION', 'FOOTER', 'MAIN', 'NAV', 'ARTICLE'];
+  let currentMode = 'view'; // 'view' | 'inline' | 'wysiwyg'
+  let hoveredEl = null;
+  let selectedEl = null;
+  let overlay = null;
+
+  // --- Section Detection ---
+  function detectSections() {
+    const sections = [];
+    const candidates = Array.from(document.body.children);
+    candidates.forEach((el, i) => {
+      if (el.nodeType !== 1) return;
+      if (el.id === '__offpage-overlay') return;
+      const tag = el.tagName;
+      const isSemantic = SEMANTIC_TAGS.includes(tag);
+      const hasContent = el.textContent && el.textContent.trim().length > 20;
+      if (isSemantic || hasContent) {
+        const id = el.getAttribute('data-offpage-id') || 'section-' + i;
+        el.setAttribute('data-offpage-id', id);
+        sections.push({ id: id, tagName: tag, outerHtml: el.outerHTML });
+      }
+    });
+    return sections;
+  }
+
+  // --- Overlay ---
+  function createOverlay() {
+    overlay = document.createElement('div');
+    overlay.id = '__offpage-overlay';
+    overlay.style.cssText = 'position:absolute;pointer-events:none;border:2px solid #6366f1;border-radius:4px;transition:all 0.15s ease;display:none;z-index:99999;';
+    document.body.appendChild(overlay);
+  }
+
+  function positionOverlay(el) {
+    if (!overlay || !el) return;
+    const rect = el.getBoundingClientRect();
+    overlay.style.display = 'block';
+    overlay.style.top = (rect.top + window.scrollY) + 'px';
+    overlay.style.left = (rect.left + window.scrollX) + 'px';
+    overlay.style.width = rect.width + 'px';
+    overlay.style.height = rect.height + 'px';
+  }
+
+  function hideOverlay() {
+    if (overlay) overlay.style.display = 'none';
+  }
+
+  // --- Event Handlers ---
+  function onMouseOver(e) {
+    if (currentMode === 'view') return;
+    const section = findParentSection(e.target);
+    if (section && section !== hoveredEl) {
+      hoveredEl = section;
+      positionOverlay(section);
+      overlay.style.borderColor = currentMode === 'wysiwyg' ? '#f59e0b' : '#6366f1';
+    }
+  }
+
+  function onMouseOut(e) {
+    if (currentMode === 'view') return;
+    const section = findParentSection(e.relatedTarget);
+    if (!section || section !== hoveredEl) {
+      hoveredEl = null;
+      if (!selectedEl) hideOverlay();
+    }
+  }
+
+  function onClick(e) {
+    if (currentMode === 'view') return;
+    e.preventDefault();
+    e.stopPropagation();
+    const section = findParentSection(e.target);
+    if (!section) return;
+
+    selectedEl = section;
+    positionOverlay(section);
+
+    if (currentMode === 'inline') {
+      overlay.style.borderColor = '#6366f1';
+      overlay.style.backgroundColor = 'rgba(99,102,241,0.05)';
+      window.parent.postMessage({
+        type: 'offpage:section-selected',
+        payload: {
+          id: section.getAttribute('data-offpage-id'),
+          tagName: section.tagName,
+          outerHtml: section.outerHTML
+        }
+      }, '*');
+    } else if (currentMode === 'wysiwyg') {
+      overlay.style.borderColor = '#f59e0b';
+      overlay.style.backgroundColor = 'rgba(245,158,11,0.05)';
+      enableContentEditable(section);
+    }
+  }
+
+  // --- WYSIWYG ---
+  function enableContentEditable(section) {
+    // Disable previous
+    if (selectedEl && selectedEl !== section) {
+      disableContentEditable(selectedEl);
+    }
+    section.contentEditable = 'true';
+    section.focus();
+    section.addEventListener('input', onContentEdit);
+    section.addEventListener('blur', onContentBlur);
+  }
+
+  function disableContentEditable(section) {
+    section.contentEditable = 'false';
+    section.removeEventListener('input', onContentEdit);
+    section.removeEventListener('blur', onContentBlur);
+  }
+
+  let editDebounce = null;
+  function onContentEdit(e) {
+    clearTimeout(editDebounce);
+    editDebounce = setTimeout(() => {
+      const section = e.target;
+      window.parent.postMessage({
+        type: 'offpage:wysiwyg-edit',
+        payload: {
+          id: section.getAttribute('data-offpage-id'),
+          outerHtml: section.outerHTML
+        }
+      }, '*');
+    }, 300);
+  }
+
+  function onContentBlur(e) {
+    const section = e.target;
+    disableContentEditable(section);
+    window.parent.postMessage({
+      type: 'offpage:wysiwyg-done',
+      payload: {
+        id: section.getAttribute('data-offpage-id'),
+        outerHtml: section.outerHTML
+      }
+    }, '*');
+    selectedEl = null;
+    hideOverlay();
+  }
+
+  // --- Helpers ---
+  function findParentSection(el) {
+    while (el && el !== document.body) {
+      if (el.hasAttribute && el.hasAttribute('data-offpage-id')) return el;
+      el = el.parentElement;
+    }
+    return null;
+  }
+
+  // --- Message Handler (from parent) ---
+  window.addEventListener('message', (e) => {
+    if (!e.data || !e.data.type) return;
+    switch (e.data.type) {
+      case 'offpage:set-mode':
+        currentMode = e.data.payload.mode;
+        if (currentMode === 'view') {
+          if (selectedEl) disableContentEditable(selectedEl);
+          selectedEl = null;
+          hoveredEl = null;
+          hideOverlay();
+        }
+        break;
+      case 'offpage:replace-section': {
+        const { id, newHtml } = e.data.payload;
+        const el = document.querySelector('[data-offpage-id="' + id + '"]');
+        if (el) {
+          const temp = document.createElement('div');
+          temp.innerHTML = newHtml;
+          const newEl = temp.firstElementChild;
+          if (newEl) {
+            newEl.setAttribute('data-offpage-id', id);
+            el.replaceWith(newEl);
+          }
+        }
+        selectedEl = null;
+        hideOverlay();
+        break;
+      }
+      case 'offpage:get-full-html':
+        window.parent.postMessage({
+          type: 'offpage:full-html',
+          payload: { html: document.documentElement.outerHTML }
+        }, '*');
+        break;
+      case 'offpage:get-sections':
+        window.parent.postMessage({
+          type: 'offpage:sections-list',
+          payload: { sections: detectSections() }
+        }, '*');
+        break;
+    }
+  });
+
+  // --- Init ---
+  createOverlay();
+  document.body.addEventListener('mouseover', onMouseOver);
+  document.body.addEventListener('mouseout', onMouseOut);
+  document.body.addEventListener('click', onClick, true);
+
+  // Notify parent that helper is ready
+  detectSections();
+  window.parent.postMessage({ type: 'offpage:ready' }, '*');
+})();
+`;
+}

From d7f83d5753e4d5ff8b1cca086663f787929c6b60 Mon Sep 17 00:00:00 2001
From: Szymon0C <szymon.cichonski30@gmail.com>
Date: Thu, 2 Apr 2026 14:08:23 +0200
Subject: [PATCH 10/18] feat: add iframe bridge with typed postMessage protocol

---
 src/lib/iframeBridge.ts | 39 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 39 insertions(+)
 create mode 100644 src/lib/iframeBridge.ts

diff --git a/src/lib/iframeBridge.ts b/src/lib/iframeBridge.ts
new file mode 100644
index 0000000..4490d9b
--- /dev/null
+++ b/src/lib/iframeBridge.ts
@@ -0,0 +1,39 @@
+// src/lib/iframeBridge.ts
+import { getHelperScript } from './helperScript';
+import type { EditMode } from '../stores/editorStore';
+
+// Messages FROM iframe TO parent
+export type IframeToParentMessage =
+  | { type: 'offpage:ready' }
+  | { type: 'offpage:section-selected'; payload: { id: string; tagName: string; outerHtml: string } }
+  | { type: 'offpage:wysiwyg-edit'; payload: { id: string; outerHtml: string } }
+  | { type: 'offpage:wysiwyg-done'; payload: { id: string; outerHtml: string } }
+  | { type: 'offpage:full-html'; payload: { html: string } }
+  | { type: 'offpage:sections-list'; payload: { sections: Array<{ id: string; tagName: string; outerHtml: string }> } };
+
+// Messages FROM parent TO iframe
+export type ParentToIframeMessage =
+  | { type: 'offpage:set-mode'; payload: { mode: EditMode } }
+  | { type: 'offpage:replace-section'; payload: { id: string; newHtml: string } }
+  | { type: 'offpage:get-full-html' }
+  | { type: 'offpage:get-sections' };
+
+/**
+ * Send a message to the iframe's contentWindow.
+ */
+export function sendToIframe(iframe: HTMLIFrameElement, message: ParentToIframeMessage): void {
+  iframe.contentWindow?.postMessage(message, '*');
+}
+
+/**
+ * Inject the helper script into HTML before the closing </body> tag.
+ * If no </body> is found, appends to the end.
+ */
+export function injectHelperScript(html: string): string {
+  const script = `<script id="__offpage-helper">${getHelperScript()}<\/script>`;
+  const bodyCloseIndex = html.lastIndexOf('</body>');
+  if (bodyCloseIndex !== -1) {
+    return html.slice(0, bodyCloseIndex) + script + html.slice(bodyCloseIndex);
+  }
+  return html + script;
+}

From 2db411b58066412d553dc7835fde1de3783f1f4c Mon Sep 17 00:00:00 2001
From: Szymon0C <szymon.cichonski30@gmail.com>
Date: Thu, 2 Apr 2026 14:09:22 +0200
Subject: [PATCH 11/18] feat: add HTML section parser for extract/replace by
 data-offpage-id

---
 src/lib/htmlSections.ts | 71 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 71 insertions(+)
 create mode 100644 src/lib/htmlSections.ts

diff --git a/src/lib/htmlSections.ts b/src/lib/htmlSections.ts
new file mode 100644
index 0000000..106b1e5
--- /dev/null
+++ b/src/lib/htmlSections.ts
@@ -0,0 +1,71 @@
+// src/lib/htmlSections.ts
+
+/**
+ * Replace a section in full HTML identified by data-offpage-id.
+ * Uses regex to find the element with the matching attribute and replaces its outerHTML.
+ *
+ * @param fullHtml - The complete page HTML
+ * @param sectionId - The data-offpage-id value to find
+ * @param newSectionHtml - The replacement HTML for that section
+ * @returns Updated full HTML, or original if section not found
+ */
+export function replaceSectionInHtml(
+  fullHtml: string,
+  sectionId: string,
+  newSectionHtml: string
+): string {
+  // Match the opening tag with data-offpage-id="sectionId"
+  const escapedId = sectionId.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  const openTagRegex = new RegExp(
+    `(<(\\w+)[^>]*data-offpage-id\\s*=\\s*"${escapedId}"[^>]*>)`,
+    's'
+  );
+  const match = openTagRegex.exec(fullHtml);
+  if (!match) return fullHtml;
+
+  const tagName = match[2];
+  const startIndex = match.index;
+
+  // Find the matching closing tag
+  // Simple approach: find the corresponding closing tag by counting nesting
+  let depth = 1;
+  let searchFrom = startIndex + match[0].length;
+  const openPattern = new RegExp(`<${tagName}[\\s>]`, 'gi');
+  const closePattern = new RegExp(`</${tagName}>`, 'gi');
+
+  openPattern.lastIndex = searchFrom;
+  closePattern.lastIndex = searchFrom;
+
+  while (depth > 0) {
+    const nextOpen = openPattern.exec(fullHtml);
+    const nextClose = closePattern.exec(fullHtml);
+
+    if (!nextClose) break; // malformed HTML, bail
+
+    if (nextOpen && nextOpen.index < nextClose.index) {
+      depth++;
+      openPattern.lastIndex = nextOpen.index + nextOpen[0].length;
+      closePattern.lastIndex = nextClose.index; // re-check this close
+    } else {
+      depth--;
+      if (depth === 0) {
+        const endIndex = nextClose.index + nextClose[0].length;
+        return fullHtml.slice(0, startIndex) + newSectionHtml + fullHtml.slice(endIndex);
+      }
+    }
+  }
+
+  return fullHtml;
+}
+
+/**
+ * Ensure the replacement HTML has the correct data-offpage-id attribute.
+ */
+export function ensureSectionId(sectionHtml: string, sectionId: string): string {
+  // Check if data-offpage-id already present
+  if (sectionHtml.includes(`data-offpage-id="${sectionId}"`)) {
+    return sectionHtml;
+  }
+  // Add to first opening tag
+  return sectionHtml.replace(/^(<\w+)/, `$1 data-offpage-id="${sectionId}"`);
+}

From 401999c7c68cf809118311a342b4b255c74305db Mon Sep 17 00:00:00 2001
From: Szymon0C <szymon.cichonski30@gmail.com>
Date: Thu, 2 Apr 2026 14:10:50 +0200
Subject: [PATCH 12/18] feat: add PreviewFrame component with iframe bridge and
 viewport sizing

---
 src/components/preview/PreviewFrame.tsx | 105 ++++++++++++++++++++++++
 1 file changed, 105 insertions(+)
 create mode 100644 src/components/preview/PreviewFrame.tsx

diff --git a/src/components/preview/PreviewFrame.tsx b/src/components/preview/PreviewFrame.tsx
new file mode 100644
index 0000000..4303a97
--- /dev/null
+++ b/src/components/preview/PreviewFrame.tsx
@@ -0,0 +1,105 @@
+import { useEffect, useRef, useCallback } from 'react';
+import { useProjectStore } from '../../stores/projectStore';
+import { useEditorStore } from '../../stores/editorStore';
+import { injectHelperScript, sendToIframe } from '../../lib/iframeBridge';
+import { replaceSectionInHtml, ensureSectionId } from '../../lib/htmlSections';
+import type { IframeToParentMessage } from '../../lib/iframeBridge';
+
+const VIEWPORT_WIDTHS = {
+  desktop: '100%',
+  tablet: '768px',
+  mobile: '375px',
+} as const;
+
+export function PreviewFrame() {
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+  const currentProject = useProjectStore((s) => s.currentProject);
+  const updateProjectHtml = useProjectStore((s) => s.updateProjectHtml);
+  const { editMode, viewport, selectSection } = useEditorStore();
+
+  // Send edit mode changes to iframe
+  useEffect(() => {
+    if (iframeRef.current) {
+      sendToIframe(iframeRef.current, {
+        type: 'offpage:set-mode',
+        payload: { mode: editMode },
+      });
+    }
+  }, [editMode]);
+
+  // Handle messages from iframe
+  const handleMessage = useCallback(
+    (event: MessageEvent<IframeToParentMessage>) => {
+      const data = event.data;
+      if (!data || !data.type || !data.type.startsWith('offpage:')) return;
+
+      switch (data.type) {
+        case 'offpage:section-selected':
+          selectSection({
+            id: data.payload.id,
+            tagName: data.payload.tagName,
+            outerHtml: data.payload.outerHtml,
+          });
+          break;
+
+        case 'offpage:wysiwyg-done':
+          if (currentProject) {
+            const newSectionHtml = ensureSectionId(data.payload.outerHtml, data.payload.id);
+            const updatedHtml = replaceSectionInHtml(
+              currentProject.html,
+              data.payload.id,
+              newSectionHtml
+            );
+            updateProjectHtml(currentProject.id, updatedHtml);
+          }
+          break;
+
+        case 'offpage:ready':
+          // iframe loaded, send current mode
+          if (iframeRef.current) {
+            sendToIframe(iframeRef.current, {
+              type: 'offpage:set-mode',
+              payload: { mode: editMode },
+            });
+          }
+          break;
+      }
+    },
+    [editMode, currentProject, selectSection, updateProjectHtml]
+  );
+
+  useEffect(() => {
+    window.addEventListener('message', handleMessage);
+    return () => window.removeEventListener('message', handleMessage);
+  }, [handleMessage]);
+
+  // Prepare HTML with injected helper script
+  const srcDoc = currentProject?.html ? injectHelperScript(currentProject.html) : '';
+
+  const viewportWidth = VIEWPORT_WIDTHS[viewport];
+
+  return (
+    <div className="flex-1 flex items-center justify-center bg-[var(--color-bg-primary)] overflow-auto p-4">
+      {currentProject?.html ? (
+        <iframe
+          ref={iframeRef}
+          srcDoc={srcDoc}
+          title="Preview"
+          sandbox="allow-scripts"
+          className="border border-[var(--color-border)] rounded-lg shadow-lg bg-white transition-all duration-300"
+          style={{
+            width: viewportWidth,
+            maxWidth: '100%',
+            height: '100%',
+          }}
+        />
+      ) : (
+        <p className="text-[var(--color-text-secondary)] text-sm">
+          {currentProject
+            ? 'Start by describing your website in the chat'
+            : 'No project selected'}
+        </p>
+      )}
+    </div>
+  );
+}

From 956fe845ec926eb83add89be90192197c739041d Mon Sep 17 00:00:00 2001
From: Szymon0C <szymon.cichonski30@gmail.com>
Date: Thu, 2 Apr 2026 14:11:07 +0200
Subject: [PATCH 13/18] feat: add PreviewToolbar with viewport and edit mode
 toggles

---
 src/components/preview/PreviewToolbar.tsx | 63 +++++++++++++++++++++++
 1 file changed, 63 insertions(+)
 create mode 100644 src/components/preview/PreviewToolbar.tsx

diff --git a/src/components/preview/PreviewToolbar.tsx b/src/components/preview/PreviewToolbar.tsx
new file mode 100644
index 0000000..3670b66
--- /dev/null
+++ b/src/components/preview/PreviewToolbar.tsx
@@ -0,0 +1,63 @@
+import { useEditorStore } from '../../stores/editorStore';
+import { useProjectStore } from '../../stores/projectStore';
+import type { EditMode, ViewportSize } from '../../stores/editorStore';
+
+const VIEWPORTS: Array<{ value: ViewportSize; label: string; icon: string }> = [
+  { value: 'desktop', label: 'Desktop', icon: '🖥' },
+  { value: 'tablet', label: 'Tablet', icon: '📱' },
+  { value: 'mobile', label: 'Mobile', icon: '📲' },
+];
+
+const EDIT_MODES: Array<{ value: EditMode; label: string }> = [
+  { value: 'view', label: 'View' },
+  { value: 'inline', label: 'Inline Edit' },
+  { value: 'wysiwyg', label: 'WYSIWYG' },
+];
+
+export function PreviewToolbar() {
+  const { viewport, setViewport, editMode, setEditMode } = useEditorStore();
+  const currentProject = useProjectStore((s) => s.currentProject);
+  const hasHtml = !!currentProject?.html;
+
+  return (
+    <div className="p-2 bg-[var(--color-bg-tertiary)] border-b border-[var(--color-border)] flex items-center justify-between">
+      <div className="flex items-center gap-1">
+        <span className="text-xs text-[var(--color-text-secondary)] mr-2">Preview</span>
+        {VIEWPORTS.map((v) => (
+          <button
+            key={v.value}
+            type="button"
+            onClick={() => setViewport(v.value)}
+            disabled={!hasHtml}
+            className={`px-2 py-1 rounded text-xs transition-colors ${
+              viewport === v.value
+                ? 'bg-[var(--color-accent)] text-white'
+                : 'bg-[var(--color-bg-elevated)] text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)]'
+            } ${!hasHtml ? 'opacity-50 cursor-not-allowed' : ''}`}
+            title={v.label}
+          >
+            {v.icon} {v.label}
+          </button>
+        ))}
+      </div>
+
+      <div className="flex items-center gap-1">
+        {EDIT_MODES.map((m) => (
+          <button
+            key={m.value}
+            type="button"
+            onClick={() => setEditMode(m.value)}
+            disabled={!hasHtml}
+            className={`px-2 py-1 rounded text-xs transition-colors ${
+              editMode === m.value
+                ? 'bg-[var(--color-accent)] text-white'
+                : 'bg-[var(--color-bg-elevated)] text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)]'
+            } ${!hasHtml ? 'opacity-50 cursor-not-allowed' : ''}`}
+          >
+            {m.label}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}

From b5b3208722ce36bf5c34b4abed7d4a3539e65502 Mon Sep 17 00:00:00 2001
From: Szymon0C <szymon.cichonski30@gmail.com>
Date: Thu, 2 Apr 2026 14:11:26 +0200
Subject: [PATCH 14/18] feat: add InlineEditBar for section-level AI editing
 prompts

---
 src/components/preview/InlineEditBar.tsx | 64 ++++++++++++++++++++++++
 1 file changed, 64 insertions(+)
 create mode 100644 src/components/preview/InlineEditBar.tsx

diff --git a/src/components/preview/InlineEditBar.tsx b/src/components/preview/InlineEditBar.tsx
new file mode 100644
index 0000000..55a9748
--- /dev/null
+++ b/src/components/preview/InlineEditBar.tsx
@@ -0,0 +1,64 @@
+import { useState } from 'react';
+import { useEditorStore } from '../../stores/editorStore';
+
+interface InlineEditBarProps {
+  onSubmit: (sectionId: string, sectionHtml: string, prompt: string) => void;
+  disabled: boolean;
+}
+
+export function InlineEditBar({ onSubmit, disabled }: InlineEditBarProps) {
+  const [prompt, setPrompt] = useState('');
+  const { selectedSection, editMode, clearSelection } = useEditorStore();
+
+  if (editMode !== 'inline' || !selectedSection) return null;
+
+  const handleSubmit = () => {
+    const text = prompt.trim();
+    if (!text) return;
+    onSubmit(selectedSection.id, selectedSection.outerHtml, text);
+    setPrompt('');
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleSubmit();
+    }
+    if (e.key === 'Escape') {
+      clearSelection();
+    }
+  };
+
+  return (
+    <div className="absolute bottom-4 left-4 right-4 bg-[var(--color-bg-elevated)] border border-[var(--color-border)] rounded-lg shadow-xl p-3 flex gap-2 items-center z-10">
+      <div className="text-xs text-[var(--color-text-secondary)] whitespace-nowrap">
+        Editing: <span className="text-[var(--color-accent)]">&lt;{selectedSection.tagName.toLowerCase()}&gt;</span>
+      </div>
+      <input
+        type="text"
+        value={prompt}
+        onChange={(e) => setPrompt(e.target.value)}
+        onKeyDown={handleKeyDown}
+        disabled={disabled}
+        placeholder="Describe the change for this section..."
+        className="flex-1 bg-[var(--color-bg-primary)] text-[var(--color-text-primary)] text-sm px-3 py-1.5 rounded border border-[var(--color-border)] outline-none focus:border-[var(--color-accent)]"
+        autoFocus
+      />
+      <button
+        type="button"
+        onClick={handleSubmit}
+        disabled={disabled || !prompt.trim()}
+        className="bg-[var(--color-accent)] text-white text-xs px-3 py-1.5 rounded hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed"
+      >
+        Apply
+      </button>
+      <button
+        type="button"
+        onClick={clearSelection}
+        className="text-[var(--color-text-secondary)] text-xs px-2 py-1.5 hover:text-[var(--color-text-primary)]"
+      >
+        Cancel
+      </button>
+    </div>
+  );
+}

From 08d1965a5e7d2997cc6da4bf6a3e2d000466a71a Mon Sep 17 00:00:00 2001
From: Szymon0C <szymon.cichonski30@gmail.com>
Date: Thu, 2 Apr 2026 14:12:49 +0200
Subject: [PATCH 15/18] feat: add generateSection to useAiStream for inline
 section editing

---
 CLAUDE.md                | 11 +++++++++
 src/hooks/useAiStream.ts | 52 +++++++++++++++++++++++++++++++++++++++-
 2 files changed, 62 insertions(+), 1 deletion(-)

diff --git a/CLAUDE.md b/CLAUDE.md
index b3ccd05..d6f4f98 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -13,3 +13,14 @@ This is a new project — architecture decisions are still being made. Key const
 - Cross-platform desktop app (Windows + macOS)
 - AI inference runs locally on-device
 - Companion marketing website for downloads
+
+## Approach
+
+- Think before acting. Read existing files before writing code.
+- Be concise in output but thorough in reasoning.
+- Prefer editing over rewriting whole files.
+- Do not re-read files you have already read unless the file may have changed.
+- Test your code before declaring done.
+- No sycophantic openers or closing fluff.
+- Keep solutions simple and direct.
+- User instructions always override this file.
diff --git a/src/hooks/useAiStream.ts b/src/hooks/useAiStream.ts
index 6b28812..ec214b5 100644
--- a/src/hooks/useAiStream.ts
+++ b/src/hooks/useAiStream.ts
@@ -4,6 +4,8 @@ import { listen, UnlistenFn } from '@tauri-apps/api/event';
 import { useChatStore } from '../stores/chatStore';
 import { useAiStore } from '../stores/aiStore';
 import { useProjectStore } from '../stores/projectStore';
+import { replaceSectionInHtml, ensureSectionId } from '../lib/htmlSections';
+import { SYSTEM_PROMPTS, buildSectionEditMessages } from '../lib/prompts';
 
 interface AiChunk {
   token: string;
@@ -67,5 +69,53 @@ export function useAiStream() {
     [sidecarPort, sidecarStatus, setStreaming, appendToStream, finalizeStream, updateProjectHtml]
   );
 
-  return { generate };
+  const generateSection = useCallback(
+    async (
+      projectId: string,
+      sectionId: string,
+      sectionHtml: string,
+      userPrompt: string,
+      fullHtml: string
+    ): Promise<string | null> => {
+      if (sidecarStatus !== 'running') {
+        console.error('Sidecar not running');
+        return null;
+      }
+
+      setStreaming(true);
+
+      unlistenRef.current = await listen<AiChunk>('ai-chunk', (event) => {
+        if (!event.payload.done) {
+          appendToStream(event.payload.token);
+        }
+      });
+
+      try {
+        const newSectionHtml = await invoke<string>('stream_generate', {
+          port: sidecarPort,
+          systemPrompt: SYSTEM_PROMPTS.editSection,
+          messages: buildSectionEditMessages(sectionHtml, userPrompt),
+          maxTokens: null,
+        });
+
+        await finalizeStream(projectId);
+
+        const taggedSection = ensureSectionId(newSectionHtml, sectionId);
+        const updatedHtml = replaceSectionInHtml(fullHtml, sectionId, taggedSection);
+        await updateProjectHtml(projectId, updatedHtml);
+
+        return updatedHtml;
+      } catch (error) {
+        console.error('Section edit failed:', error);
+        setStreaming(false);
+        return null;
+      } finally {
+        unlistenRef.current?.();
+        unlistenRef.current = null;
+      }
+    },
+    [sidecarPort, sidecarStatus, setStreaming, appendToStream, finalizeStream, updateProjectHtml]
+  );
+
+  return { generate, generateSection };
 }

From a20334fa45f74279d5f65e4daf177c4818c06d50 Mon Sep 17 00:00:00 2001
From: Szymon0C <szymon.cichonski30@gmail.com>
Date: Thu, 2 Apr 2026 14:13:06 +0200
Subject: [PATCH 16/18] feat: wire PreviewFrame, toolbar, and InlineEditBar
 into ProjectPage

---
 src/pages/ProjectPage.tsx | 56 ++++++++++++++++++++++++---------------
 1 file changed, 35 insertions(+), 21 deletions(-)

diff --git a/src/pages/ProjectPage.tsx b/src/pages/ProjectPage.tsx
index d2ed0f2..557132f 100644
--- a/src/pages/ProjectPage.tsx
+++ b/src/pages/ProjectPage.tsx
@@ -1,12 +1,23 @@
 import { useEffect } from 'react';
 import { useParams } from 'react-router-dom';
 import { useProjectStore } from '../stores/projectStore';
+import { useEditorStore } from '../stores/editorStore';
+import { useChatStore } from '../stores/chatStore';
+import { useAiStream } from '../hooks/useAiStream';
 import { ChatPanel } from '../components/chat/ChatPanel';
+import { PreviewFrame } from '../components/preview/PreviewFrame';
+import { PreviewToolbar } from '../components/preview/PreviewToolbar';
+import { InlineEditBar } from '../components/preview/InlineEditBar';
 
 export function ProjectPage() {
   const { id } = useParams<{ id: string }>();
   const currentProject = useProjectStore((s) => s.currentProject);
   const loadProjectById = useProjectStore((s) => s.loadProjectById);
+  const createSnapshot = useProjectStore((s) => s.createSnapshot);
+  const { addMessage } = useChatStore();
+  const streaming = useChatStore((s) => s.streaming);
+  const clearSelection = useEditorStore((s) => s.clearSelection);
+  const { generateSection } = useAiStream();
 
   useEffect(() => {
     if (id && !currentProject) {
@@ -14,31 +25,34 @@ export function ProjectPage() {
     }
   }, [id, currentProject, loadProjectById]);
 
+  const handleInlineEdit = async (sectionId: string, sectionHtml: string, prompt: string) => {
+    if (!currentProject) return;
+
+    await addMessage(currentProject.id, 'user', prompt, 'inline');
+
+    const result = await generateSection(
+      currentProject.id,
+      sectionId,
+      sectionHtml,
+      prompt,
+      currentProject.html
+    );
+
+    if (result) {
+      await createSnapshot(currentProject.id, result, `Inline edit: ${prompt.slice(0, 50)}`);
+    }
+
+    clearSelection();
+  };
+
   return (
     <div className="h-full flex">
       <ChatPanel />
 
-      <div className="flex-1 flex flex-col">
-        <div className="p-2 bg-[var(--color-bg-tertiary)] border-b border-[var(--color-border)] text-xs text-[var(--color-text-secondary)] flex justify-between">
-          <span>Live Preview</span>
-          <span>1280 × 720</span>
-        </div>
-        <div className="flex-1 bg-white flex items-center justify-center">
-          {currentProject?.html ? (
-            <iframe
-              srcDoc={currentProject.html}
-              className="w-full h-full border-0"
-              title="Preview"
-              sandbox="allow-scripts"
-            />
-          ) : (
-            <p className="text-gray-400 text-sm">
-              {currentProject
-                ? 'Start by describing your website in the chat'
-                : 'No project selected'}
-            </p>
-          )}
-        </div>
+      <div className="flex-1 flex flex-col relative">
+        <PreviewToolbar />
+        <PreviewFrame />
+        <InlineEditBar onSubmit={handleInlineEdit} disabled={streaming} />
       </div>
     </div>
   );

From 1a8c04c14060de25a37bc9afe73d1a4e0934bcc2 Mon Sep 17 00:00:00 2001
From: Szymon0C <szymon.cichonski30@gmail.com>
Date: Thu, 2 Apr 2026 19:10:24 +0200
Subject: [PATCH 17/18] feat: add snapshot creation after chat edits and
 generation

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/components/chat/ChatPanel.tsx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/components/chat/ChatPanel.tsx b/src/components/chat/ChatPanel.tsx
index 80be609..04510d7 100644
--- a/src/components/chat/ChatPanel.tsx
+++ b/src/components/chat/ChatPanel.tsx
@@ -15,6 +15,7 @@ export function ChatPanel() {
   const currentProject = useProjectStore((s) => s.currentProject);
   const { messages, streaming, streamBuffer, loadMessages, addMessage } =
     useChatStore();
+  const createSnapshot = useProjectStore((s) => s.createSnapshot);
   const sidecarStatus = useAiStore((s) => s.sidecarStatus);
   const { generate } = useAiStream();
   const messagesEndRef = useRef<HTMLDivElement>(null);
@@ -35,6 +36,7 @@ export function ChatPanel() {
     await addMessage(currentProject.id, 'user', text, 'chat');
 
     const hasHtml = currentProject.html.length > 0;
+    let result: string | null = null;
 
     if (hasHtml) {
       const chatHistory = messages
@@ -42,18 +44,26 @@ export function ChatPanel() {
         .slice(-6)
         .map((m) => ({ role: m.role, content: m.content }));
 
-      await generate(
+      result = await generate(
         currentProject.id,
         SYSTEM_PROMPTS.editFull,
         buildEditMessages(currentProject.html, chatHistory, text)
       );
     } else {
-      await generate(
+      result = await generate(
         currentProject.id,
         SYSTEM_PROMPTS.generate,
         buildGenerateMessages(text, currentProject.site_type)
       );
     }
+
+    if (result) {
+      await createSnapshot(
+        currentProject.id,
+        result,
+        hasHtml ? `Chat edit: ${text.slice(0, 50)}` : `Generated: ${text.slice(0, 50)}`
+      );
+    }
   };
 
   const isReady = sidecarStatus === 'running';

From 8645827836a006713d1753324e29b3d9d64afa4a Mon Sep 17 00:00:00 2001
From: Szymon0C <szymon.cichonski30@gmail.com>
Date: Thu, 2 Apr 2026 19:37:12 +0200
Subject: [PATCH 18/18] fix: apply CodeRabbit review fixes for PR #4

- setup-sidecar.sh: fix rustc --print host-tuple (was host-triple)
- capabilities: scope shell permissions to llama-server only
- ai.rs: add system_prompt and max_tokens as proper command params
- sidecar.rs: fix race condition with atomic check+spawn, Arc<Mutex>
  for child, cleanup on timeout, clear child on termination
- tauri.conf.json: run setup-sidecar.sh in beforeBuildCommand
- ChatInput: IME composition handling, focus ring, aria-label
- ChatPanel: null safety check on html
- useAiStream: use snake_case params matching Rust API
- prompts.ts: filter duplicate user prompt from chat history
- projectStore: wrap snapshot version in transaction

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 scripts/setup-sidecar.sh            |  2 +-
 src-tauri/capabilities/default.json |  6 ++-
 src-tauri/src/ai.rs                 | 18 +++++++-
 src-tauri/src/sidecar.rs            | 71 +++++++++++++++++------------
 src-tauri/tauri.conf.json           |  2 +-
 src/components/chat/ChatInput.tsx   |  4 +-
 src/components/chat/ChatPanel.tsx   |  2 +-
 src/hooks/useAiStream.ts            | 10 ++--
 src/lib/prompts.ts                  |  4 +-
 src/stores/projectStore.ts          | 26 +++++++----
 10 files changed, 91 insertions(+), 54 deletions(-)

diff --git a/scripts/setup-sidecar.sh b/scripts/setup-sidecar.sh
index a954127..410d610 100755
--- a/scripts/setup-sidecar.sh
+++ b/scripts/setup-sidecar.sh
@@ -5,7 +5,7 @@ LLAMA_VERSION="b5460"
 BINARIES_DIR="src-tauri/binaries"
 mkdir -p "$BINARIES_DIR"
 
-TARGET=$(rustc --print host-triple 2>/dev/null || echo "unknown")
+TARGET=$(rustc --print host-tuple 2>/dev/null || rustc -Vv 2>/dev/null | grep 'host:' | cut -d' ' -f2 || echo "unknown")
 
 echo "Detected target: $TARGET"
 echo "Setting up llama-server for Offpage..."
diff --git a/src-tauri/capabilities/default.json b/src-tauri/capabilities/default.json
index 7471bb5..d844db1 100644
--- a/src-tauri/capabilities/default.json
+++ b/src-tauri/capabilities/default.json
@@ -8,7 +8,9 @@
     "sql:default",
     "sql:allow-execute",
     "sql:allow-select",
-    "shell:allow-spawn",
-    "shell:allow-execute"
+    {
+      "identifier": "shell:allow-execute",
+      "allow": [{ "name": "llama-server" }]
+    }
   ]
 }
diff --git a/src-tauri/src/ai.rs b/src-tauri/src/ai.rs
index 3726e82..642c140 100644
--- a/src-tauri/src/ai.rs
+++ b/src-tauri/src/ai.rs
@@ -31,6 +31,8 @@ pub async fn stream_generate<R: Runtime>(
     app: AppHandle<R>,
     state: tauri::State<'_, SidecarState>,
     messages: Vec<serde_json::Value>,
+    system_prompt: Option<String>,
+    max_tokens: Option<u32>,
 ) -> Result<String, String> {
     let port = {
         let port_lock = state.port.lock().map_err(|e| e.to_string())?;
@@ -39,10 +41,22 @@ pub async fn stream_generate<R: Runtime>(
 
     let url = format!("http://127.0.0.1:{}/v1/chat/completions", port);
 
-    let body = serde_json::json!({
-        "messages": messages,
+    let mut final_messages = Vec::new();
+    if let Some(sys_prompt) = system_prompt {
+        final_messages.push(serde_json::json!({
+            "role": "system",
+            "content": sys_prompt
+        }));
+    }
+    final_messages.extend(messages);
+
+    let mut body = serde_json::json!({
+        "messages": final_messages,
         "stream": true,
     });
+    if let Some(tokens) = max_tokens {
+        body["max_tokens"] = serde_json::json!(tokens);
+    }
 
     let client = reqwest::Client::new();
     let response = client
diff --git a/src-tauri/src/sidecar.rs b/src-tauri/src/sidecar.rs
index 99dee15..c84b52d 100644
--- a/src-tauri/src/sidecar.rs
+++ b/src-tauri/src/sidecar.rs
@@ -1,18 +1,18 @@
 use serde::Serialize;
-use std::sync::Mutex;
+use std::sync::{Arc, Mutex};
 use tauri::{AppHandle, Emitter, Runtime};
 use tauri_plugin_shell::process::{CommandChild, CommandEvent};
 use tauri_plugin_shell::ShellExt;
 
 pub struct SidecarState {
-    child: Mutex<Option<CommandChild>>,
+    child: Arc<Mutex<Option<CommandChild>>>,
     pub port: Mutex<u16>,
 }
 
 impl Default for SidecarState {
     fn default() -> Self {
         Self {
-            child: Mutex::new(None),
+            child: Arc::new(Mutex::new(None)),
             port: Mutex::new(8080),
         }
     }
@@ -31,38 +31,37 @@ pub async fn start_sidecar<R: Runtime>(
     model_path: String,
     port: Option<u16>,
 ) -> Result<u16, String> {
-    // Check if already running
-    {
-        let child = state.child.lock().map_err(|e| e.to_string())?;
-        if child.is_some() {
+    let port = port.unwrap_or(8080);
+
+    // Atomically check and spawn while holding the lock
+    let mut rx = {
+        let mut child_lock = state.child.lock().map_err(|e| e.to_string())?;
+        if child_lock.is_some() {
             return Err("Sidecar is already running".to_string());
         }
-    }
-
-    let port = port.unwrap_or(8080);
 
-    let (mut rx, child) = app
-        .shell()
-        .sidecar("llama-server")
-        .map_err(|e| format!("Failed to create sidecar command: {}", e))?
-        .args([
-            "-m",
-            &model_path,
-            "--port",
-            &port.to_string(),
-            "--host",
-            "127.0.0.1",
-            "-ngl",
-            "99",
-        ])
-        .spawn()
-        .map_err(|e| format!("Failed to spawn sidecar: {}", e))?;
+        let (rx, child) = app
+            .shell()
+            .sidecar("llama-server")
+            .map_err(|e| format!("Failed to create sidecar command: {}", e))?
+            .args([
+                "-m",
+                &model_path,
+                "--port",
+                &port.to_string(),
+                "--host",
+                "127.0.0.1",
+                "-ngl",
+                "99",
+            ])
+            .spawn()
+            .map_err(|e| format!("Failed to spawn sidecar: {}", e))?;
 
-    // Store child process and port
-    {
-        let mut child_lock = state.child.lock().map_err(|e| e.to_string())?;
         *child_lock = Some(child);
-    }
+        rx
+    };
+
+    // Store port
     {
         let mut port_lock = state.port.lock().map_err(|e| e.to_string())?;
         *port_lock = port;
@@ -70,6 +69,7 @@ pub async fn start_sidecar<R: Runtime>(
 
     // Monitor stdout/stderr via Tauri events
     let app_clone = app.clone();
+    let child_arc = state.child.clone();
     tauri::async_runtime::spawn(async move {
         while let Some(event) = rx.recv().await {
             match event {
@@ -94,6 +94,9 @@ pub async fn start_sidecar<R: Runtime>(
                     );
                 }
                 CommandEvent::Terminated(status) => {
+                    if let Ok(mut child_lock) = child_arc.lock() {
+                        *child_lock = None;
+                    }
                     let _ = app_clone.emit(
                         "sidecar-output",
                         SidecarEvent {
@@ -116,6 +119,14 @@ pub async fn start_sidecar<R: Runtime>(
 
     loop {
         if start.elapsed() > timeout {
+            // Cleanup: kill the child process on timeout
+            let mut child_lock = state.child.lock().map_err(|e| e.to_string())?;
+            if let Some(mut child) = child_lock.take() {
+                let _ = child.kill();
+                tauri::async_runtime::spawn(async move {
+                    let _ = child.wait().await;
+                });
+            }
             return Err("Sidecar health check timed out after 30 seconds".to_string());
         }
 
diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
index cd2101a..1489707 100644
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -6,7 +6,7 @@
   "build": {
     "beforeDevCommand": "npm run dev",
     "devUrl": "http://localhost:1420",
-    "beforeBuildCommand": "npm run build",
+    "beforeBuildCommand": "npm run build && bash scripts/setup-sidecar.sh",
     "frontendDist": "../dist"
   },
   "app": {
diff --git a/src/components/chat/ChatInput.tsx b/src/components/chat/ChatInput.tsx
index bc4a863..8d1c314 100644
--- a/src/components/chat/ChatInput.tsx
+++ b/src/components/chat/ChatInput.tsx
@@ -21,6 +21,7 @@ export function ChatInput({
   };
 
   const handleKeyDown = (e: KeyboardEvent) => {
+    if (e.nativeEvent?.isComposing) return;
     if (e.key === 'Enter' && !e.shiftKey) {
       e.preventDefault();
       handleSend();
@@ -37,11 +38,12 @@ export function ChatInput({
           disabled={disabled}
           placeholder={placeholder}
           rows={1}
-          className="flex-1 bg-[var(--color-bg-elevated)] text-[var(--color-text-primary)] text-xs p-2 rounded-lg resize-none outline-none placeholder:text-[var(--color-text-secondary)] disabled:opacity-50"
+          className="flex-1 bg-[var(--color-bg-elevated)] text-[var(--color-text-primary)] text-xs p-2 rounded-lg resize-none placeholder:text-[var(--color-text-secondary)] disabled:opacity-50 focus-visible:ring-2 focus-visible:ring-[var(--color-accent)] focus-visible:outline-none"
         />
         <button
           onClick={handleSend}
           disabled={disabled || !value.trim()}
+          aria-label="Send"
           className="bg-[var(--color-accent)] hover:bg-[var(--color-accent-hover)] disabled:opacity-50 disabled:cursor-not-allowed text-white px-3 rounded-lg text-xs transition-colors"
         >
           ↑
diff --git a/src/components/chat/ChatPanel.tsx b/src/components/chat/ChatPanel.tsx
index 04510d7..0cca7bb 100644
--- a/src/components/chat/ChatPanel.tsx
+++ b/src/components/chat/ChatPanel.tsx
@@ -35,7 +35,7 @@ export function ChatPanel() {
 
     await addMessage(currentProject.id, 'user', text, 'chat');
 
-    const hasHtml = currentProject.html.length > 0;
+    const hasHtml = !!currentProject.html && currentProject.html.length > 0;
     let result: string | null = null;
 
     if (hasHtml) {
diff --git a/src/hooks/useAiStream.ts b/src/hooks/useAiStream.ts
index ec214b5..dfb233b 100644
--- a/src/hooks/useAiStream.ts
+++ b/src/hooks/useAiStream.ts
@@ -47,10 +47,9 @@ export function useAiStream() {
 
       try {
         const fullHtml = await invoke<string>('stream_generate', {
-          port: sidecarPort,
-          systemPrompt,
           messages,
-          maxTokens: maxTokens ?? null,
+          system_prompt: systemPrompt,
+          max_tokens: maxTokens ?? null,
         });
 
         await finalizeStream(projectId);
@@ -92,10 +91,9 @@ export function useAiStream() {
 
       try {
         const newSectionHtml = await invoke<string>('stream_generate', {
-          port: sidecarPort,
-          systemPrompt: SYSTEM_PROMPTS.editSection,
           messages: buildSectionEditMessages(sectionHtml, userPrompt),
-          maxTokens: null,
+          system_prompt: SYSTEM_PROMPTS.editSection,
+          max_tokens: null,
         });
 
         await finalizeStream(projectId);
diff --git a/src/lib/prompts.ts b/src/lib/prompts.ts
index 3571e06..376154c 100644
--- a/src/lib/prompts.ts
+++ b/src/lib/prompts.ts
@@ -59,7 +59,9 @@ export function buildEditMessages(
       content: 'I see the current page. What would you like me to change?',
     },
   ];
-  const recentHistory = chatHistory.slice(-6);
+  const recentHistory = chatHistory
+    .slice(-6)
+    .filter((msg) => msg.content !== userPrompt);
   messages.push(...recentHistory);
   messages.push({ role: 'user', content: userPrompt });
   return messages;
diff --git a/src/stores/projectStore.ts b/src/stores/projectStore.ts
index 0ceeaec..b5ad40d 100644
--- a/src/stores/projectStore.ts
+++ b/src/stores/projectStore.ts
@@ -101,14 +101,22 @@ export const useProjectStore = create<ProjectState>((set, _get) => ({
   createSnapshot: async (projectId: string, html: string, description: string) => {
     const db = await getDatabase();
     const id = crypto.randomUUID();
-    const rows = await db.select<Array<{ max_version: number | null }>>(
-      'SELECT MAX(version) as max_version FROM snapshots WHERE project_id = ?',
-      [projectId]
-    );
-    const nextVersion = (rows[0]?.max_version ?? 0) + 1;
-    await db.execute(
-      'INSERT INTO snapshots (id, project_id, html, description, version) VALUES (?, ?, ?, ?, ?)',
-      [id, projectId, html, description, nextVersion]
-    );
+
+    await db.execute('BEGIN TRANSACTION');
+    try {
+      const rows = await db.select<Array<{ max_version: number | null }>>(
+        'SELECT MAX(version) as max_version FROM snapshots WHERE project_id = ?',
+        [projectId]
+      );
+      const nextVersion = (rows[0]?.max_version ?? 0) + 1;
+      await db.execute(
+        'INSERT INTO snapshots (id, project_id, html, description, version) VALUES (?, ?, ?, ?, ?)',
+        [id, projectId, html, description, nextVersion]
+      );
+      await db.execute('COMMIT');
+    } catch (error) {
+      await db.execute('ROLLBACK');
+      throw error;
+    }
   },
 }));