@oooooooooo/ch0de 1.9.55 → 1.9.57

package/chode.js

@@ -7278,8 +7278,10 @@ function cmdServe(argv) {
   if (!portVal) portVal = '4097';               // default unlikely to conflict with OpenCode (4096)
   var PORT = parseInt(portVal, 10);
   var SESSIONS_DIR = path.join(ROOT, '.chode', 'sessions');
+  var CONFIG_PATH = path.join(ROOT, '.chode', 'config.json');
 
   if (!fs.existsSync(SESSIONS_DIR)) fs.mkdirSync(SESSIONS_DIR, {recursive:true});
+  if (!fs.existsSync(path.dirname(CONFIG_PATH))) fs.mkdirSync(path.dirname(CONFIG_PATH), {recursive:true});
 
   var sessions = {};
   try {
@@ -7296,6 +7298,16 @@ function cmdServe(argv) {
     return 'ses_' + crypto.randomBytes(8).toString('hex');
   }
 
+  function loadServeConfig() {
+    try { return JSON.parse(fs.readFileSync(CONFIG_PATH, 'utf8')); } catch(e) { return { freeOnly: true, defaultProvider: 'auto', providers: {}, connections: {} }; }
+  }
+
+  function saveServeConfig(cfg) {
+    try { fs.writeFileSync(CONFIG_PATH, JSON.stringify(cfg, null, 2), 'utf8'); } catch(e) {}
+  }
+
+  var serveState = { provider: 'auto', mode: 'execute', theme: 'dark', details: false, timeoutSeconds: null, acceptanceTest: null, yolo: false };
+
   function json(res, code, obj) {
     res.writeHead(code, {'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*'});
     res.end(JSON.stringify(obj));
@@ -7393,6 +7405,52 @@ function cmdServe(argv) {
       }
     }
 
+    if (pathname === '/api/settings' && req.method === 'GET') {
+      var cfg = loadServeConfig();
+      json(res, 200, {ok: true, config: cfg, state: serveState});
+      return;
+    }
+
+    if (pathname === '/api/settings' && req.method === 'POST') {
+      readBody(req).then(function(body){
+        var parsed;
+        try { parsed = JSON.parse(body || '{}'); } catch(e) { json(res, 400, {ok:false, error:'invalid json'}); return; }
+        var cfg = loadServeConfig();
+        if (parsed.freeOnly !== undefined) cfg.freeOnly = !!parsed.freeOnly;
+        if (parsed.defaultProvider !== undefined) cfg.defaultProvider = parsed.defaultProvider;
+        if (parsed.mode !== undefined) serveState.mode = parsed.mode;
+        if (parsed.theme !== undefined) serveState.theme = parsed.theme;
+        if (parsed.details !== undefined) serveState.details = !!parsed.details;
+        if (parsed.timeoutSeconds !== undefined) serveState.timeoutSeconds = parsed.timeoutSeconds ? Number(parsed.timeoutSeconds) : null;
+        if (parsed.acceptanceTest !== undefined) serveState.acceptanceTest = parsed.acceptanceTest || null;
+        if (parsed.yolo !== undefined) serveState.yolo = !!parsed.yolo;
+        if (parsed.provider !== undefined) serveState.provider = parsed.provider;
+        saveServeConfig(cfg);
+        json(res, 200, {ok: true, config: cfg, state: serveState});
+      }).catch(function(e){ json(res, 500, {ok:false, error: e.message}); });
+      return;
+    }
+
+    if (pathname === '/api/providers' && req.method === 'GET') {
+      var out = [];
+      try {
+        for (var id in PROVIDERS) {
+          var p = PROVIDERS[id];
+          out.push({id: id, name: p.name || id, requiresKey: !!p.requiresKey, free: require('./provider-capacity').free ? require('./provider-capacity').free(p) : true, category: p.category || '', builtIn: true});
+        }
+        var dir = require('./provider-directory');
+        var listed = dir.list();
+        var ids = {};
+        out.forEach(function(x){ids[x.id]=true;});
+        listed.forEach(function(p){
+          if (!ids[p.id]) {
+            out.push({id: p.id, name: p.name, requiresKey: !!p.env, free: !p.env, category: 'directory', builtIn: false, baseUrl: p.baseUrl, models: p.models.length, doc: p.doc, verification: p.verification});
+          }
+        });
+      } catch(e) {}
+      json(res, 200, {ok: true, providers: out});
+    }
+
     res.writeHead(404, {'Content-Type': 'text/plain'});
     res.end('Not found');
   });

package/install.cjs

@@ -4,10 +4,10 @@ const fs=require('fs'),os=require('os'),path=require('path'),crypto=require('cry
 const REPOSITORY='https://github.com/fogennnnn/chode.git';
 function execute(command,args,options={}){const r=spawnSync(command,args,{encoding:'utf8',windowsHide:true,timeout:180000,maxBuffer:4*1024*1024,...options});if(r.error||r.status!==0)throw Error(String(r.stderr||r.stdout||r.error||'Command failed').trim().slice(-2000));return r.stdout.trim();}
 function npmRunner(){const directories=[path.dirname(process.execPath),...String(process.env.PATH||'').split(path.delimiter)];const candidates=[process.env.npm_execpath,path.join(path.dirname(process.execPath),'..','lib','node_modules','npm','bin','npm-cli.js'),'/usr/share/nodejs/npm/bin/npm-cli.js'];for(const directory of directories){candidates.push(path.join(directory,'node_modules','npm','bin','npm-cli.js'));try{candidates.push(fs.realpathSync(path.join(directory,'npm')));}catch(_){}}const cli=candidates.find(p=>p&&/npm-cli\.js$/i.test(p)&&fs.existsSync(p));if(!cli)throw Error('npm was not found. Install Node.js 18+ with npm, then retry.');return args=>execute(process.execPath,[cli,...args]);}
-async function install(options={}){if(Number(process.versions.node.split('.')[0])<18)throw Error('Node.js 18+ is required.');const release=await fetchRelease();execute('git',['--version']);const npm=npmRunner(),temporaryRoot=fs.realpathSync(os.tmpdir()),staging=fs.mkdtempSync(path.join(temporaryRoot,'chode-install-'));const prefix=options.prefix?['--prefix',path.resolve(options.prefix)]:[];try{const checkout=path.join(staging,'source');console.log('Downloading the latest Chode from master…');execute('git',['clone','--depth','1','--single-branch','--no-tags','--branch','master',REPOSITORY,checkout]);const project=path.join(checkout,'chode'),manifest=JSON.parse(fs.readFileSync(path.join(project,'package.json'),'utf8'));if(manifest.name!=='chode'||!fs.existsSync(path.join(project,'chode.js')))throw Error('Downloaded source is not the expected Chode project.');verifyRelease(project,release);const commit=execute('git',['-C',checkout,'rev-parse','HEAD']);const packed=JSON.parse(npm(['pack',project,'--ignore-scripts','--json','--pack-destination',staging]));if(!Array.isArray(packed)||packed.length!==1||path.basename(packed[0].filename)!==packed[0].filename)throw Error('Unexpected package archive.');const archive=path.join(staging,packed[0].filename);console.log('Installing Chode '+manifest.version+'…');npm(['install','--global','--ignore-scripts','--no-audit','--no-fund',...prefix,archive]);const modules=npm(['root','--global',...prefix]),installed=path.join(modules,'chode','chode.js');verifyRelease(path.dirname(installed),release);const version=execute(process.execPath,[installed,'--version']);if(version!==manifest.version)throw Error('Installed version mismatch: expected '+manifest.version+', received '+version);console.log('Installed Chode '+version+' · '+commit.slice(0,12));console.log('Verified executable: '+installed);warnShadowed(modules);console.log('Start coding: chode');if(options.prefix)console.log('Command directory: '+(process.platform==='win32'?path.resolve(options.prefix):path.join(path.resolve(options.prefix),'bin')));console.log(options.prefix?'If chode is not found, add the command directory above to PATH and reopen your terminal.':'If chode is not found, add npm\'s global command directory to PATH and reopen your terminal.');return {version,commit,installed};}finally{const resolved=path.resolve(staging);if(path.dirname(resolved)!==temporaryRoot||!path.basename(resolved).startsWith('chode-install-'))throw Error('Refusing cleanup outside the installer staging directory.');fs.rmSync(resolved,{recursive:true,force:true});}}
+async function install(options={}){if(Number(process.versions.node.split('.')[0])<18)throw Error('Node.js 18+ is required.');const release=await fetchRelease();execute('git',['--version']);const npm=npmRunner(),temporaryRoot=fs.realpathSync(os.tmpdir()),staging=fs.mkdtempSync(path.join(temporaryRoot,'chode-install-'));const prefix=options.prefix?['--prefix',path.resolve(options.prefix)]:[];try{const checkout=path.join(staging,'source');console.log('Downloading the latest Chode from master…');execute('git',['clone','--depth','1','--single-branch','--no-tags','--branch','master',REPOSITORY,checkout]);const project=path.join(checkout,'chode'),manifest=JSON.parse(fs.readFileSync(path.join(project,'package.json'),'utf8'));if((manifest.name!=='chode'&&manifest.name!=='@oooooooooo/ch0de')||!fs.existsSync(path.join(project,'chode.js')))throw Error('Downloaded source is not the expected Chode project.');verifyRelease(project,release);const commit=execute('git',['-C',checkout,'rev-parse','HEAD']);const packed=JSON.parse(npm(['pack',project,'--ignore-scripts','--json','--pack-destination',staging]));if(!Array.isArray(packed)||packed.length!==1||path.basename(packed[0].filename)!==packed[0].filename)throw Error('Unexpected package archive.');const archive=path.join(staging,packed[0].filename);console.log('Installing Chode '+manifest.version+'…');npm(['install','--global','--force','--ignore-scripts','--no-audit','--no-fund',...prefix,archive]);const modules=npm(['root','--global',...prefix]),pkgRoot=manifest.name.startsWith('@')?path.join(modules,manifest.name.split('/')[0],manifest.name.split('/')[1]):path.join(modules,manifest.name),installed=path.join(pkgRoot,'chode.js');verifyRelease(path.dirname(installed),release);const version=execute(process.execPath,[installed,'--version']);if(version!==manifest.version)throw Error('Installed version mismatch: expected '+manifest.version+', received '+version);console.log('Installed Chode '+version+' · '+commit.slice(0,12));console.log('Verified executable: '+installed);warnShadowed(modules);console.log('Start coding: chode');if(options.prefix)console.log('Command directory: '+(process.platform==='win32'?path.resolve(options.prefix):path.join(path.resolve(options.prefix),'bin')));console.log(options.prefix?'If chode is not found, add the command directory above to PATH and reopen your terminal.':'If chode is not found, add npm\'s global command directory to PATH and reopen your terminal.');return {version,commit,installed};}finally{const resolved=path.resolve(staging);if(path.dirname(resolved)!==temporaryRoot||!path.basename(resolved).startsWith('chode-install-'))throw Error('Refusing cleanup outside the installer staging directory.');fs.rmSync(resolved,{recursive:true,force:true});}}
 if(require.main===module){try{const args=process.argv.slice(2);if(args.length&&!(args.length===2&&args[0]==='--prefix'))throw Error('Usage: node install.cjs [--prefix directory]');install({prefix:args[1]||process.env.CHODE_INSTALL_PREFIX}).catch(error=>{console.error('Chode installation failed: '+error.message);process.exitCode=1;});}catch(error){console.error('Chode installation failed: '+error.message);process.exitCode=1;}}
 function digestFile(root,file){let content=fs.readFileSync(path.join(root,file),'utf8').replace(/\r\n/g,'\n');if(file==='package.json'){const p=JSON.parse(content);content=JSON.stringify({name:p.name,version:p.version,main:p.main,bin:p.bin,engines:p.engines,files:p.files,dependencies:p.dependencies||{}});}return crypto.createHash('sha256').update(content).digest('hex');}
-function verifyRelease(root,release){if(!release||release.channel!=='master'||!/^\d+\.\d+\.\d+$/.test(release.version)||!release.files)throw Error('Verified release metadata is invalid.');const parts=release.version.split('.').map(Number);if(parts[0]<1||parts[0]===1&&(parts[1]<7||parts[1]===7&&parts[2]<2))throw Error('Release is below the supported security floor.');const p=JSON.parse(fs.readFileSync(path.join(root,'package.json'),'utf8'));if(p.version!==release.version)throw Error('Downloaded version does not match the verified release. No stale version will be installed; retry after publication completes.');if(p.name!=='chode'||p.bin&&p.bin.chode!=='chode.js')throw Error('Unexpected package identity.');for(const required of ['package.json','chode.js','provider-policy.js'])if(!release.files[required])throw Error('Release integrity list is incomplete.');for(const file of Object.keys(release.files)){if(path.isAbsolute(file)||file.split(/[\\/]/).includes('..')||!/^[a-zA-Z0-9_./-]+$/.test(file))throw Error('Unsafe release file path.');if(digestFile(root,file)!==release.files[file])throw Error('Release integrity mismatch: '+file);}for(const file of p.files||[]){if(/\.(?:js|cjs)$/.test(file)){if(!release.files[file])throw Error('Unverified runtime file: '+file);const content=fs.readFileSync(path.join(root,file),'utf8');if(new RegExp('poll'+'inat','i').test(content))throw Error('Forbidden retired fallback detected in '+file);}}return true;}
+function verifyRelease(root,release){if(!release||release.channel!=='master'||!/^\d+\.\d+\.\d+$/.test(release.version)||!release.files)throw Error('Verified release metadata is invalid.');const parts=release.version.split('.').map(Number);if(parts[0]<1||parts[0]===1&&(parts[1]<7||parts[1]===7&&parts[2]<2))throw Error('Release is below the supported security floor.');const p=JSON.parse(fs.readFileSync(path.join(root,'package.json'),'utf8'));if(p.version!==release.version)throw Error('Downloaded version does not match the verified release. No stale version will be installed; retry after publication completes.');if((p.name!=='chode'&&p.name!=='@oooooooooo/ch0de')||p.bin&&!(p.bin.chode==='chode.js'||p.bin.ch0de==='chode.js'))throw Error('Unexpected package identity.');for(const required of ['package.json','chode.js','provider-policy.js'])if(!release.files[required])throw Error('Release integrity list is incomplete.');for(const file of Object.keys(release.files)){if(path.isAbsolute(file)||file.split(/[\\/]/).includes('..')||!/^[a-zA-Z0-9_./-]+$/.test(file))throw Error('Unsafe release file path.');if(digestFile(root,file)!==release.files[file])throw Error('Release integrity mismatch: '+file);}for(const file of p.files||[]){if(/\.(?:js|cjs)$/.test(file)){if(!release.files[file])throw Error('Unverified runtime file: '+file);const content=fs.readFileSync(path.join(root,file),'utf8');if(new RegExp('poll'+'inat','i').test(content))throw Error('Forbidden retired fallback detected in '+file);}}return true;}
 async function fetchRelease(options={}){
  const request=options.fetch||fetch,pause=options.sleep||(ms=>new Promise(resolve=>setTimeout(resolve,ms)));let last;
  for(let attempt=0;attempt<3;attempt++){

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "@oooooooooo/ch0de",
-  "version": "1.9.55",
+  "version": "1.9.57",
   "description": "The self-healing AI coding harness. Free tiers. HEMO auto-provisioning. Zero lock-in. Canonical brand: ch0de.",
   "main": "chode.js",
   "bin": {
+    "chode": "chode.js",
     "ch0de": "chode.js",
     "chode-council": "expert-panel.cjs"
   },
@@ -150,6 +151,7 @@
   },
   "dependencies": {
     "@modelcontextprotocol/sdk": "1.32.2",
+    "@oooooooooo/ch0de": "^1.9.56",
     "lean": "^0.1.1"
   },
   "devDependencies": {

package/serve-frontend.html

@@ -11,6 +11,7 @@ body { background: #000; color: #e0e0e0; font-family: "IBM Plex Mono", monospace
 .sidebar { width: 280px; background: #0a0a0a; border-right: 1px solid #1a1a1a; display: flex; flex-direction: column; }
 .main { flex: 1; display: flex; flex-direction: column; background: #000; }
 .header { height: 60px; background: #0a0a0a; border-bottom: 1px solid #1a1a1a; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; }
+.header-right { display: flex; align-items: center; gap: 12px; }
 .logo { color: #22dd55; font-weight: bold; font-size: 1.25rem; letter-spacing: -0.5px; }
 .sessions { flex: 1; overflow-y: auto; padding: 12px; }
 .session-item { padding: 10px 12px; border-radius: 8px; cursor: pointer; margin-bottom: 6px; border: 1px solid transparent; transition: all 0.2s; }
@@ -18,6 +19,8 @@ body { background: #000; color: #e0e0e0; font-family: "IBM Plex Mono", monospace
 .session-item.active { background: #141414; border-color: #22dd55; }
 .new-session { padding: 10px 12px; background: #22dd55; color: #000; border: none; border-radius: 8px; font-family: inherit; font-weight: bold; cursor: pointer; width: 100%; margin-bottom: 12px; }
 .new-session:hover { background: #3dffa0; }
+.settings-btn { padding: 8px 16px; background: #141414; color: #e0e0e0; border: 1px solid #22dd5533; border-radius: 8px; font-family: inherit; font-size: 12px; cursor: pointer; }
+.settings-btn:hover { border-color: #22dd55; background: #1a1a1a; }
 .chat { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
 .messages { flex: 1; overflow-y: auto; padding: 24px; display: flex; flex-direction: column; gap: 16px; }
 .message { max-width: 70%; padding: 12px 16px; border-radius: 12px; line-height: 1.5; }
@@ -33,6 +36,40 @@ body { background: #000; color: #e0e0e0; font-family: "IBM Plex Mono", monospace
 #sendBtn:disabled { background: #1a1a1a; color: #666; cursor: not-allowed; }
 .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; color: #666; }
 .status-badge { display: inline-block; padding: 2px 8px; border-radius: 4px; background: #1a1a1a; border: 1px solid #22dd5533; color: #22dd55; font-size: 11px; margin-left: 8px; }
+/* Settings panel */
+.settings-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 50; display: none; }
+.settings-panel { position: fixed; top: 10%; left: 10%; right: 10%; bottom: 10%; background: #0a0a0a; border: 1px solid #22dd5533; border-radius: 12px; z-index: 60; display: none; flex-direction: column; overflow: hidden; }
+.settings-panel.open, .settings-overlay.open { display: block; }
+.settings-header { height: 50px; background: #0a0a0a; border-bottom: 1px solid #1a1a1a; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; }
+.settings-title { color: #22dd55; font-weight: bold; font-size: 1.1rem; }
+.settings-close { background: transparent; border: 1px solid #22dd5533; color: #e0e0e0; border-radius: 6px; padding: 4px 12px; font-family: inherit; font-size: 12px; cursor: pointer; }
+.settings-close:hover { border-color: #22dd55; }
+.settings-tabs { display: flex; border-bottom: 1px solid #1a1a1a; }
+.settings-tab { padding: 10px 16px; background: transparent; border: none; border-bottom: 2px solid transparent; color: #888; font-family: inherit; font-size: 12px; cursor: pointer; }
+.settings-tab:hover { color: #e0e0e0; background: #141414; }
+.settings-tab.active { color: #22dd55; border-bottom-color: #22dd55; }
+.settings-content { flex: 1; overflow-y: auto; padding: 24px; }
+.settings-section { margin-bottom: 30px; }
+.settings-section-title { color: #888; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 14px; }
+.setting-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #141414; }
+.setting-row:last-child { border-bottom: none; }
+.setting-label { color: #e0e0e0; font-size: 13px; }
+.setting-value { color: #888; font-size: 12px; }
+.setting-select, .setting-input { background: #000; border: 1px solid #22dd5533; color: #e0e0e0; padding: 6px 10px; border-radius: 6px; font-family: inherit; font-size: 12px; outline: none; }
+.setting-select:focus, .setting-input:focus { border-color: #22dd55; }
+.setting-checkbox { width: 18px; height: 18px; accent-color: #22dd55; background: #000; border: 1px solid #22dd5533; cursor: pointer; }
+.provider-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #141414; font-size: 12px; }
+.provider-row:last-child { border-bottom: none; }
+#providersList { max-height: 340px; overflow-y: auto; border: 1px solid #141414; border-radius: 6px; padding: 10px; background: #000; margin-top: 8px; }
+.provider-info { display: flex; align-items: center; gap: 10px; flex: 1; }
+.provider-name { font-weight: bold; color: #e0e0e0; }
+.provider-id { color: #666; font-size: 11px; }
+.provider-status { font-size: 11px; padding: 2px 8px; border-radius: 4px; }
+.provider-status.free { background: #1a1a1a; color: #22dd55; border: 1px solid #22dd5533; }
+.provider-status.keyed { background: #1a1a1a; color: #ff9900; border: 1px solid #ff990033; }
+.btn-save { background: #22dd55; color: #000; border: none; border-radius: 6px; padding: 8px 16px; font-family: inherit; font-weight: bold; cursor: pointer; margin-top: 20px; }
+.btn-save:hover { background: #3dffa0; }
+.btn-save:disabled { background: #1a1a1a; color: #666; cursor: not-allowed; }
 </style>
 </head>
 <body>
@@ -40,6 +77,7 @@ body { background: #000; color: #e0e0e0; font-family: "IBM Plex Mono", monospace
   <div class="sidebar">
     <div class="header">
       <div class="logo">chode <span class="status-badge">serve</span></div>
+      <button class="settings-btn" id="settingsBtn">Settings</button>
     </div>
     <button class="new-session" id="newSessionBtn">New Session</button>
     <div class="sessions" id="sessionsList">
@@ -66,9 +104,81 @@ body { background: #000; color: #e0e0e0; font-family: "IBM Plex Mono", monospace
     </div>
   </div>
 </div>
+<div class="settings-overlay" id="settingsOverlay"></div>
+<div class="settings-panel" id="settingsPanel">
+  <div class="settings-header">
+    <div class="settings-title">chode settings</div>
+    <button class="settings-close" id="settingsClose">Close</button>
+  </div>
+  <div class="settings-tabs">
+    <button class="settings-tab active" data-tab="general">General</button>
+    <button class="settings-tab" data-tab="providers">Providers</button>
+    <button class="settings-tab" data-tab="session">Session</button>
+  </div>
+  <div class="settings-content">
+    <div class="settings-section" id="tab-general">
+      <div class="setting-row">
+        <span class="setting-label">Free mode</span>
+        <label style="display:flex;align-items:center;gap:8px;cursor:pointer;"><input type="checkbox" id="settingFreeOnly" class="setting-checkbox"><span style="color:#e0e0e0;font-size:12px;">Enable free (keyless) providers only</span></label>
+      </div>
+      <div class="setting-row">
+        <span class="setting-label">Default provider</span>
+        <select id="settingDefaultProvider" class="setting-select"></select>
+      </div>
+      <div class="setting-row">
+        <span class="setting-label">Mode</span>
+        <select id="settingMode" class="setting-select">
+          <option value="execute">Execute</option>
+          <option value="plan">Plan</option>
+        </select>
+      </div>
+      <div class="setting-row">
+        <span class="setting-label">Theme</span>
+        <select id="settingTheme" class="setting-select">
+          <option value="dark">Dark</option>
+          <option value="light">Light</option>
+          <option value="system">System</option>
+        </select>
+      </div>
+      <div class="setting-row">
+        <span class="setting-label">Details</span>
+        <label style="display:flex;align-items:center;gap:8px;cursor:pointer;"><input type="checkbox" id="settingDetails" class="setting-checkbox"><span style="color:#e0e0e0;font-size:12px;">Show tool and provider diagnostics</span></label>
+      </div>
+      <div class="setting-row">
+        <span class="setting-label">Timeout (seconds)</span>
+        <input type="number" id="settingTimeoutSeconds" class="setting-input" placeholder="e.g. 600">
+      </div>
+      <div class="setting-row">
+        <span class="setting-label">Acceptance test</span>
+        <input type="text" id="settingAcceptanceTest" class="setting-input" placeholder="path/to/test.cjs">
+      </div>
+      <div class="setting-row">
+        <span class="setting-label">Yolo mode</span>
+        <label style="display:flex;align-items:center;gap:8px;cursor:pointer;"><input type="checkbox" id="settingYolo" class="setting-checkbox"><span style="color:#e0e0e0;font-size:12px;">Skip confirmation prompts</span></label>
+      </div>
+      <button class="btn-save" id="settingsSave">Save settings</button>
+    </div>
+    <div class="settings-section" id="tab-providers" style="display:none;">
+      <div class="setting-section-title">Available providers</div>
+      <div id="providersList"></div>
+    </div>
+    <div class="settings-section" id="tab-session" style="display:none;">
+      <div class="setting-section-title">Current session</div>
+      <div class="setting-row">
+        <span class="setting-label">Session ID</span>
+        <span class="setting-value" id="settingSessionId">-</span>
+      </div>
+      <div class="setting-row">
+        <span class="setting-label">Messages</span>
+        <span class="setting-value" id="settingSessionMessages">0</span>
+      </div>
+    </div>
+  </div>
+</div>
 <script>
 const API = "http://127.0.0.1:" + (window.location.port || "4096");
 let currentSessionId = null;
+let settingsOpen = false;
 
 async function loadSessions() {
   const res = await fetch(API + "/api/sessions");
@@ -82,6 +192,7 @@ async function loadSessions() {
     div.onclick = function() { selectSession(s.id); };
     list.appendChild(div);
   });
+  updateSessionTab();
 }
 
 async function createSession() {
@@ -140,6 +251,92 @@ async function sendMessage() {
   }
 }
 
+async function loadSettings() {
+  try {
+    const res = await fetch(API + "/api/settings");
+    const data = await res.json();
+    if (!data.ok) return;
+    var cfg = data.config || {};
+    var st = data.state || {};
+    document.getElementById("settingFreeOnly").checked = !!cfg.freeOnly;
+    document.getElementById("settingDefaultProvider").value = cfg.defaultProvider || "auto";
+    document.getElementById("settingMode").value = st.mode || "execute";
+    document.getElementById("settingTheme").value = st.theme || "dark";
+    document.getElementById("settingDetails").checked = !!st.details;
+    document.getElementById("settingTimeoutSeconds").value = st.timeoutSeconds || "";
+    document.getElementById("settingAcceptanceTest").value = st.acceptanceTest || "";
+    document.getElementById("settingYolo").checked = !!st.yolo;
+  } catch(e) {}
+}
+
+async function saveSettings() {
+  var body = {
+    freeOnly: document.getElementById("settingFreeOnly").checked,
+    defaultProvider: document.getElementById("settingDefaultProvider").value,
+    mode: document.getElementById("settingMode").value,
+    theme: document.getElementById("settingTheme").value,
+    details: document.getElementById("settingDetails").checked,
+    timeoutSeconds: document.getElementById("settingTimeoutSeconds").value || null,
+    acceptanceTest: document.getElementById("settingAcceptanceTest").value || null,
+    yolo: document.getElementById("settingYolo").checked,
+  };
+  try {
+    const res = await fetch(API + "/api/settings", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(body)
+    });
+    const data = await res.json();
+    if (data.ok) {
+      // Refresh provider list for default provider select
+      await loadProviders();
+    }
+  } catch(e) {}
+}
+
+async function loadProviders() {
+  try {
+    const res = await fetch(API + "/api/providers");
+    const data = await res.json();
+    var select = document.getElementById("settingDefaultProvider");
+    var list = document.getElementById("providersList");
+    select.innerHTML = '<option value="auto">auto</option>';
+    list.innerHTML = '';
+    (data.providers || []).forEach(function(p) {
+      var opt = document.createElement("option");
+      opt.value = p.id;
+      opt.textContent = p.name || p.id;
+      select.appendChild(opt);
+      var row = document.createElement("div");
+      row.className = "provider-row";
+      var statusCls = p.requiresKey ? "keyed" : "free";
+      var statusText = p.requiresKey ? "needs API key" : "free";
+      var extra = p.builtIn ? "" : ' <span style="font-size:10px;color:#888;margin-left:6px;">(' + (p.models||0) + ' models)</span>';
+      row.innerHTML =
+        '<div class="provider-info">' +
+        '<div class="provider-name">' + escapeHtml(p.name || p.id) + extra + '</div>' +
+        '<div class="provider-id">' + escapeHtml(p.id) + (p.baseUrl ? ' · ' + escapeHtml(String(p.baseUrl).slice(0,40)) : '') + '</div>' +
+        '</div>' +
+        '<div class="provider-status ' + statusCls + '">' + statusText + '</div>';
+      list.appendChild(row);
+    });
+  } catch(e) {}
+}
+
+function updateSessionTab() {
+  var sidEl = document.getElementById("settingSessionId");
+  var msgEl = document.getElementById("settingSessionMessages");
+  if (currentSessionId) {
+    sidEl.textContent = currentSessionId;
+    // count messages from the session list item
+    var item = Array.from(document.querySelectorAll(".session-item")).find(function(el){ return el.textContent && el.textContent.includes(currentSessionId); });
+    msgEl.textContent = "loaded";
+  } else {
+    sidEl.textContent = "-";
+    msgEl.textContent = "0";
+  }
+}
+
 function addMessage(role, content, scroll) {
   var messagesEl = document.getElementById("messages");
   var div = document.createElement("div");
@@ -155,11 +352,38 @@ function escapeHtml(text) {
   return div.innerHTML;
 }
 
+function openSettings() {
+  document.getElementById("settingsOverlay").classList.add("open");
+  document.getElementById("settingsPanel").classList.add("open");
+  settingsOpen = true;
+  loadSettings();
+  loadProviders();
+}
+
+function closeSettings() {
+  document.getElementById("settingsOverlay").classList.remove("open");
+  document.getElementById("settingsPanel").classList.remove("open");
+  settingsOpen = false;
+}
+
 document.getElementById("newSessionBtn").onclick = createSession;
 document.getElementById("sendBtn").onclick = sendMessage;
 document.getElementById("messageInput").addEventListener("keypress", function(e) {
   if (e.key === "Enter") sendMessage();
 });
+document.getElementById("settingsBtn").onclick = openSettings;
+document.getElementById("settingsClose").onclick = closeSettings;
+document.getElementById("settingsOverlay").onclick = function(e) { if (e.target === this) closeSettings(); };
+document.getElementById("settingsSave").onclick = function() { saveSettings(); closeSettings(); };
+
+document.querySelectorAll(".settings-tab").forEach(function(tab) {
+  tab.onclick = function() {
+    document.querySelectorAll(".settings-tab").forEach(function(t){ t.classList.remove("active"); });
+    tab.classList.add("active");
+    document.querySelectorAll(".settings-section").forEach(function(s){ s.style.display = "none"; });
+    document.getElementById("tab-" + tab.getAttribute("data-tab")).style.display = "block";
+  };
+});
 
 loadSessions();
 setTimeout(async function() {
@@ -169,4 +393,4 @@ setTimeout(async function() {
 }, 500);
 </script>
 </body>
-</html>
+</html>