Files
aipackage/cezen-portal/app-studio.html
T

42 lines
21 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>App Studio — Nexus One AI</title>
<link rel="stylesheet" href="style.css?v=12">
<style>
.studio-shell{max-width:1440px;margin:0 auto;padding:30px 36px 60px}.studio-head{display:flex;justify-content:space-between;gap:24px;align-items:flex-start;margin-bottom:24px}.studio-head h1{font-size:30px;margin:0 0 8px;color:var(--text-primary)}.studio-head p{margin:0;color:var(--text-secondary);max-width:720px;line-height:1.6}.prototype-pill{font-size:11px;font-weight:700;color:#92400e;background:#fffbeb;border:1px solid #fde68a;border-radius:99px;padding:6px 10px;white-space:nowrap}.studio-grid{display:grid;grid-template-columns:300px minmax(0,1fr);gap:20px}.side-card,.stage-card{background:var(--surface,#fff);border:1px solid var(--border);border-radius:16px;box-shadow:0 8px 30px rgba(15,23,42,.04)}.side-card{padding:18px;height:max-content;position:sticky;top:84px}.project-label{font-size:10px;font-weight:800;letter-spacing:.08em;color:var(--text-tertiary);text-transform:uppercase;margin-bottom:7px}.project-name{font-size:17px;font-weight:750;color:var(--text-primary);margin-bottom:4px}.project-meta{font-size:12px;color:var(--text-tertiary);margin-bottom:18px}.lifecycle{display:flex;flex-direction:column;gap:3px}.life-step{display:flex;align-items:center;gap:10px;border:0;background:transparent;text-align:left;width:100%;padding:10px;border-radius:9px;color:var(--text-secondary);font:inherit;cursor:pointer}.life-step:hover{background:var(--bg)}.life-step.active{background:var(--brand-lt);color:var(--brand);font-weight:700}.life-step.done .step-dot{background:#16a34a;color:white;border-color:#16a34a}.step-dot{width:24px;height:24px;border:1px solid var(--border);border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:800;flex:none}.stage-card{padding:26px;min-height:590px}.stage{display:none}.stage.active{display:block}.stage-kicker{font-size:11px;color:var(--brand);text-transform:uppercase;letter-spacing:.08em;font-weight:800;margin-bottom:8px}.stage h2{font-size:23px;color:var(--text-primary);margin:0 0 8px}.stage-intro{color:var(--text-secondary);line-height:1.6;margin:0 0 24px}.field{margin-bottom:18px}.field label{display:block;font-size:12px;font-weight:700;color:var(--text-primary);margin-bottom:7px}.field input,.field textarea,.field select{width:100%;box-sizing:border-box;border:1px solid var(--border);border-radius:10px;background:var(--surface,#fff);color:var(--text-primary);font:inherit;padding:11px 13px}.field textarea{min-height:128px;resize:vertical;line-height:1.55}.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-lt)}.builder-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.builder{border:1.5px solid var(--border);border-radius:13px;padding:16px;cursor:pointer;background:var(--surface,#fff);transition:.15s}.builder:hover{border-color:var(--brand)}.builder.selected{border-color:var(--brand);background:var(--brand-lt)}.builder input{display:none}.builder-top{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:7px}.builder-name{font-weight:750;color:var(--text-primary)}.builder-badge{font-size:10px;font-weight:800;padding:3px 7px;border-radius:99px;background:var(--bg);color:var(--text-tertiary)}.builder.selected .builder-badge{background:var(--brand);color:white}.builder p{font-size:12px;color:var(--text-secondary);line-height:1.5;margin:0}.actions{display:flex;justify-content:flex-end;gap:10px;margin-top:24px}.btn{border:1px solid var(--border);background:var(--surface,#fff);color:var(--text-primary);border-radius:9px;padding:10px 17px;font:inherit;font-size:13px;font-weight:700;cursor:pointer}.btn:hover{border-color:var(--brand);color:var(--brand)}.btn.main{background:var(--brand);border-color:var(--brand);color:white}.btn.main:hover{filter:brightness(.95)}.btn:disabled{opacity:.45;cursor:not-allowed}.spec-list{display:grid;gap:10px}.spec-row{display:flex;gap:11px;padding:13px;border:1px solid var(--border);border-radius:10px;background:var(--bg)}.spec-row span:first-child{color:#16a34a;font-weight:900}.spec-row strong{display:block;font-size:13px;color:var(--text-primary);margin-bottom:3px}.spec-row small{color:var(--text-secondary);line-height:1.45}.build-layout{display:grid;grid-template-columns:1.25fr .75fr;gap:14px}.terminal{background:#0b1220;color:#d6e4ff;border-radius:12px;min-height:330px;padding:16px;font:12px/1.7 ui-monospace,SFMono-Regular,Menlo,monospace;overflow:auto}.term-head{display:flex;justify-content:space-between;color:#8ba3c7;border-bottom:1px solid #23314b;padding-bottom:10px;margin-bottom:10px}.term-line .ok{color:#4ade80}.term-line .ai{color:#c4b5fd}.agent-panel{border:1px solid var(--border);border-radius:12px;padding:16px}.agent-panel h3{font-size:14px;margin:0 0 8px}.agent-panel p{font-size:12px;color:var(--text-secondary);line-height:1.5}.agent-task{background:var(--brand-lt);border-radius:9px;padding:11px;font-size:12px;color:var(--text-primary);margin:13px 0}.progress{height:6px;background:var(--bg);border-radius:99px;overflow:hidden}.progress span{display:block;height:100%;background:var(--brand);width:0;transition:width .5s}.preview-frame{border:1px solid var(--border);border-radius:12px;overflow:hidden;background:white}.browser-bar{height:38px;background:#eef2f7;border-bottom:1px solid #dce3ec;display:flex;align-items:center;gap:7px;padding:0 12px}.browser-dot{width:8px;height:8px;border-radius:50%;background:#cbd5e1}.browser-url{margin-left:7px;background:white;border:1px solid #dce3ec;border-radius:6px;padding:4px 10px;font-size:10px;color:#64748b;flex:1}.preview-frame iframe{display:block;width:100%;height:350px;border:0}.approval-box{border:1px solid #fde68a;background:#fffbeb;border-radius:13px;padding:18px}.approval-box h3{color:#92400e;margin:0 0 8px;font-size:16px}.approval-box p{color:#a16207;font-size:13px;line-height:1.5}.check-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin:16px 0}.check{background:white;border:1px solid #fde68a;border-radius:8px;padding:10px;font-size:12px;color:#713f12}.publish-success{text-align:center;padding:45px 20px}.success-icon{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;background:#dcfce7;color:#15803d;font-size:30px;margin:0 auto 16px}.publish-success h2{font-size:25px}.app-url{display:inline-block;font:12px ui-monospace,monospace;background:var(--bg);padding:9px 13px;border-radius:7px;color:var(--brand);margin:5px 0 15px}.toast{position:fixed;right:24px;bottom:24px;background:#0f172a;color:white;padding:12px 16px;border-radius:9px;font-size:12px;opacity:0;transform:translateY(10px);pointer-events:none;transition:.2s}.toast.show{opacity:1;transform:none}@media(max-width:900px){.studio-grid{grid-template-columns:1fr}.side-card{position:static}.lifecycle{display:grid;grid-template-columns:repeat(3,1fr)}.life-step{font-size:11px}.build-layout{grid-template-columns:1fr}}@media(max-width:620px){.studio-shell{padding:22px 16px}.builder-grid,.check-grid{grid-template-columns:1fr}.lifecycle{grid-template-columns:repeat(2,1fr)}}
.visual-builder{margin-top:20px;border:1px solid var(--border);border-radius:14px;overflow:hidden}.visual-head{display:flex;justify-content:space-between;align-items:center;padding:13px 15px;border-bottom:1px solid var(--border);background:var(--bg)}.visual-head strong{font-size:13px}.visual-tools{display:flex;align-items:center;gap:6px}.visual-tools button{border:1px solid var(--border);background:white;border-radius:6px;padding:5px 8px;font-size:10px;cursor:pointer}.visual-version{font-size:11px;color:var(--text-tertiary)}.visual-layout{display:grid;grid-template-columns:155px minmax(260px,1fr) 210px;min-height:330px}.component-palette,.property-panel{padding:12px;background:var(--bg)}.component-palette{border-right:1px solid var(--border)}.property-panel{border-left:1px solid var(--border)}.panel-label{font-size:10px;font-weight:800;color:var(--text-tertiary);text-transform:uppercase;margin-bottom:9px}.palette-btn{display:block;width:100%;text-align:left;border:1px solid var(--border);background:white;border-radius:7px;padding:8px;margin-bottom:6px;font-size:11px;cursor:pointer}.design-canvas{padding:14px;background:#eef2f7}.page-tabs{display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap}.page-tab{border:1px solid var(--border);background:white;border-radius:7px;padding:6px 9px;font-size:11px;cursor:pointer}.page-tab.active{background:var(--brand);color:white}.canvas-page{background:white;border:1px solid #d9e0e9;border-radius:10px;min-height:250px;padding:15px}.canvas-component{border:1px solid var(--border);border-radius:8px;padding:10px;margin-bottom:8px;font-size:12px;cursor:pointer}.canvas-component.selected{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-lt)}.canvas-component small{display:block;color:var(--text-tertiary);margin-top:3px}.property-panel input,.property-panel select{width:100%;box-sizing:border-box;border:1px solid var(--border);border-radius:7px;padding:7px;font-size:11px;margin-bottom:8px;background:white}.property-actions{display:flex;gap:5px}.property-actions button{flex:1;border:1px solid var(--border);background:white;border-radius:6px;padding:6px;font-size:10px;cursor:pointer}.schema-panel{border-top:1px solid var(--border);margin-top:13px;padding-top:12px}.schema-fields{font-size:10px;color:var(--text-secondary);margin-bottom:7px}.instant-preview{display:none;border-top:1px solid var(--border);padding:12px;background:#eef2f7}.instant-preview.open{display:block}.instant-preview iframe{width:100%;height:420px;border:1px solid var(--border);border-radius:9px;background:white}@media(max-width:1100px){.visual-layout{grid-template-columns:130px 1fr}.property-panel{grid-column:1/-1;border-left:0;border-top:1px solid var(--border)}}@media(max-width:620px){.visual-layout{display:block}.component-palette{border-right:0}.palette-btn{display:inline-block;width:auto}.property-panel{border-left:0}.visual-head{align-items:flex-start;gap:8px}.visual-tools{flex-wrap:wrap;justify-content:flex-end}}
</style>
</head>
<body>
<header class="topnav"><a href="index.html" class="brand">Nexus One <span>AI</span></a><nav><a href="index.html">Home</a><a href="quickstart.html">Quick Start</a><a href="prompts.html">Prompt Library</a><div class="nav-dropdown"><button class="nav-drop-btn active">AI Tools ▾</button><div class="nav-drop-menu">
<span class="nav-drop-cat">MODEL BUILD /</span>
<a href="dataset-creation.html">Dataset Creation</a>
<a href="training.html">Model Training</a><span class="nav-drop-cat">BUILD /</span><a href="app-studio.html" class="active">App Studio</a><a href="applications.html">Applications</a><span class="nav-drop-cat">ENABLED /</span><a href="tool-openwebui.html">Open WebUI</a><a href="nexus-notebook.html">Nexus Notebook</a><a href="nexus-compare.html">Nexus Compare</a><a href="tool-jupyter.html">Jupyter Notebook</a></div></div></nav><div class="nav-right"><div id="nav-org-logo" class="nav-org-logo"></div><span class="nav-tier-badge" data-brand="tier" data-tier-slug="basic">Basic Tier</span></div></header>
<main class="studio-shell">
<div class="studio-head"><div><h1>Nexus One App Studio</h1><p>Describe an application, choose how it should be built, preview it safely, and publish it through one governed lifecycle.</p></div><span class="prototype-pill">Interactive prototype</span></div>
<div class="studio-grid">
<aside class="side-card"><div class="project-label">Current project</div><div class="project-name" id="side-name">Untitled application</div><div class="project-meta" id="side-meta">Draft · Not saved</div><div class="lifecycle" id="lifecycle"></div></aside>
<section class="stage-card">
<div class="stage active" data-stage="0"><div class="stage-kicker">Step 1 · Idea</div><h2>What should Nexus build?</h2><p class="stage-intro">Start with the business outcome. App Studio will turn it into a structured application project.</p><div class="field"><label>Application name</label><input id="app-name" placeholder="e.g. Vendor Approval Hub" value="Vendor Approval Hub"></div><div class="field"><label>Describe the application</label><textarea id="app-description">Create an internal application where employees submit new vendor requests, finance reviews budget information, and procurement approves or rejects each vendor. Include a dashboard showing requests by status and maintain a complete audit history.</textarea></div><div class="actions"><button class="btn main" onclick="goStage(1)">Create specification →</button></div></div>
<div class="stage" data-stage="1"><div class="stage-kicker">Step 2 · Spec Kit</div><h2>Requirements and acceptance criteria</h2><p class="stage-intro">The generated specification remains editable and becomes the shared contract for the coding agent, visual builders, testing and approval.</p><div class="spec-list"><div class="spec-row"><span>✓</span><div><strong>Vendor request intake</strong><small>Employees can submit company, contact, category, budget and supporting-document information.</small></div></div><div class="spec-row"><span>✓</span><div><strong>Role-based review</strong><small>Finance reviews budget details before procurement can make the final decision.</small></div></div><div class="spec-row"><span>✓</span><div><strong>Status dashboard</strong><small>Authorized users can filter requests by owner, department, stage and decision.</small></div></div><div class="spec-row"><span>✓</span><div><strong>Governed actions</strong><small>Every submission, edit, approval and rejection is attributed and retained in the audit trail.</small></div></div></div><div class="field" style="margin-top:18px"><label>Additional acceptance criteria</label><textarea id="criteria" style="min-height:82px">A request cannot be approved without finance review. Rejected requests must include a reason. Only procurement leads can publish configuration changes.</textarea></div><div class="actions"><button class="btn" onclick="goStage(0)">Back</button><button class="btn main" onclick="goStage(2)">Approve specification →</button></div></div>
<div class="stage" data-stage="2"><div class="stage-kicker">Step 3 · Builder</div><h2>Design and build</h2><p class="stage-intro">Compose the application visually, then use the VS Agent to implement the same versioned design contract in the governed repository.</p><div class="builder-grid" id="builders"><label class="builder selected"><input type="radio" name="builder" value="VS Agent" checked><div class="builder-top"><span class="builder-name">Visual Builder + VS Agent</span><span class="builder-badge">Enterprise path</span></div><p>Design pages and data bindings visually, then refine the generated source with the appliance-local VS Agent.</p></label><label class="builder"><input type="radio" name="builder" value="OpenHands"><div class="builder-top"><span class="builder-name">OpenHands</span><span class="builder-badge">Planned</span></div><p>Delegate a complete implementation task and review the resulting commits and test evidence.</p></label><label class="builder"><input type="radio" name="builder" value="Appsmith"><div class="builder-top"><span class="builder-name">Appsmith</span><span class="builder-badge">Integration</span></div><p>Import or connect an existing Appsmith application through the governed lifecycle.</p></label><label class="builder"><input type="radio" name="builder" value="Langflow"><div class="builder-top"><span class="builder-name">Langflow</span><span class="builder-badge">AI Flow</span></div><p>Compose AI agents, retrieval pipelines and model-powered application workflows.</p></label></div><div class="visual-builder"><div class="visual-head"><strong>Visual application contract</strong><div class="visual-tools"><button onclick="undoDesign()">Undo</button><button onclick="showDesignHistory()">History</button><button onclick="previewDesign()">Instant preview</button><span class="visual-version" id="design-version">Version 1 · unsaved</span></div></div><div class="visual-layout"><aside class="component-palette"><div class="panel-label">Add component</div><button class="palette-btn" onclick="addComponent('heading')">Heading</button><button class="palette-btn" onclick="addComponent('text')">Text</button><button class="palette-btn" onclick="addComponent('section')">Section</button><button class="palette-btn" onclick="addComponent('stat')">Metric</button><button class="palette-btn" onclick="addComponent('input')">Input</button><button class="palette-btn" onclick="addComponent('select')">Select</button><button class="palette-btn" onclick="addComponent('button')">Action button</button><button class="palette-btn" onclick="addComponent('table')">Data table</button></aside><main class="design-canvas"><div class="page-tabs" id="page-tabs"></div><div class="canvas-page" id="design-canvas"></div></main><aside class="property-panel"><div class="panel-label">Properties</div><div id="component-properties"><small>Select a component.</small></div><div class="schema-panel"><div class="panel-label">Data schema</div><input id="schema-collection" placeholder="Collection e.g. requests"><input id="schema-field" placeholder="Field e.g. status"><select id="schema-type"><option>string</option><option>number</option><option>integer</option><option>boolean</option></select><button class="palette-btn" onclick="addSchemaField()">Add field</button><div class="schema-fields" id="schema-fields">No fields declared.</div></div></aside></div><div class="instant-preview" id="instant-preview"><iframe id="instant-preview-frame" title="Instant deterministic preview"></iframe></div></div><div class="actions"><button class="btn" onclick="goStage(1)">Back</button><button class="btn" onclick="saveDesign()">Save visual design</button><button class="btn main" onclick="startBuild()">Open governed build →</button></div></div>
<div class="stage" data-stage="3"><div class="stage-kicker">Step 4 · Build sandbox</div><h2 id="build-title">VS Agent workspace</h2><p class="stage-intro">The agent implements the approved contract inside this project's isolated repository. Only source that passes the governed checks is committed and pushed.</p><div class="build-layout"><div class="terminal"><div class="term-head"><span>vendor-approval-hub · main</span><span>Sandboxed</span></div><div id="term-lines"><div class="term-line">$ nexus-agent implement specs/application.md</div></div></div><aside class="agent-panel"><h3>VS Agent</h3><p>Implementing the approved specification with the appliance's local model.</p><div class="agent-task" id="agent-task">Waiting to start…</div><div class="progress"><span id="build-progress"></span></div><p id="build-status">Repository and sandbox are ready.</p></aside></div><div class="actions"><button class="btn" onclick="goStage(2)">Change builder</button><button class="btn main" id="preview-btn" onclick="goStage(4)" disabled>Review preview →</button></div></div>
<div class="stage" data-stage="4"><div class="stage-kicker">Step 5 · Preview</div><h2>Review the running application</h2><p class="stage-intro">This exact verified commit is running in a constrained, authenticated preview container. Publishing requires explicit approval.</p><div class="preview-frame"><div class="browser-bar"><span class="browser-dot"></span><span class="browser-dot"></span><span class="browser-dot"></span><span class="browser-url" id="preview-url">Preparing preview…</span></div><iframe id="preview-iframe" title="Application preview"></iframe></div><div class="actions"><button class="btn" onclick="goStage(3)">Return to builder</button><button class="btn" id="rollback-btn" onclick="rollbackPreview()" disabled>Rollback preview</button><button class="btn main" onclick="goStage(5)">Request publication →</button></div></div>
<div class="stage" data-stage="5"><div class="stage-kicker">Step 6 · Governance</div><h2>Approve publication</h2><p class="stage-intro">Nexus validates the release evidence and records the approving user before making the application available.</p><div class="approval-box"><h3>Publication approval required</h3><p>Version 1.0.0 will be promoted from the preview sandbox to the internal Applications catalogue.</p><div class="check-grid"><div class="check">✓ Specification approved</div><div class="check">✓ Automated checks passed</div><div class="check">✓ No secrets detected</div><div class="check">✓ Rollback point created</div></div><label style="font-size:12px;color:#713f12"><input type="checkbox" id="approval-check" onchange="document.getElementById('publish-btn').disabled=!this.checked"> I reviewed the preview and approve this release.</label></div><div class="actions"><button class="btn" onclick="goStage(4)">Back to preview</button><button class="btn main" id="publish-btn" onclick="publishApp()" disabled>Approve and publish</button></div></div>
<div class="stage" data-stage="6"><div class="publish-success"><div class="success-icon">✓</div><div class="stage-kicker">Published</div><h2 id="published-name">Application is live</h2><p class="stage-intro">The application is available to authorized Nexus users and its release can be audited or rolled back.</p><div class="app-url" id="published-url">/apps/vendor-approval-hub</div><div><a class="btn main" href="applications.html">Open Applications catalogue</a> <button class="btn" onclick="newProject()">Create another app</button></div></div></div>
</section>
</div>
</main><div class="toast" id="toast">Project saved</div>
<script src="branding.js?v=20260721-consolidated"></script><script src="auth.js?v=20260721-consolidated"></script><script src="app-studio.js"></script>
</body></html>