keywright-server 0.0.1__py3-none-any.whl

keywright_server/web/templates/_topology_layout.js

@@ -0,0 +1,174 @@
+/* Pure topology model and geometry. No DOM, network requests, or device-specific coordinates. */
+(function(root, factory) {
+  const api = factory();
+  if (typeof module === 'object' && module.exports) module.exports = api;
+  else root.KeywrightTopology = api;
+})(globalThis, function() {
+  'use strict';
+  const compare = (a, b) => a < b ? -1 : a > b ? 1 : 0;
+  const roles = {external: 0, gateway: 1, router: 1, switch: 2, network: 3, ap: 4};
+  const order = (a, b) => (roles[a.role] ?? 5) - (roles[b.role] ?? 5) || compare(a.id, b.id);
+
+  function normalize(graph, site = '') {
+    const nodes = new Map((graph.nodes || []).filter(n => !site || n.site_id === site)
+      .map(n => [n.id, {...n, name: n.name || n.mac || 'Unnamed device', addresses: n.addresses || []}]));
+    const edges = [], dangling = [], seen = new Set(), incoming = new Map();
+    for (const edge of graph.edges || []) {
+      if (!nodes.has(edge.target)) continue;
+      if (!nodes.has(edge.source)) { dangling.push(edge); continue; }
+      const key = JSON.stringify([edge.source, edge.target, edge.medium, edge.provenance, edge.label]);
+      if (seen.has(key)) continue;
+      seen.add(key);
+      const e = {...edge, key, backbone: !!(nodes.get(edge.source).hub && nodes.get(edge.target).hub)};
+      edges.push(e);
+      if (!incoming.has(e.target)) incoming.set(e.target, []);
+      incoming.get(e.target).push(e);
+    }
+    edges.sort((a, b) => compare(a.key, b.key));
+    const groups = new Map(), parent = new Map(), groupOf = new Map(), cycles = new Set();
+    for (const n of nodes.values()) if (n.hub) groups.set(n.id, {node: n, clients: [], children: [], synthetic: false});
+    function reportedParent(n) {
+      const choices = (incoming.get(n.id) || []).filter(e => e.source !== n.id && nodes.get(e.source).hub)
+        .sort((a, b) => compare(a.source, b.source));
+      return choices.find(e => e.source === n.attachment)?.source || choices[0]?.source;
+    }
+    for (const n of nodes.values()) {
+      const upstream = reportedParent(n);
+      if (n.hub) { if (upstream) parent.set(n.id, upstream); continue; }
+      let group = upstream;
+      if (!group) {
+        group = '@unplaced:' + (n.site_id || '');
+        while (nodes.has(group)) group = '@' + group;
+        if (!groups.has(group)) groups.set(group, {synthetic: true, children: [], clients: [], node: {
+          id: group, name: 'Connection unknown', hub: true, role: 'unknown', site: n.site,
+          site_id: n.site_id, state: 'unknown', unreviewed: false, virtual: true
+        }});
+      }
+      groups.get(group).clients.push(n.id);
+      groupOf.set(n.id, group);
+    }
+    // Use a spanning forest for placement only. Every reported edge is retained for rendering.
+    for (const id of groups.keys()) {
+      const path = [], at = new Map(); let cursor = id;
+      while (parent.has(cursor)) {
+        if (at.has(cursor)) {
+          const cycle = path.slice(at.get(cursor));
+          cycle.forEach(key => cycles.add(key));
+          parent.delete([...cycle].sort(compare)[0]);
+          break;
+        }
+        at.set(cursor, path.length); path.push(cursor); cursor = parent.get(cursor);
+      }
+    }
+    for (const [child, upstream] of parent) groups.get(upstream).children.push(child);
+    const sortGroups = (a, b) => order(groups.get(a).node, groups.get(b).node);
+    for (const group of groups.values()) {
+      group.clients.sort(compare); group.children.sort(sortGroups);
+    }
+    const roots = [...groups.keys()].filter(id => !parent.has(id)).sort(sortGroups);
+    const signature = JSON.stringify({nodes: [...nodes.values()].sort((a,b)=>compare(a.id,b.id))
+      .map(n => [n.id, n.hub, n.role, n.site_id]), edges: edges.map(e=>[e.source,e.target,e.medium]), parents: [...parent].sort((a,b)=>compare(a[0],b[0])), roots});
+    return {nodes, edges, incoming, dangling, groups, groupOf, parent, roots, cycles, signature};
+  }
+
+  function bounds(rects) {
+    if (!rects.length) return {x: 0, y: 0, width: 300, height: 220};
+    const x = Math.min(...rects.map(r=>r.x)), y = Math.min(...rects.map(r=>r.y));
+    return {x, y, width: Math.max(...rects.map(r=>r.x+r.width))-x,
+      height: Math.max(...rects.map(r=>r.y+r.height))-y};
+  }
+
+  function layout(model, options = {}) {
+    const mobile = !!options.mobile, expanded = options.expanded || new Set(), pages = options.pages || new Map();
+    const pageSize = mobile ? 8 : 10;
+    const hubW = mobile ? 132 : 164, hubH = 68, clientW = mobile ? 148 : 172, clientH = 44;
+    const rowGap = 56, siblingGap = mobile ? 18 : 34, levelGap = mobile ? 28 : 52;
+    const positions = new Map(), blocks = new Map(), levels = new Map(), spans = new Map(), depth = new Map();
+    const sides = new Map();
+    function sideWalk(id, side) {
+      sides.set(id, side);
+      const children = model.groups.get(id).children;
+      children.forEach((child, i) => sideWalk(child, children.length > 1 ? (i < children.length / 2 ? -1 : 1) : side));
+    }
+    model.roots.forEach((id,i)=>sideWalk(id,model.roots.length > 1 && i < model.roots.length/2 ? -1 : 1));
+    function measure(id, level) {
+      const group = model.groups.get(id), total = group.clients.length;
+      const page = Math.min(Math.max(0,pages.get(id)||0), Math.max(0,Math.ceil(total/pageSize)-1));
+      const clients = expanded.has(id) ? group.clients.slice(page*pageSize,(page+1)*pageSize) : [];
+      const side = sides.get(id), wing = clients.length ? clientW + 44 : 0;
+      const height = Math.max(hubH, clients.length*rowGap-12);
+      blocks.set(id, {width:hubW+wing, height, side, clients, page, total, pageSize});
+      depth.set(id, level); levels.set(level, Math.max(levels.get(level)||0,height));
+      const widths = group.children.map(child=>measure(child,level+1));
+      const span = Math.max(hubW+wing, widths.reduce((a,b)=>a+b,0)+Math.max(0,widths.length-1)*siblingGap);
+      spans.set(id,span); return span;
+    }
+    model.roots.forEach(id=>measure(id,0));
+    let nextY = 16; const centers = new Map();
+    for (const [level,height] of [...levels].sort((a,b)=>a[0]-b[0])) {
+      centers.set(level,nextY+height/2); nextY += height+levelGap;
+    }
+    function place(id, left) {
+      const group=model.groups.get(id), block=blocks.get(id), span=spans.get(id), y=centers.get(depth.get(id));
+      const blockLeft=left+(span-block.width)/2;
+      const x=blockLeft+(block.side<0?block.width-hubW/2:hubW/2);
+      positions.set(id,{id,x:x-hubW/2,y:y-hubH/2,width:hubW,height:hubH,hub:true,group:id});
+      block.clients.forEach((client,i)=>{
+        const fraction=block.clients.length===1?0:i/(block.clients.length-1)*2-1;
+        const bow=18*Math.cos(fraction*Math.PI/2);
+        const cx=block.side>0?x+hubW/2+26+bow:x-hubW/2-26-bow-clientW;
+        positions.set(client,{id:client,x:cx,y:y+(i-(block.clients.length-1)/2)*rowGap-clientH/2,
+          width:clientW,height:clientH,hub:false,group:id,side:block.side});
+      });
+      const childrenWidth=group.children.reduce((sum,c)=>sum+spans.get(c),0)+Math.max(0,group.children.length-1)*siblingGap;
+      let childLeft=left+(span-childrenWidth)/2;
+      for(const child of group.children){place(child,childLeft);childLeft+=spans.get(child)+siblingGap;}
+    }
+    let rootLeft=16;
+    for(const id of model.roots){place(id,rootLeft);rootLeft+=spans.get(id)+siblingGap*2;}
+    const routes=[];
+    for(const e of model.edges){
+      const a=positions.get(e.source),b=positions.get(e.target);if(!a||!b)continue;
+      let path;
+      if(e.source===e.target){path=`M${a.x+a.width} ${a.y+15} c40 -30 40 70 0 40`;}
+      else if(e.backbone){
+        const ax=a.x+a.width/2,ay=a.y+a.height,bx=b.x+b.width/2,by=b.y;
+        const mid=(ay+by)/2;
+        path=`M${ax} ${ay} C${ax} ${mid} ${bx} ${mid} ${bx} ${by}`;
+      }else{
+        const side=b.side||1,ax=side>0?a.x+a.width:a.x,ay=a.y+a.height/2;
+        const bx=side>0?b.x:b.x+b.width,by=b.y+b.height/2;
+        path=`M${ax} ${ay} C${ax+side*14} ${ay} ${bx-side*14} ${by} ${bx} ${by}`;
+      }
+      routes.push({...e,path});
+    }
+    const clusterBounds=new Map([...blocks].map(([id,block])=>[id,bounds([positions.get(id),...block.clients.map(c=>positions.get(c))])]));
+    return {positions,blocks,routes,clusterBounds,pageSize,bounds:bounds([...positions.values()]),
+      infrastructureBounds:bounds([...positions.values()].filter(p=>p.hub))};
+  }
+
+  function upstream(model, id) {
+    const nodes=new Set([id]), edges=new Set(), pending=[id];
+    while(pending.length){for(const e of model.incoming.get(pending.pop())||[]){
+      edges.add(e.key);if(!nodes.has(e.source)){nodes.add(e.source);pending.push(e.source);}
+    }}
+    return {nodes,edges};
+  }
+
+  function category(n) {
+    if(n.hub) return ({external:'internet',gateway:'router',router:'router',ap:'ap',switch:'switch'})[n.role]||'network';
+    const value=[n.category,n.device_type,n.model,n.name].filter(Boolean).join(' ').toLowerCase();
+    if(/camera|doorbell|webcam|\bipc\b/.test(value))return 'camera';
+    if(/iphone|android|smartphone|\bphone\b|pixel/.test(value))return 'phone';
+    if(/ipad|tablet/.test(value))return 'tablet';
+    if(/macbook|laptop|notebook/.test(value))return 'laptop';
+    if(/computer|desktop|\bpc\b|\bmac\b|imac/.test(value))return 'computer';
+    if(/server|\bnas\b|storage|proxmox/.test(value))return 'server';
+    if(/printer/.test(value))return 'printer';
+    if(/television|\btv\b|roku|display/.test(value))return 'tv';
+    if(/speaker|sonos|audio/.test(value))return 'speaker';
+    if(/sensor|thermostat|plug|light|bulb|vacuum|feeder|kettle|iot|home assistant/.test(value))return 'iot';
+    return 'device';
+  }
+  return {normalize,layout,bounds,upstream,category};
+});

keywright_server/web/templates/_topology_render.js

@@ -0,0 +1,117 @@
+/* SVG presentation only. Geometry and topology are supplied by the pure layout module. */
+(function(root) {
+  'use strict';
+  const NS='http://www.w3.org/2000/svg';
+  const states={online:'Online (reported)',inactive:'Inactive (reported)',missing:'Not in latest snapshot',
+    old:'Not observed for 24h+',unknown:'Unknown',stale:'Stale / unverified'};
+  function svg(tag,attrs={},parent){
+    const node=document.createElementNS(NS,tag);
+    for(const [key,value] of Object.entries(attrs))node.setAttribute(key,String(value));
+    if(parent)parent.append(node);return node;
+  }
+  const paths={
+    internet:'M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20M2 12h20M12 2c6 6 6 14 0 20M12 2c-6 6-6 14 0 20',
+    router:'M4 11h16v9H4zM7 11V5m10 6V3M7 16h.1M11 16h.1M15 16h2',
+    switch:'M3 6h18v13H3zM6 10h3v3H6zM11 10h3v3h-3zM16 10h2v3h-2M6 16h12',
+    ap:'M2 8q10-10 20 0M5 12q7-7 14 0M8 16q4-4 8 0M12 20h.1',
+    network:'M9 3h6v5H9zM2 16h6v5H2zM16 16h6v5h-6zM12 8v4M5 16v-4h14v4',
+    camera:'M3 7h12v13H3zM15 11l6-3v11l-6-3M6 7l2-3h5l2 3',
+    phone:'M7 2h10v20H7zM10 5h4M11 19h2',
+    tablet:'M4 2h16v20H4zM11 19h2',
+    computer:'M2 3h20v14H2zM12 17v4M7 21h10',
+    laptop:'M5 3h14v14H5zM5 17l-3 4h20l-3-4',
+    server:'M4 2h16v8H4zM4 14h16v8H4zM7 6h.1M7 18h.1M11 6h6M11 18h6',
+    printer:'M7 8V2h10v6M5 17H2V8h20v9h-3M6 13h12v9H6zM17 11h.1',
+    tv:'M2 5h20v14H2zM8 22h8M8 1l4 4 4-4',
+    speaker:'M6 2h12v20H6zM9 6h6M12 11a4 4 0 1 0 0 8 4 4 0 0 0 0-8',
+    iot:'M9 3h6v3h3v3h3v6h-3v3h-3v3H9v-3H6v-3H3V9h3V6h3zM9 9h6v6H9z',
+    device:'M5 3h14v18H5zM9 7h6M9 11h6M11 17h2'
+  };
+  function icon(parent,category,x,y){
+    const group=svg('g',{transform:`translate(${x} ${y})`,class:'topo-icon','aria-hidden':'true'},parent);
+    svg('path',{d:paths[category]||paths.device},group);return group;
+  }
+  const canvas=document.createElement('canvas'),context=canvas.getContext('2d');
+  function width(text,font=13){context.font=`${font}px system-ui, sans-serif`;return context.measureText(text).width;}
+  function truncate(text,available,font=13){
+    if(width(text,font)<=available)return text;
+    let out=text;while(out.length&&width(out+'…',font)>available)out=out.slice(0,-1);
+    return out+'…';
+  }
+  function lines(text,available){
+    if(width(text)<=available)return [text];
+    const words=text.split(/(?<=[\s\-_/])/);let first='';
+    while(words.length&&width(first+words[0])<=available)first+=words.shift();
+    if(!first){while(text.length&&width(first+text[0])<=available){first+=text[0];text=text.slice(1);}return [first,truncate(text,available)];}
+    return [first.trim(),truncate(words.join('').trim(),available)];
+  }
+  function text(parent,value,attrs){const t=svg('text',attrs,parent);t.textContent=value;return t;}
+  class Renderer {
+    constructor(scene){this.scene=scene;this.nodeElements=new Map();this.edgeElements=new Map();}
+    draw(model,geometry,ui){
+      const active=document.activeElement?.dataset?.id;
+      this.scene.replaceChildren();this.nodeElements.clear();this.edgeElements.clear();
+      const edges=svg('g',{'aria-hidden':'true'},this.scene);
+      for(const route of geometry.routes){
+        const line=svg('path',{d:route.path,class:`topo-edge ${route.backbone?'backbone':'client'} ${route.medium||'unknown'}${route.historical?' historical':''}`,
+          'data-edge':route.key},edges);
+        const a=model.nodes.get(route.source),b=model.nodes.get(route.target);
+        const title=svg('title',{},line);title.textContent=`${a.name} → ${b.name} · ${route.label||route.medium} · ${route.provenance||'Source unknown'}`;
+        this.edgeElements.set(route.key,line);
+      }
+      for(const [id,p] of geometry.positions){
+        const group=model.groups.get(id),n=model.nodes.get(id)||group?.node;if(!n)continue;
+        const block=geometry.blocks.get(id),synthetic=!!group?.synthetic;
+        const label=synthetic?`${n.name}, ${block.total} devices. Select to explore.`:
+          `${n.name}, ${n.virtual?'not monitored':states[n.state]||'Unknown'}${n.unreviewed?', unreviewed':''}${p.hub?`, ${block.total} clients. Select to focus.`:''}`;
+        const g=svg('g',{transform:`translate(${p.x} ${p.y})`,class:`topo-node ${p.hub?'hub':'client'} ${n.state||'unknown'}${synthetic?' unplaced':''}`,
+          role:'button',tabindex:0,'aria-label':label,'data-id':id,'data-action':'select','data-x':p.x,'data-y':p.y},this.scene);
+        svg('rect',{width:p.width,height:p.height,rx:p.hub?12:8,class:'node-surface'},g);
+        svg('rect',{x:0,y:10,width:3,height:p.height-20,rx:1.5,class:'state-rail'},g);
+        icon(g,synthetic?'device':KeywrightTopology.category(n),10,p.hub?13:10);
+        const available=p.width-47;
+        if(p.hub){
+          const nameLines=lines(n.name,available);
+          nameLines.forEach((line,i)=>text(g,line,{x:40,y:nameLines.length>1?23+i*16:29,class:'node-name'}));
+          const count=block.total?`${block.total} client${block.total===1?'':'s'} ${ui.expanded.has(id)?'−':'+'}`:
+            n.role==='external'?'Not monitored':({gateway:'Gateway',router:'Router',switch:'Switch',ap:'Access point'})[n.role]||'Infrastructure';
+          text(g,count,{x:10,y:57,class:'node-meta'});
+          if(block.total)svg('circle',{cx:p.width-13,cy:55,r:3,class:ui.expanded.has(id)?'expanded-dot':'collapsed-dot'},g);
+        }else{
+          text(g,truncate(n.name,available),{x:40,y:19,class:'node-name'});
+          text(g,truncate(n.addresses[0]||states[n.state]||'Unknown',available,11),{x:40,y:34,class:'node-meta'});
+        }
+        if(n.unreviewed){svg('circle',{cx:p.width-5,cy:5,r:5,class:'review-dot'},g);}
+        if(!synthetic&&p.hub&&!model.parent.has(id)&&n.role!=='external'&&n.role!=='gateway'&&n.role!=='router'){
+          const mark=svg('circle',{cx:p.width-12,cy:12,r:3,class:'unknown-uplink'},g);
+          const title=svg('title',{},mark);title.textContent='Upstream connection not reported';
+        }
+        const title=svg('title',{},g);title.textContent=label;
+        this.nodeElements.set(id,g);
+      }
+      this.emphasize(model,ui);
+      if(active&&this.nodeElements.has(active))this.nodeElements.get(active).focus({preventScroll:true});
+    }
+    emphasize(model,ui){
+      const selected=ui.selected,branch=ui.branch;
+      const ancestry=selected&&model.nodes.has(selected)?KeywrightTopology.upstream(model,selected):
+        branch&&model.nodes.has(branch)?KeywrightTopology.upstream(model,branch):{nodes:new Set(),edges:new Set()};
+      const related=new Set(ancestry.nodes);
+      if(branch){related.add(branch);for(const id of model.groups.get(branch)?.clients||[])related.add(id);}
+      for(const [id,g] of this.nodeElements){
+        const n=model.nodes.get(id)||model.groups.get(id)?.node;
+        const matches=!ui.status||ui.status==='unreviewed'&&n.unreviewed||
+          ui.status==='inactive'&&['inactive','missing'].includes(n.state)||
+          ui.status==='unknown'&&['unknown','stale'].includes(n.state)||n.state===ui.status;
+        g.classList.toggle('selected',id===selected);
+        g.classList.toggle('on-path',ancestry.nodes.has(id));
+        g.classList.toggle('dimmed',!!branch&&!related.has(id)||!matches);
+      }
+      for(const e of model.edges){const line=this.edgeElements.get(e.key);if(!line)continue;
+        line.classList.toggle('on-path',ancestry.edges.has(e.key));
+        line.classList.toggle('dimmed',!!branch&&!ancestry.edges.has(e.key)&&e.source!==branch);
+      }
+    }
+  }
+  root.KeywrightTopologyView={Renderer,svg,states,truncate};
+})(globalThis);

keywright_server/web/templates/access.html

@@ -0,0 +1,119 @@
+{% extends "base.html" %}{% block title %}Access{% endblock %}{% block body %}
+<style>
+.acc-pick{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}.acc-pick .field{min-width:180px;flex:1}
+.acc-group{margin-top:14px}.acc-group-head{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;margin-bottom:6px}
+.acc-group-head h2{margin:0;font-size:16px;text-transform:capitalize}
+.acc-row{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;justify-content:space-between;padding:9px 0;border-top:1px solid var(--line)}
+.acc-row.changed{background:rgba(90,169,255,.07)}
+.acc-name{min-width:0;flex:1 1 240px}.acc-name b{word-break:break-all}.acc-name code{font-size:11px;word-break:break-all}
+.seg{display:inline-flex;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;flex:0 0 auto}
+.seg label{margin:0;padding:6px 11px;font-size:13px;cursor:pointer;color:var(--mut);border-left:1px solid var(--line)}
+.seg label:first-of-type{border-left:0}.seg input{position:absolute;opacity:0;pointer-events:none}
+.seg input:checked+span{color:var(--fg);font-weight:600}
+.seg label:has(input[value=allow]:checked){background:rgba(46,204,113,.16)}
+.seg label:has(input[value=deny]:checked){background:rgba(231,76,60,.18)}
+.seg label:has(input[value=ask]:checked){background:rgba(90,169,255,.12)}
+.seg input:focus-visible+span{outline:2px solid var(--acc);outline-offset:2px}
+.acc-bulk{display:flex;gap:4px;flex-wrap:wrap}
+.acc-save{position:sticky;bottom:0;z-index:5;display:flex;gap:10px;align-items:center;justify-content:space-between;padding:10px 0;background:var(--bg)}
+@media (max-width:700px){.acc-save{bottom:62px}}
+</style>
+<h1>Access</h1>
+<p class="page-intro">Everything a server offers, and what one agent may do with each. <b>Allow</b> and <b>Deny</b> are standing rules; <b>Ask</b> means no rule, so the resource default decides (usually a prompt on your phone). Saving writes only what changed.</p>
+
+{% if ag %}
+<section class="card" aria-label="Agent settings">
+<div class="row access-heading"><b>{{ ag.name }}</b>{% if ag.disabled %}<span class="pill deny">disabled</span>{% else %}<span class="pill ok">active</span>{% endif %}</div>
+<p class="small mut">Token <span class="mono">{{ ag.token_prefix }}…</span> · Last seen {{ ag.last_seen_at.strftime('%m-%d %H:%M') if ag.last_seen_at else 'never' }}</p>
+{% if ag.note %}<p class="small">{{ ag.note }}</p>{% endif %}
+<div class="row">
+<form method="post" action="/ui/agents/{{ ag.id }}/rotate" onsubmit="return confirm('Rotate token? The old one stops working immediately.')"><button class="btn sm">Rotate token</button></form>
+<form method="post" action="/ui/agents/{{ ag.id }}/delete" onsubmit="return confirm('Delete agent and all its grants/rules?')"><button class="btn sm bad">Delete agent</button></form>
+</div>
+</section>
+{% endif %}
+
+<form method="get" action="/ui/access" class="card acc-pick">
+<div class="field"><label for="acc-res">Resource</label><select id="acc-res" name="resource" onchange="if(this.form.scope)this.form.scope.disabled=true;this.form.submit()">
+{% for r in resources %}<option value="{{ r.id }}" {{ 'selected' if res and r.id == res.id }}>{{ r.kind|upper }} · {{ r.name }}</option>{% endfor %}</select></div>
+<div class="field"><label for="acc-agent">Agent</label><select id="acc-agent" name="agent" onchange="this.form.submit()">
+<option value="">Every agent</option>{% for a in agents %}<option value="{{ a.id }}" {{ 'selected' if ag and a.id == ag.id }}>{{ a.name }}</option>{% endfor %}</select></div>
+{% if res and res.kind == 'mcp' %}<div class="field"><label for="acc-scope">Scope <span class="mut">(optional)</span></label>
+<input id="acc-scope" type="text" name="scope" value="{{ scope }}" placeholder="{{ (arg_keys[0] ~ '=value') if arg_keys else 'set argument keys on the resource first' }}"></div>{% endif %}
+<button class="btn">Show</button>
+{% if res and res.kind == 'mcp' %}<button class="btn" name="refresh" value="1">Refresh tool list</button>{% endif %}
+</form>
+{% if res and res.kind == 'mcp' %}<p class="small mut">Scope narrows each rule to calls with that argument (for example <code>account_name=agents</code>), on the tools that take it. Keys: {{ arg_keys|join(', ') or 'none' }}. Resource default: <b>{{ res.default_mode }}</b>.</p>{% endif %}
+
+{% if not resources %}<div class="card"><p class="mut">No MCP servers or LLM gateways yet. <a href="/ui/resources">Add one</a>.</p></div>{% endif %}
+{% if error %}<div class="card"><b style="color:var(--bad)">{{ error }}</b></div>{% endif %}
+
+{% if drift %}
+<div class="card" role="status">
+<b>Tool changes on {{ res.name }}</b> <span class="small mut">since the baseline of {{ (res.config.tools_seen_at or '')[:16] }}, found {{ (drift.at or '')[:16] }}</span>
+{% if drift.added %}<div class="small">New: {% for t in drift.added %}<code>{{ t }}</code> {% endfor %}<span class="mut">(no rule covers them, so they ask)</span></div>{% endif %}
+{% if drift.removed %}<div class="small">Removed: {% for t in drift.removed %}<code>{{ t }}</code> {% endfor %}</div>{% endif %}
+{% for c in drift.changed %}<div class="small">Changed: <code>{{ c.tool }}</code>{% if c.new_args %} · new arguments <b>{{ c.new_args|join(', ') }}</b> <span class="mut">(not checked by any rule until listed in the resource's argument keys)</span>{% endif %}{% if c.dropped_args %} · dropped {{ c.dropped_args|join(', ') }}{% endif %}</div>{% endfor %}
+<form method="post" action="/ui/resources/{{ res.id }}/tools/accept" style="margin-top:8px"><input type="hidden" name="agent" value="{{ ag.id if ag else '' }}"><button class="btn sm">I've reviewed these; make today's list the baseline</button></form>
+</div>
+{% endif %}
+
+{% if groups %}
+<form method="post" action="/ui/access" id="acc-form">
+<input type="hidden" name="resource" value="{{ res.id }}"><input type="hidden" name="agent" value="{{ ag.id if ag else '' }}"><input type="hidden" name="scope" value="{{ scope }}">
+{% for group, rows in groups.items() %}
+<section class="card acc-group" aria-labelledby="g-{{ loop.index }}">
+<div class="acc-group-head"><h2 id="g-{{ loop.index }}">{{ group }} <span class="mut small">{{ rows|length }}</span></h2>
+{% if group != 'gone' %}<div class="acc-bulk" data-group="{{ loop.index }}"><span class="small mut">All:</span>{% for s in ['allow','ask','deny'] %}<button type="button" class="btn sm" data-set="{{ s }}">{{ s|capitalize }}</button>{% endfor %}</div>{% endif %}</div>
+{% set gi = loop.index %}
+{% for r in rows %}
+<div class="acc-row" data-group="{{ gi }}" data-initial="{{ r.state }}">
+<div class="acc-name"><b>{{ r.name }}</b>
+{% if r.flag == 'new' %} <span class="pill pending">new</span>{% elif r.flag == 'changed' %} <span class="pill high">changed</span>{% elif r.flag == 'gone' %} <span class="pill revoked">gone</span>{% endif %}
+{% if r.description %}<div class="small mut">{{ r.description }}</div>{% endif %}
+<div><code>{{ r.pattern }}</code></div>
+{% if r.new_args %}<div class="small" style="color:var(--warn)">New arguments: {{ r.new_args|join(', ') }}</div>{% endif %}
+{% if r.everyone and r.everyone != 'ask' %}<div class="small">Every-agent rule: <span class="pill {{ r.everyone }}">{{ r.everyone }}</span></div>{% endif %}
+{% for c in r.covered_by %}<div class="small">Also decided by <code>{{ c }}</code></div>{% endfor %}
+{% if r.other_rules %}<div class="small mut">{{ r.other_rules }} other rule(s) on this tool (qualified or constrained), <a href="/ui/policies">see Rules</a></div>{% endif %}
+</div>
+<div class="seg" role="radiogroup" aria-label="{{ r.name }}">
+{% for s in ['allow','ask','deny'] %}<label><input type="radio" name="s:{{ r.name }}" value="{{ s }}" {{ 'checked' if r.state == s }}><span>{{ s|capitalize }}</span></label>{% endfor %}
+</div>
+</div>
+{% endfor %}
+</section>
+{% endfor %}
+<div class="acc-save"><span class="small mut" id="acc-count" role="status">No changes</span><button class="btn p">Save changes</button></div>
+</form>
+{% endif %}
+{% endblock %}
+{% block scripts %}
+<script>
+(function () {
+  var form = document.getElementById('acc-form');
+  if (!form) return;
+  var count = document.getElementById('acc-count');
+  function update() {
+    var n = 0;
+    form.querySelectorAll('.acc-row').forEach(function (row) {
+      var picked = row.querySelector('input:checked');
+      var changed = picked && picked.value !== row.dataset.initial;
+      row.classList.toggle('changed', !!changed);
+      if (changed) n++;
+    });
+    count.textContent = n ? n + ' change' + (n === 1 ? '' : 's') + ' to save' : 'No changes';
+  }
+  form.addEventListener('change', update);
+  form.querySelectorAll('.acc-bulk').forEach(function (bulk) {
+    bulk.addEventListener('click', function (e) {
+      var s = e.target.dataset && e.target.dataset.set;
+      if (!s) return;
+      form.querySelectorAll('.acc-row[data-group="' + bulk.dataset.group + '"] input[value="' + s + '"]')
+        .forEach(function (input) { input.checked = true; });
+      update();
+    });
+  });
+})();
+</script>
+{% endblock %}

keywright_server/web/templates/agents.html

@@ -0,0 +1,49 @@
+{% extends "base.html" %}{% block title %}Agents{% endblock %}{% block body %}
+<style>
+.agent-create>summary{cursor:pointer;min-height:40px;padding:8px 0;color:var(--acc);font-weight:600}
+.agent-create{margin-bottom:12px}.agent-create .toolbar{margin:8px 0 16px}
+.agent-list{list-style:none;margin:0 0 16px;padding:0 12px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r)}
+.agent-item{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
+.agent-item:last-child{border-bottom:0}.agent-info{flex:1;min-width:0}
+.agent-heading{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}.agent-heading b{font-size:14px;overflow-wrap:anywhere}
+.agent-meta{display:flex;flex-wrap:wrap;gap:0 12px;margin-top:3px;color:var(--mut);font-size:12px}.agent-meta .mono{font-size:12px}
+.agent-note{margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--mut);font-size:12px}
+.agent-actions{display:flex;gap:6px;flex-shrink:0}
+@media(max-width:600px){.agent-actions{flex-direction:column;gap:4px}.agent-actions .btn{width:100%;min-height:40px}.agent-item{padding:10px 0;gap:10px}}
+</style>
+<h1>Agents <span class="small mut">{{ rows|length }}</span></h1>
+<p class="page-intro">Manage agent access and connect your MCP clients.</p>
+{% if new_token %}
+<div class="card token">
+<b>New token · shown once</b>
+<pre>{{ new_token }}</pre>
+<div class="small mut">Save this token now. Creating or rotating a token is the only time it is shown.</div>
+</div>
+{% include "_agent_setup.html" %}
+{% endif %}
+<details class="agent-create" {{ 'open' if not rows }}><summary>New agent</summary>
+<form method="post" action="/ui/agents" class="row toolbar">
+<div class="field"><label for="agent-name">Agent name</label><input id="agent-name" type="text" name="name" placeholder="e.g. ai-vm-codex" required></div>
+<div class="field"><label for="agent-note">Note <span class="mut">(optional)</span></label><input id="agent-note" type="text" name="note" placeholder="What this agent is used for"></div>
+<button class="btn p">Create agent</button></form>
+</details>
+{% if rows %}
+<ul class="agent-list" aria-label="Agents">
+{% for a in rows %}
+<li class="agent-item">
+<div class="agent-info">
+<div class="agent-heading"><b>{{ a.name }}</b>{% if a.disabled %}<span class="pill deny">disabled</span>{% else %}<span class="pill ok">active</span>{% endif %}</div>
+<div class="agent-meta"><span>Seen {{ a.last_seen_at.strftime('%m-%d %H:%M') if a.last_seen_at else 'never' }}</span><span class="mono" aria-label="Token prefix">{{ a.token_prefix }}…</span></div>
+{% if a.note %}<div class="agent-note" title="{{ a.note }}">{{ a.note }}</div>{% endif %}
+</div>
+<div class="agent-actions">
+<a class="btn sm" href="/ui/access?agent={{ a.id }}" aria-label="Access for {{ a.name }}">Access</a>
+{% if a.disabled %}<form method="post" action="/ui/agents/{{ a.id }}/enable"><button class="btn sm" aria-label="Enable {{ a.name }}">Enable</button></form>
+{% else %}<form method="post" action="/ui/agents/{{ a.id }}/disable"><button class="btn sm" aria-label="Disable {{ a.name }}">Disable</button></form>{% endif %}
+</div>
+</li>
+{% endfor %}
+</ul>
+{% else %}<p class="mut">No agents yet. Create one above to get a connection token.</p>{% endif %}
+{% if not new_token %}{% include "_agent_setup.html" %}{% endif %}
+{% endblock %}

keywright_server/web/templates/audit.html

@@ -0,0 +1,6 @@
+{% extends "base.html" %}{% block title %}Audit{% endblock %}{% block body %}
+<h1>Audit log</h1>
+<p class="page-intro">Access decisions and operations across your infrastructure. <a href="/ui/friction">Review approval friction</a>.</p>
+<form method="get" class="row toolbar" role="search"><input type="text" name="q" value="{{ q }}" placeholder="Search agent, tool, pattern, or detail…" aria-label="Filter audit log"><button class="btn">Filter</button>{% if q %}<a class="btn" href="/ui/audit">Clear</a>{% endif %}</form>
+<div class="card activity-list">{% for e in rows %}{% include "_activity_row.html" %}{% else %}<p class="mut collection-empty">No matching audit events.</p>{% endfor %}</div>
+{% endblock %}