relmio 0.3.1 → 0.4.0

package/src/ui/app.js

@@ -13,6 +13,10 @@ const state = {
 };
 
 const element = (id) => document.getElementById(id);
+const localEndpointLink = element("local-endpoint-link");
+if (token) {
+  localEndpointLink.href = `/local?session=${encodeURIComponent(token)}`;
+}
 const messageToast = element("global-message");
 const message = element("global-message-text");
 const errorBox = element("global-error");

package/src/ui/index.html

@@ -177,6 +177,19 @@
           </div>
         </div>
 
+        <aside class="final-note" aria-labelledby="local-endpoint-title">
+          <h3 id="local-endpoint-title">Need an endpoint on this computer?</h3>
+          <p>
+            Install a loopback-only OpenAI API endpoint with a Platform key, or
+            the experimental official Codex App Server with ChatGPT sign-in.
+          </p>
+          <div class="actions">
+            <a id="local-endpoint-link" class="button secondary">
+              Set up a local endpoint
+            </a>
+          </div>
+        </aside>
+
         <div class="actions">
           <button id="login-button" class="button secondary" type="button">
             Sign in with ChatGPT

package/src/ui/local.css

@@ -0,0 +1,262 @@
+.local-wizard .shell {
+  width: min(100% - 2.5rem, 78rem);
+}
+
+.local-wizard .panel {
+  scroll-behavior: smooth;
+}
+
+.local-wizard .status-row {
+  margin-bottom: 1rem;
+}
+
+.local-wizard .safety-note {
+  grid-template-columns: 1.75rem minmax(0, 1fr);
+}
+
+.local-wizard .safety-note > span {
+  grid-column: 2;
+}
+
+.target-picker {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.75rem;
+  min-width: 0;
+  margin: 0 0 1rem;
+  padding: 0;
+  border: 0;
+}
+
+.target-picker legend {
+  width: 100%;
+  margin-bottom: 0.5rem;
+  font-weight: 800;
+}
+
+.target-card {
+  position: relative;
+  display: grid;
+  grid-template-columns: 1.25rem minmax(0, 1fr);
+  gap: 0.75rem;
+  min-width: 0;
+  padding: 1rem;
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius);
+  background: var(--surface-muted);
+  cursor: pointer;
+  transition:
+    border-color 180ms var(--ease),
+    background 180ms var(--ease),
+    box-shadow 180ms var(--ease),
+    transform 180ms var(--ease);
+}
+
+.target-card:hover {
+  border-color: var(--accent);
+  transform: translateY(-1px);
+}
+
+.target-card:has(input:checked) {
+  border-color: var(--accent);
+  background: var(--accent-soft);
+  box-shadow: 0 0 0 3px rgb(19 124 116 / 12%);
+}
+
+.target-card:has(input:focus-visible) {
+  outline: 3px solid #f2a94a;
+  outline-offset: 2px;
+}
+
+.target-card input {
+  width: 1.125rem;
+  height: 1.125rem;
+  margin: 0.2rem 0 0;
+  accent-color: var(--accent);
+}
+
+.target-card-copy {
+  display: grid;
+  gap: 0.35rem;
+  color: var(--text-muted);
+  font-size: 0.875rem;
+}
+
+.target-card-copy strong {
+  color: var(--text);
+  font-size: 1rem;
+}
+
+.target-card-copy .target-meta {
+  color: var(--accent-deep);
+  font-size: 0.75rem;
+  font-weight: 800;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+}
+
+.warning-card:has(input:checked) {
+  border-color: var(--warning-border);
+  background: var(--warning-soft);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--warning) 13%, transparent);
+}
+
+.warning-card .target-meta {
+  color: var(--warning);
+}
+
+.local-fields {
+  grid-template-columns: minmax(8rem, 0.55fr) minmax(0, 1.45fr);
+}
+
+.field textarea {
+  width: 100%;
+  min-height: 5.75rem;
+  padding: 0.625rem 0.875rem;
+  resize: vertical;
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius-sm);
+  color: var(--text);
+  background: var(--surface);
+  font: 0.875rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  transition:
+    border-color 200ms var(--ease),
+    box-shadow 200ms var(--ease);
+}
+
+.field textarea:hover {
+  border-color: var(--accent);
+}
+
+.field textarea:focus {
+  border-color: var(--accent);
+  outline: 0;
+  box-shadow: 0 0 0 4px rgb(19 124 116 / 13%);
+}
+
+.policy-note,
+.high-trust-warning,
+.one-time-note,
+.codex-login {
+  margin-top: 1rem;
+  padding: 0.875rem 1rem;
+  border: 1px solid var(--accent-border);
+  border-radius: var(--radius);
+  background: var(--accent-soft);
+}
+
+.policy-note p,
+.high-trust-warning p,
+.one-time-note p,
+.codex-login p {
+  margin: 0.35rem 0 0;
+  color: var(--text-muted);
+  font-size: 0.875rem;
+}
+
+.high-trust-warning {
+  border-color: var(--warning-border);
+  background: var(--warning-soft);
+}
+
+.high-trust-warning strong,
+.high-trust-warning p {
+  color: var(--warning);
+}
+
+.one-time-note {
+  margin: 0 0 1rem;
+  border-color: var(--warning-border);
+  background: var(--warning-soft);
+}
+
+.one-time-note strong,
+.one-time-note p {
+  color: var(--warning);
+}
+
+.local-review-grid {
+  margin-top: 1rem;
+}
+
+.review-details dd {
+  overflow-wrap: anywhere;
+}
+
+.review-details div {
+  grid-template-columns: 9.5rem minmax(0, 1fr);
+}
+
+.codex-login {
+  border-color: var(--warning-border);
+  background: var(--warning-soft);
+}
+
+.codex-login h3 {
+  margin-bottom: 0;
+}
+
+.codex-login > .button {
+  margin-top: 0.875rem;
+}
+
+.device-code-result {
+  margin-top: 1rem;
+  padding-top: 1rem;
+  border-top: 1px solid var(--warning-border);
+}
+
+.device-code-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.625rem;
+  margin: 0.75rem 0;
+}
+
+.device-code-row code {
+  padding: 0.65rem 0.875rem;
+  border: 1px solid var(--warning-border);
+  background: var(--surface);
+  font-size: 1.125rem;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+}
+
+.device-code-status {
+  font-weight: 700;
+}
+
+.local-wizard a.button {
+  text-decoration: none;
+}
+
+@media (max-width: 60rem),
+  (min-width: 961px) and (max-height: 768px) {
+  .local-wizard .steps ol {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 48rem) {
+  .target-picker,
+  .local-fields,
+  .local-review-grid {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .review-details div {
+    grid-template-columns: minmax(0, 1fr);
+    gap: 0.2rem;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .local-wizard *,
+  .local-wizard *::before,
+  .local-wizard *::after {
+    scroll-behavior: auto !important;
+    transition-duration: 0.01ms !important;
+    animation-duration: 0.01ms !important;
+  }
+}