@oddessentials/agent-guild 0.8.0 → 0.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (61) hide show
  1. package/README.md +2 -1
  2. package/package.json +1 -1
  3. package/web/index.html +1 -0
  4. package/web/skins/orbital/characters/anthropic/idle.avif +0 -0
  5. package/web/skins/orbital/characters/anthropic/idle.webp +0 -0
  6. package/web/skins/orbital/characters/anthropic/locked.avif +0 -0
  7. package/web/skins/orbital/characters/anthropic/locked.webp +0 -0
  8. package/web/skins/orbital/characters/anthropic/working.avif +0 -0
  9. package/web/skins/orbital/characters/anthropic/working.webp +0 -0
  10. package/web/skins/orbital/characters/google/idle.avif +0 -0
  11. package/web/skins/orbital/characters/google/idle.webp +0 -0
  12. package/web/skins/orbital/characters/google/locked.avif +0 -0
  13. package/web/skins/orbital/characters/google/locked.webp +0 -0
  14. package/web/skins/orbital/characters/google/working.avif +0 -0
  15. package/web/skins/orbital/characters/google/working.webp +0 -0
  16. package/web/skins/orbital/characters/openai/idle.avif +0 -0
  17. package/web/skins/orbital/characters/openai/idle.webp +0 -0
  18. package/web/skins/orbital/characters/openai/locked.avif +0 -0
  19. package/web/skins/orbital/characters/openai/locked.webp +0 -0
  20. package/web/skins/orbital/characters/openai/working.avif +0 -0
  21. package/web/skins/orbital/characters/openai/working.webp +0 -0
  22. package/web/skins/orbital/characters/shell/idle.avif +0 -0
  23. package/web/skins/orbital/characters/shell/idle.webp +0 -0
  24. package/web/skins/orbital/characters/shell/locked.avif +0 -0
  25. package/web/skins/orbital/characters/shell/locked.webp +0 -0
  26. package/web/skins/orbital/characters/shell/working.avif +0 -0
  27. package/web/skins/orbital/characters/shell/working.webp +0 -0
  28. package/web/skins/orbital/characters/xai/idle.avif +0 -0
  29. package/web/skins/orbital/characters/xai/idle.webp +0 -0
  30. package/web/skins/orbital/characters/xai/locked.avif +0 -0
  31. package/web/skins/orbital/characters/xai/locked.webp +0 -0
  32. package/web/skins/orbital/characters/xai/working.avif +0 -0
  33. package/web/skins/orbital/characters/xai/working.webp +0 -0
  34. package/web/skins/orbital/familiars/aether.png +0 -0
  35. package/web/skins/orbital/familiars/flame.png +0 -0
  36. package/web/skins/orbital/familiars/leaf.png +0 -0
  37. package/web/skins/orbital/familiars/night.png +0 -0
  38. package/web/skins/orbital/fonts/OFL.txt +93 -0
  39. package/web/skins/orbital/fonts/exo2.woff2 +0 -0
  40. package/web/skins/orbital/icons/anthropic.avif +0 -0
  41. package/web/skins/orbital/icons/anthropic.webp +0 -0
  42. package/web/skins/orbital/icons/google.avif +0 -0
  43. package/web/skins/orbital/icons/google.webp +0 -0
  44. package/web/skins/orbital/icons/openai.avif +0 -0
  45. package/web/skins/orbital/icons/openai.webp +0 -0
  46. package/web/skins/orbital/icons/shell.avif +0 -0
  47. package/web/skins/orbital/icons/shell.webp +0 -0
  48. package/web/skins/orbital/icons/xai.avif +0 -0
  49. package/web/skins/orbital/icons/xai.webp +0 -0
  50. package/web/skins/orbital/page-light.avif +0 -0
  51. package/web/skins/orbital/page-light.webp +0 -0
  52. package/web/skins/orbital/page.avif +0 -0
  53. package/web/skins/orbital/page.webp +0 -0
  54. package/web/skins/orbital/skin.css +393 -0
  55. package/web/skins/orbital/ui/empty-state.avif +0 -0
  56. package/web/skins/orbital/ui/empty-state.webp +0 -0
  57. package/web/skins/orbital/ui/level.svg +1 -0
  58. package/web/skins/orbital/ui/lock.svg +1 -0
  59. package/web/skins/orbital/ui/plasma.svg +1 -0
  60. package/web/skins/orbital/ui/power.svg +1 -0
  61. package/web/theme.js +1 -0
package/README.md CHANGED
@@ -101,7 +101,8 @@ vX.Y.Z** switches over when you are ready. The version badge opens
101
101
 
102
102
  **Appearance.** The Appearance menu in the top bar picks a skin and light or
103
103
  dark mode, without a reload. **Guild** is the default fantasy look;
104
- **Professional** is a plain business look with no characters. The page
104
+ **Professional** is a plain business look with no characters; **Orbital**
105
+ puts a crew of little robots in deep space. The page
105
106
  follows your system's light or dark setting until you pick one. See
106
107
  [docs/SKINS.md](docs/SKINS.md) to make another.
107
108
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@oddessentials/agent-guild",
3
- "version": "0.8.0",
3
+ "version": "0.9.0",
4
4
  "description": "Launch and watch AI coding-assistant terminal sessions from one local web page. A bundled session manager owns the terminals so the page can close and reconnect.",
5
5
  "license": "MIT",
6
6
  "repository": {
package/web/index.html CHANGED
@@ -12,6 +12,7 @@
12
12
  <link rel="stylesheet" href="/styles.css">
13
13
  <link rel="stylesheet" href="/skins/guild/skin.css">
14
14
  <link rel="stylesheet" href="/skins/professional/skin.css">
15
+ <link rel="stylesheet" href="/skins/orbital/skin.css">
15
16
  </head>
16
17
  <body>
17
18
  <header class="topbar">
package/web/skins/orbital/fonts/OFL.txt ADDED
@@ -0,0 +1,93 @@
1
+ Copyright 2013 The Exo 2 Project Authors (https://github.com/googlefonts/Exo-2.0)
2
+
3
+ This Font Software is licensed under the SIL Open Font License, Version 1.1.
4
+ This license is copied below, and is also available with a FAQ at:
5
+ https://openfontlicense.org
6
+
7
+
8
+ -----------------------------------------------------------
9
+ SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
10
+ -----------------------------------------------------------
11
+
12
+ PREAMBLE
13
+ The goals of the Open Font License (OFL) are to stimulate worldwide
14
+ development of collaborative font projects, to support the font creation
15
+ efforts of academic and linguistic communities, and to provide a free and
16
+ open framework in which fonts may be shared and improved in partnership
17
+ with others.
18
+
19
+ The OFL allows the licensed fonts to be used, studied, modified and
20
+ redistributed freely as long as they are not sold by themselves. The
21
+ fonts, including any derivative works, can be bundled, embedded,
22
+ redistributed and/or sold with any software provided that any reserved
23
+ names are not used by derivative works. The fonts and derivatives,
24
+ however, cannot be released under any other type of license. The
25
+ requirement for fonts to remain under this license does not apply
26
+ to any document created using the fonts or their derivatives.
27
+
28
+ DEFINITIONS
29
+ "Font Software" refers to the set of files released by the Copyright
30
+ Holder(s) under this license and clearly marked as such. This may
31
+ include source files, build scripts and documentation.
32
+
33
+ "Reserved Font Name" refers to any names specified as such after the
34
+ copyright statement(s).
35
+
36
+ "Original Version" refers to the collection of Font Software components as
37
+ distributed by the Copyright Holder(s).
38
+
39
+ "Modified Version" refers to any derivative made by adding to, deleting,
40
+ or substituting -- in part or in whole -- any of the components of the
41
+ Original Version, by changing formats or by porting the Font Software to a
42
+ new environment.
43
+
44
+ "Author" refers to any designer, engineer, programmer, technical
45
+ writer or other person who contributed to the Font Software.
46
+
47
+ PERMISSION & CONDITIONS
48
+ Permission is hereby granted, free of charge, to any person obtaining
49
+ a copy of the Font Software, to use, study, copy, merge, embed, modify,
50
+ redistribute, and sell modified and unmodified copies of the Font
51
+ Software, subject to the following conditions:
52
+
53
+ 1) Neither the Font Software nor any of its individual components,
54
+ in Original or Modified Versions, may be sold by itself.
55
+
56
+ 2) Original or Modified Versions of the Font Software may be bundled,
57
+ redistributed and/or sold with any software, provided that each copy
58
+ contains the above copyright notice and this license. These can be
59
+ included either as stand-alone text files, human-readable headers or
60
+ in the appropriate machine-readable metadata fields within text or
61
+ binary files as long as those fields can be easily viewed by the user.
62
+
63
+ 3) No Modified Version of the Font Software may use the Reserved Font
64
+ Name(s) unless explicit written permission is granted by the corresponding
65
+ Copyright Holder. This restriction only applies to the primary font name as
66
+ presented to the users.
67
+
68
+ 4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
69
+ Software shall not be used to promote, endorse or advertise any
70
+ Modified Version, except to acknowledge the contribution(s) of the
71
+ Copyright Holder(s) and the Author(s) or with their explicit written
72
+ permission.
73
+
74
+ 5) The Font Software, modified or unmodified, in part or in whole,
75
+ must be distributed entirely under this license, and must not be
76
+ distributed under any other license. The requirement for fonts to
77
+ remain under this license does not apply to any document created
78
+ using the Font Software.
79
+
80
+ TERMINATION
81
+ This license becomes null and void if any of the above conditions are
82
+ not met.
83
+
84
+ DISCLAIMER
85
+ THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
86
+ EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
87
+ MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
88
+ OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
89
+ COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
90
+ INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
91
+ DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
92
+ FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
93
+ OTHER DEALINGS IN THE FONT SOFTWARE.
package/web/skins/orbital/icons/xai.avif ADDED
Binary file
package/web/skins/orbital/icons/xai.webp ADDED
Binary file
package/web/skins/orbital/page.avif ADDED
Binary file
package/web/skins/orbital/page.webp ADDED
Binary file
package/web/skins/orbital/skin.css ADDED
@@ -0,0 +1,393 @@
1
+ /* The Orbital skin: deep space, glass panels and a crew of little robots.
2
+ Everything here applies only while <html data-skin="orbital">; docs/SKINS.md lists every slot.
3
+ The art is built by concept-art/orbital-skin/source/build.py. */
4
+
5
+ @font-face {
6
+ font-family: "Exo 2";
7
+ src: url("fonts/exo2.woff2") format("woff2");
8
+ font-weight: 400 800;
9
+ font-display: swap;
10
+ }
11
+
12
+ :where(:root[data-skin="orbital"]) {
13
+ --bg: #eef2f9;
14
+ --surface: #ffffff;
15
+ --surface-2: #f1f4fb;
16
+ --border: #d7deec;
17
+ --text: #0e1529;
18
+ --muted: #55627c;
19
+ --heading: #0b1433;
20
+ --accent: #3a4fd8;
21
+ --accent-fill: #3a4fd8;
22
+ --accent-text: #ffffff;
23
+ --danger: #c72f45;
24
+ --ok: #0d8a5c;
25
+ --warn: #a35f00;
26
+ --gold: #5a7bd6;
27
+ --gold-ink: #2c4aa8;
28
+ --focus: #3a4fd8;
29
+ --shadow: 0 1px 2px rgba(14, 24, 56, 0.06), 0 6px 18px rgba(14, 24, 56, 0.07);
30
+ --radius: 10px;
31
+ --font-display: "Exo 2", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
32
+
33
+ --glass: rgba(255, 255, 255, 0.84);
34
+ --glass-strong: rgba(255, 255, 255, 0.94);
35
+ --line: linear-gradient(90deg, transparent, #6f8cff 22%, #9b7bff 50%, #4fd1ff 78%, transparent);
36
+ --stars:
37
+ radial-gradient(circle, rgba(255, 255, 255, 0.9) 0 0.7px, transparent 1.3px) 0 0 / 37px 41px,
38
+ radial-gradient(circle, rgba(190, 220, 255, 0.7) 0 0.6px, transparent 1.2px) 17px 23px / 53px 47px,
39
+ radial-gradient(circle, rgba(255, 255, 255, 0.55) 0 0.5px, transparent 1px) 9px 31px / 29px 61px;
40
+ --page-art: image-set(url("page-light.avif") type("image/avif"), url("page-light.webp") type("image/webp"));
41
+ --empty-shadow: rgba(30, 50, 120, 0.25);
42
+ --card-shadow: 0 1px 2px rgba(14, 24, 56, 0.06), 0 10px 28px rgba(14, 24, 56, 0.1);
43
+ --card-hover-shadow: 0 2px 4px rgba(14, 24, 56, 0.06), 0 16px 36px color-mix(in srgb, var(--pc) 18%, rgba(14, 24, 56, 0.12));
44
+ --dialog-shadow: 0 30px 70px -18px rgba(14, 24, 56, 0.35);
45
+
46
+ body { background: var(--bg); }
47
+ body::before {
48
+ content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
49
+ background: var(--page-art) center bottom / cover no-repeat;
50
+ }
51
+ h2 { font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.95rem; }
52
+ h2 .count { text-transform: none; }
53
+
54
+ .topbar { background: var(--glass); backdrop-filter: blur(12px) saturate(1.2); border-bottom: 1px solid transparent; border-image: var(--line) 1; }
55
+ .version { font-family: var(--font-display); letter-spacing: 0.04em; }
56
+ .version.unread::after { background: radial-gradient(circle at 35% 30%, #fff 0 14%, var(--accent) 50%); box-shadow: 0 0 0 2px var(--surface), 0 0 8px var(--accent); }
57
+ .connection .dot { box-shadow: 0 0 0 3px color-mix(in srgb, var(--dot) 18%, transparent), 0 0 8px var(--dot); }
58
+ .section-head { padding-bottom: 9px; border-bottom: 1px solid transparent; border-image: linear-gradient(90deg, var(--gold), color-mix(in srgb, var(--gold) 30%, transparent) 45%, transparent 85%) 1; }
59
+
60
+ /* These read --pc and --hud, so they are declared on the elements that set those, not on :root. */
61
+ .provider, .session-card, .models, .auth {
62
+ --hud: color-mix(in srgb, var(--pc, var(--accent)) 75%, transparent);
63
+ --space: radial-gradient(120% 90% at 50% 35%, color-mix(in srgb, var(--pc, var(--accent)) 34%, #0a1124) 0%, #070b17 62%, #04060c 100%);
64
+ --brackets:
65
+ linear-gradient(var(--hud), var(--hud)) left top / 16px 2px, linear-gradient(var(--hud), var(--hud)) left top / 2px 16px,
66
+ linear-gradient(var(--hud), var(--hud)) right top / 16px 2px, linear-gradient(var(--hud), var(--hud)) right top / 2px 16px,
67
+ linear-gradient(var(--hud), var(--hud)) left bottom / 16px 2px, linear-gradient(var(--hud), var(--hud)) left bottom / 2px 16px,
68
+ linear-gradient(var(--hud), var(--hud)) right bottom / 16px 2px, linear-gradient(var(--hud), var(--hud)) right bottom / 2px 16px;
69
+ }
70
+
71
+ /* Provider colour and art. Unknown providers fall back to the Shell robot. */
72
+ .provider, .session-card {
73
+ --pc: #a67cf6;
74
+ --idle: image-set(url("characters/shell/idle.avif") type("image/avif"), url("characters/shell/idle.webp") type("image/webp"));
75
+ --working: image-set(url("characters/shell/working.avif") type("image/avif"), url("characters/shell/working.webp") type("image/webp"));
76
+ --locked: image-set(url("characters/shell/locked.avif") type("image/avif"), url("characters/shell/locked.webp") type("image/webp"));
77
+ }
78
+ .provider[data-id="anthropic"], .session-card[data-provider="anthropic"] {
79
+ --pc: #e0835f;
80
+ --idle: image-set(url("characters/anthropic/idle.avif") type("image/avif"), url("characters/anthropic/idle.webp") type("image/webp"));
81
+ --working: image-set(url("characters/anthropic/working.avif") type("image/avif"), url("characters/anthropic/working.webp") type("image/webp"));
82
+ --locked: image-set(url("characters/anthropic/locked.avif") type("image/avif"), url("characters/anthropic/locked.webp") type("image/webp"));
83
+ }
84
+ .provider[data-id="openai"], .session-card[data-provider="openai"] {
85
+ --pc: #1fd08f;
86
+ --idle: image-set(url("characters/openai/idle.avif") type("image/avif"), url("characters/openai/idle.webp") type("image/webp"));
87
+ --working: image-set(url("characters/openai/working.avif") type("image/avif"), url("characters/openai/working.webp") type("image/webp"));
88
+ --locked: image-set(url("characters/openai/locked.avif") type("image/avif"), url("characters/openai/locked.webp") type("image/webp"));
89
+ }
90
+ .provider[data-id="google"], .session-card[data-provider="google"] {
91
+ --pc: #5b9cff;
92
+ --idle: image-set(url("characters/google/idle.avif") type("image/avif"), url("characters/google/idle.webp") type("image/webp"));
93
+ --working: image-set(url("characters/google/working.avif") type("image/avif"), url("characters/google/working.webp") type("image/webp"));
94
+ --locked: image-set(url("characters/google/locked.avif") type("image/avif"), url("characters/google/locked.webp") type("image/webp"));
95
+ }
96
+ .provider[data-id="xai"], .session-card[data-provider="xai"] {
97
+ --pc: #38d6e8;
98
+ --idle: image-set(url("characters/xai/idle.avif") type("image/avif"), url("characters/xai/idle.webp") type("image/webp"));
99
+ --working: image-set(url("characters/xai/working.avif") type("image/avif"), url("characters/xai/working.webp") type("image/webp"));
100
+ --locked: image-set(url("characters/xai/locked.avif") type("image/avif"), url("characters/xai/locked.webp") type("image/webp"));
101
+ }
102
+
103
+ .provider-icon[data-provider="anthropic"] { --icon: image-set(url("icons/anthropic.avif") type("image/avif"), url("icons/anthropic.webp") type("image/webp")); }
104
+ .provider-icon[data-provider="openai"] { --icon: image-set(url("icons/openai.avif") type("image/avif"), url("icons/openai.webp") type("image/webp")); }
105
+ .provider-icon[data-provider="google"] { --icon: image-set(url("icons/google.avif") type("image/avif"), url("icons/google.webp") type("image/webp")); }
106
+ .provider-icon[data-provider="xai"] { --icon: image-set(url("icons/xai.avif") type("image/avif"), url("icons/xai.webp") type("image/webp")); }
107
+ .provider-icon[data-provider="shell"] { --icon: image-set(url("icons/shell.avif") type("image/avif"), url("icons/shell.webp") type("image/webp")); }
108
+ .provider-icon:not(.has-image)[data-provider="anthropic"],
109
+ .provider-icon:not(.has-image)[data-provider="openai"],
110
+ .provider-icon:not(.has-image)[data-provider="google"],
111
+ .provider-icon:not(.has-image)[data-provider="xai"],
112
+ .provider-icon:not(.has-image)[data-provider="shell"] {
113
+ background: var(--icon) center / cover no-repeat; color: transparent;
114
+ box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 55%, transparent), 0 0 12px color-mix(in srgb, var(--c) 30%, transparent);
115
+ }
116
+
117
+ /* Cards: glass panels with HUD corner brackets in the provider's colour. */
118
+ .provider, .session-card {
119
+ position: relative; isolation: isolate; overflow: hidden;
120
+ padding: 16px; background: var(--glass); backdrop-filter: blur(10px);
121
+ border: 1px solid color-mix(in srgb, var(--pc) 22%, var(--border)); box-shadow: var(--card-shadow);
122
+ transition: border-color 0.25s, box-shadow 0.25s, transform 0.3s var(--ease);
123
+ }
124
+ .provider:hover, .session-card:hover {
125
+ transform: translateY(-2px); border-color: color-mix(in srgb, var(--pc) 55%, var(--border)); box-shadow: var(--card-hover-shadow);
126
+ }
127
+ .provider::after, .session-card::after {
128
+ content: ""; position: absolute; inset: 6px; z-index: 2; pointer-events: none;
129
+ background: var(--brackets); background-repeat: no-repeat; opacity: 0.85;
130
+ }
131
+ .provider::before {
132
+ content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
133
+ background: linear-gradient(180deg, transparent 0 46%, color-mix(in srgb, var(--pc) 22%, transparent) 50%, transparent 54%) 0 0 / 100% 200% no-repeat;
134
+ background-position: 0 100%; opacity: 0;
135
+ }
136
+ .provider:hover::before { opacity: 1; background-position: 0 -100%; transition: background-position 1.1s var(--ease), opacity 0.2s; }
137
+
138
+ .card-art { position: absolute; z-index: -1; overflow: hidden; pointer-events: none; background: var(--stars), var(--space); }
139
+ .card-art::before { content: ""; position: absolute; inset: 0; background: var(--idle) no-repeat; }
140
+ .provider .card-art::before { transition: transform 0.5s var(--ease); }
141
+ .provider:hover .card-art::before { transform: translate(calc(var(--px, 0) * -6px), calc(var(--py, 0) * -4px)) scale(1.04); }
142
+ .provider.unavailable { border-color: var(--border); --hud: color-mix(in srgb, var(--muted) 55%, transparent); }
143
+ .provider.unavailable .card-art { background: var(--stars), radial-gradient(120% 90% at 50% 35%, #2a2f3c 0%, #0b0d13 70%); }
144
+ .provider.unavailable .card-art::before { background-image: var(--locked); }
145
+ .provider.unavailable::after {
146
+ background: url("ui/lock.svg") right 10px top 10px / 30px 33px, var(--brackets); background-repeat: no-repeat;
147
+ }
148
+
149
+ .session-card { min-height: 196px; }
150
+ .session-card .card-art::after {
151
+ content: ""; position: absolute; inset: 0; background: var(--working) no-repeat;
152
+ opacity: 0; transition: opacity 0.6s var(--ease);
153
+ }
154
+ .session-card:has(.status-pill.active) .card-art::after { opacity: 1; }
155
+ .session-card:has(.status-pill.active) { border-color: color-mix(in srgb, var(--pc) 65%, var(--border)); }
156
+ .session-card.exited .card-art { filter: grayscale(1) brightness(0.8); }
157
+ .session-card .card-top > .provider-icon { display: none; }
158
+ .session-card .card-top { flex-wrap: wrap; gap: 6px 8px; }
159
+ .session-card .card-title { flex-basis: 100%; }
160
+
161
+ /* Working: an orbit ring circles the robot while a stream of particles drifts past. */
162
+ .card-aura { position: absolute; z-index: -1; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity 0.6s var(--ease); }
163
+ .card-aura::before {
164
+ content: ""; position: absolute; left: 50%; top: 38%; width: 150%; aspect-ratio: 1; translate: -50% -50%;
165
+ border-radius: 50%;
166
+ background: conic-gradient(from 0deg, color-mix(in srgb, var(--pc) 22%, transparent) 0 58%, color-mix(in srgb, var(--pc) 85%, transparent) 86%, #fff 88%, color-mix(in srgb, var(--pc) 22%, transparent) 89%);
167
+ mask: radial-gradient(closest-side, transparent 0 calc(100% - 2.5px), #000 calc(100% - 2px) 100%, transparent);
168
+ transform: rotateX(68deg);
169
+ }
170
+ .card-aura::after {
171
+ content: ""; position: absolute; inset: 0 auto 0 0; width: calc(100% + 120px);
172
+ background-image:
173
+ radial-gradient(circle, color-mix(in srgb, var(--pc) 80%, #fff) 0 1.3px, transparent 2px),
174
+ radial-gradient(circle, #ffffff 0 0.9px, transparent 1.6px),
175
+ radial-gradient(circle, color-mix(in srgb, var(--pc) 60%, #fff) 0 1px, transparent 1.7px);
176
+ background-size: 60px 44px, 40px 73px, 120px 31px;
177
+ background-position: 8px 6px, 22px 30px, 50px 14px;
178
+ }
179
+ .session-card:has(.status-pill.active) .card-aura { opacity: 1; }
180
+ .session-card:has(.status-pill.active) .card-aura::before { animation: orbital-orbit 3.2s linear infinite; }
181
+ .session-card:has(.status-pill.active) .card-aura::after { animation: orbital-drift 2.4s linear infinite; }
182
+ body:has(#terminal-panel:not([hidden])) main :is(.card-aura, .status-pill, .agent)::before,
183
+ body:has(#terminal-panel:not([hidden])) main :is(.card-aura, .agent)::after { animation-play-state: paused; }
184
+
185
+ .level-badge {
186
+ display: grid; place-items: center; position: absolute; left: 10px; bottom: 10px; z-index: 3;
187
+ width: 52px; height: 52px; padding-top: 1px;
188
+ background: url("ui/level.svg") center / contain no-repeat;
189
+ font: 700 0.98rem var(--font-display); color: #eaf6ff; font-variant-numeric: tabular-nums;
190
+ text-shadow: 0 0 6px rgba(120, 200, 255, 0.9), 0 1px 2px #000;
191
+ }
192
+ .level-badge:empty { display: none; }
193
+ .level-badge.level-up { animation: orbital-level-up 1.1s var(--ease); }
194
+
195
+ .agent {
196
+ --fc: var(--c);
197
+ border-width: 1.5px; border-color: var(--fc); place-items: end end; padding: 0 3px 1px 0;
198
+ background: #070b17 center / 92% auto no-repeat;
199
+ color: #fff; font-size: 0.6rem; text-shadow: 0 0 3px #000, 0 1px 2px #000;
200
+ box-shadow: 0 0 10px color-mix(in srgb, var(--fc) 45%, transparent);
201
+ }
202
+ .session-card .agent { width: 34px; height: 34px; }
203
+ .agent.working::after { border-color: var(--fc); }
204
+ .agent[data-familiar="flame"] { --fc: #ff9a4a; background-image: url("familiars/flame.png"); }
205
+ .agent[data-familiar="leaf"] { --fc: #4fe08f; background-image: url("familiars/leaf.png"); }
206
+ .agent[data-familiar="night"] { --fc: #b38cff; background-image: url("familiars/night.png"); }
207
+ .agent[data-familiar="aether"] { --fc: #6cc8ff; background-image: url("familiars/aether.png"); }
208
+ .agent.summon { animation: orbital-summon 0.7s var(--ease) both; }
209
+
210
+ .meter-label { padding-left: 19px; background: url("ui/power.svg") left center / 14px 14px no-repeat; }
211
+ .meter + .meter .meter-label { background-image: url("ui/plasma.svg"); }
212
+ .meter-bar, .stat-bar { height: 7px; border-radius: 4px; }
213
+ .meter-fill { border-radius: 4px; background: linear-gradient(90deg, #0c9c62, #2fd99a); }
214
+ .meter + .meter .meter-fill { background: linear-gradient(90deg, #3a4fd8, #5ba6ff); }
215
+ .meter.low .meter-fill { background: linear-gradient(90deg, #a35f00, #f0a53a); }
216
+ .meter.empty .meter-fill { background: linear-gradient(90deg, #a8243a, #e5536b); }
217
+ .stat-fill { border-radius: 4px; background: linear-gradient(90deg, color-mix(in srgb, var(--tier) 60%, #0b1433), var(--tier)); }
218
+ .model-stats-head { color: var(--accent); }
219
+ .stat-tier { border-radius: 5px; font-family: var(--font-display); }
220
+ .tier-s { --tier: #b07d12; --tier-ink: #6b4a00; }
221
+ .tier-a { --tier: #7a5cf0; --tier-ink: #4c2fb8; }
222
+ .tier-b { --tier: #3a7bea; --tier-ink: #1c4fb8; }
223
+ .tier-c { --tier: #12a36a; --tier-ink: #0b6b45; }
224
+ .tier-d { --tier: #94a3b8; --tier-ink: #475569; }
225
+
226
+ #empty { padding: 4px 16px 8px; text-align: center; }
227
+ #empty::before {
228
+ content: ""; display: block; width: 210px; height: 200px; margin: 0 auto 12px;
229
+ background: image-set(url("ui/empty-state.avif") type("image/avif"), url("ui/empty-state.webp") type("image/webp")) center / contain no-repeat;
230
+ filter: drop-shadow(0 12px 18px var(--empty-shadow));
231
+ animation: orbital-float 6s ease-in-out infinite alternate;
232
+ }
233
+
234
+ .status-pill { border: 1px solid var(--border); background: var(--glass-strong); }
235
+ .status-pill.active { border-color: color-mix(in srgb, var(--ok) 45%, transparent); background: color-mix(in srgb, var(--ok) 9%, var(--surface)); }
236
+ .status-pill.exited { border-color: color-mix(in srgb, var(--danger) 35%, transparent); background: color-mix(in srgb, var(--danger) 6%, var(--surface)); }
237
+ .model-pill { border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
238
+ .provider .tier { font-family: var(--font-display); letter-spacing: 0.04em; border-color: color-mix(in srgb, var(--pc) 45%, var(--border)); color: color-mix(in srgb, var(--pc) 55%, var(--text)); background: color-mix(in srgb, var(--pc) 10%, var(--surface)); }
239
+
240
+ .btn { background: var(--glass-strong); }
241
+ .btn:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent); }
242
+ .btn.primary {
243
+ border-color: transparent; color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
244
+ background: linear-gradient(135deg, #4a5cf0, #7a4fe8);
245
+ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 4px 14px rgba(74, 92, 240, 0.32);
246
+ }
247
+ .btn.primary:hover { filter: brightness(1.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 6px 20px rgba(122, 79, 232, 0.4); }
248
+ .btn.danger:hover { border-color: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 14%, transparent); }
249
+ .cwd input, .auth input, .history-tools input[type="search"], .history-form input, .github-fields input, .github-fields select { background: var(--glass-strong); }
250
+
251
+ .models, .news-panel, .auth, .news-latest, .appearance-menu { background: var(--glass-strong); backdrop-filter: blur(16px); }
252
+ .models, .news-panel { box-shadow: var(--dialog-shadow); }
253
+ .model-columns, .news-day { background: transparent; backdrop-filter: blur(16px); }
254
+ .models::backdrop, .news-panel::backdrop { background: rgba(10, 16, 40, 0.38); backdrop-filter: blur(2px); }
255
+ .models { border-radius: 14px; }
256
+ .models::after, .auth::after {
257
+ content: ""; position: absolute; inset: 7px; z-index: 2; pointer-events: none;
258
+ background: var(--brackets); background-repeat: no-repeat;
259
+ }
260
+ .models-bar, .panel-bar { border-bottom: 1px solid transparent; border-image: var(--line) 1; }
261
+ .model-group h4, .news-day, .changelog-type { font-family: var(--font-display); letter-spacing: 0.1em; color: var(--gold-ink); }
262
+ .news-latest { border-radius: 12px; }
263
+ .news-row { transition: background-color 0.15s; }
264
+ .news-row:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
265
+ .news-row:first-child { border-radius: 12px 12px 0 0; }
266
+ .news-row:last-child { border-radius: 0 0 12px 12px; }
267
+ .news-filter[aria-pressed="true"] { border-color: transparent; background: linear-gradient(135deg, #4a5cf0, #7a4fe8); }
268
+ .auth { position: relative; border-radius: 14px; padding: 32px; box-shadow: var(--dialog-shadow); }
269
+ .terminal-panel { border-radius: 12px; border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); box-shadow: 0 30px 70px rgba(4, 8, 24, 0.45); }
270
+ .panel-bar { background: var(--glass-strong); }
271
+ .tip { background: #0b1020; color: #e4ebf8; border: 1px solid #2a3a66; box-shadow: 0 0 0 1px rgba(120, 180, 255, 0.08), 0 12px 30px rgba(4, 8, 24, 0.45); }
272
+ .tip strong { color: #9fd8ff; font-family: var(--font-display); }
273
+
274
+ .providers.deal > .provider { animation: orbital-launch 0.6s var(--ease) both; }
275
+ .providers.deal > .provider:nth-child(2) { animation-delay: 0.07s; }
276
+ .providers.deal > .provider:nth-child(3) { animation-delay: 0.14s; }
277
+ .providers.deal > .provider:nth-child(4) { animation-delay: 0.21s; }
278
+ .providers.deal > .provider:nth-child(5) { animation-delay: 0.28s; }
279
+ .providers.deal > .provider:nth-child(n + 6) { animation-delay: 0.35s; }
280
+ .session-card.enter { animation: orbital-dock 0.55s var(--ease) both; }
281
+
282
+ /* Light: the robots look out of dark viewports set into the glass. */
283
+ .card-art { border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(160, 190, 255, 0.25), 0 0 0 1px color-mix(in srgb, var(--pc) 35%, #c9d3ea), 0 2px 8px rgba(14, 24, 56, 0.18); }
284
+ .provider { padding-top: 238px; }
285
+ .provider .card-art { inset: 12px 12px auto; height: 212px; }
286
+ .provider .card-art::before { background-size: 108% auto; background-position: 50% 8%; }
287
+ .session-card { padding-left: 160px; }
288
+ .session-card .card-art, .session-card .card-aura { inset: 12px auto 12px 12px; width: 134px; border-radius: 8px; }
289
+ .session-card .card-art::before, .session-card .card-art::after { background-size: 165% auto; background-position: 50% 6%; }
290
+ .session-card .level-badge { left: 16px; bottom: 16px; width: 46px; height: 46px; }
291
+
292
+ @media (max-width: 640px) {
293
+ .session-card { padding-left: 140px; }
294
+ .session-card .card-art, .session-card .card-aura { width: 114px; }
295
+ }
296
+
297
+ @media (prefers-reduced-motion: reduce) {
298
+ .provider, .session-card, .card-aura, .session-card .card-art::after, .provider .card-art::before { transition: none; }
299
+ .provider:hover, .session-card:hover, .provider:hover .card-art::before { transform: none; }
300
+ .provider::before { display: none; }
301
+ .providers.deal > .provider, .session-card.enter, .level-badge.level-up, .agent.summon, #empty::before,
302
+ .session-card:has(.status-pill.active) .card-aura::before, .session-card:has(.status-pill.active) .card-aura::after { animation: none; }
303
+ }
304
+ }
305
+
306
+ :where(:root[data-skin="orbital"][data-theme="dark"]) {
307
+ --bg: #04060c;
308
+ --surface: #0b1020;
309
+ --surface-2: #121a30;
310
+ --border: #1e2a46;
311
+ --text: #e4ebf8;
312
+ --muted: #8f9cb8;
313
+ --heading: #f1f5ff;
314
+ --accent: #8ab4ff;
315
+ --accent-fill: #4a5cf0;
316
+ --danger: #ff6b81;
317
+ --ok: #3fe0a5;
318
+ --warn: #ffbf5c;
319
+ --gold: #7fc8ff;
320
+ --gold-ink: #9fd8ff;
321
+ --focus: #7fdcff;
322
+ --shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
323
+
324
+ --glass: rgba(9, 13, 27, 0.78);
325
+ --glass-strong: rgba(11, 16, 32, 0.92);
326
+ --page-art: image-set(url("page.avif") type("image/avif"), url("page.webp") type("image/webp"));
327
+ --empty-shadow: rgba(80, 140, 255, 0.28);
328
+ --card-shadow: inset 0 1px 0 rgba(160, 200, 255, 0.06), 0 10px 30px rgba(0, 0, 0, 0.45);
329
+ --card-hover-shadow: inset 0 1px 0 rgba(160, 200, 255, 0.08), 0 0 26px color-mix(in srgb, var(--pc) 26%, transparent);
330
+ --dialog-shadow: 0 30px 80px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(120, 170, 255, 0.06);
331
+
332
+ .tier-s { --tier: #f2c25b; --tier-ink: #fbe2a6; }
333
+ .tier-a { --tier: #a78bfa; --tier-ink: #ddd3ff; }
334
+ .tier-b { --tier: #60a5fa; --tier-ink: #cfe3ff; }
335
+ .tier-c { --tier: #3fe0a5; --tier-ink: #c6f6e2; }
336
+ .tier-d { --tier: #94a3b8; --tier-ink: #d4dbe4; }
337
+
338
+ .card-art { border-radius: 0; box-shadow: none; }
339
+ .provider { padding-top: 196px; }
340
+ .provider .card-art { inset: 0 0 auto 0; height: 250px; mask-image: linear-gradient(to bottom, #000 58%, transparent 100%); }
341
+ .provider .card-art::before { background-size: cover; background-position: center top; }
342
+ .provider .vendor { color: #f4f7ff; }
343
+ .session-card { padding-left: 152px; }
344
+ .session-card .card-art, .session-card .card-aura {
345
+ inset: 0 auto 0 0; width: 168px; border-radius: 0;
346
+ mask-image: linear-gradient(to right, #000 62%, transparent 100%);
347
+ }
348
+ .session-card .card-art::before, .session-card .card-art::after { background-size: 168px auto; background-position: center top; }
349
+ .session-card .level-badge { left: 10px; bottom: 10px; }
350
+
351
+ .meter-bar, .stat-bar { background: #060a16; box-shadow: inset 0 0 0 1px rgba(120, 170, 255, 0.16); }
352
+ .meter-fill { background: linear-gradient(90deg, #11a86b, #4cf0b0); box-shadow: 0 0 8px rgba(76, 240, 176, 0.5); }
353
+ .meter + .meter .meter-fill { background: linear-gradient(90deg, #3a4fd8, #6cb4ff); box-shadow: 0 0 8px rgba(108, 180, 255, 0.5); }
354
+ .meter.low .meter-fill { background: linear-gradient(90deg, #c27a12, #ffbf5c); box-shadow: 0 0 8px rgba(255, 191, 92, 0.45); }
355
+ .meter.empty .meter-fill { background: linear-gradient(90deg, #c23a52, #ff6b81); box-shadow: 0 0 8px rgba(255, 107, 129, 0.45); }
356
+ .stat-fill { background: linear-gradient(90deg, color-mix(in srgb, var(--tier) 50%, #000), var(--tier)); box-shadow: 0 0 8px color-mix(in srgb, var(--tier) 45%, transparent); }
357
+ .stat-tier { background: linear-gradient(color-mix(in srgb, var(--tier) 30%, #0b1020), #060a16); border-color: color-mix(in srgb, var(--tier) 65%, #000); }
358
+
359
+ .status-pill { background: rgba(4, 7, 16, 0.6); }
360
+ .status-pill.active { background: color-mix(in srgb, var(--ok) 10%, rgba(4, 7, 16, 0.6)); box-shadow: 0 0 10px rgba(63, 224, 165, 0.22); }
361
+ .status-pill.exited { background: color-mix(in srgb, var(--danger) 8%, rgba(4, 7, 16, 0.6)); }
362
+ .provider .tier { color: color-mix(in srgb, var(--pc) 70%, #fff); background: rgba(4, 7, 16, 0.6); }
363
+ .badge { background: rgba(4, 7, 16, 0.5); }
364
+
365
+ .btn { background: linear-gradient(rgba(26, 36, 66, 0.9), rgba(12, 18, 36, 0.9)); border-color: #26355c; box-shadow: inset 0 1px 0 rgba(160, 200, 255, 0.08); }
366
+ .btn:hover { border-color: #5b7fd6; box-shadow: inset 0 1px 0 rgba(160, 200, 255, 0.1), 0 0 12px rgba(91, 127, 214, 0.35); }
367
+ .btn.primary { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 0 18px rgba(106, 92, 240, 0.45); }
368
+ .btn.danger { color: #ff8c9c; }
369
+ .btn.danger:hover { border-color: #c23a52; box-shadow: 0 0 12px rgba(255, 107, 129, 0.3); }
370
+ .cwd input, .auth input, .history-tools input[type="search"], .history-form input, .github-fields input, .github-fields select { border-color: #26355c; background: rgba(4, 7, 16, 0.7); }
371
+
372
+ .models::backdrop, .news-panel::backdrop { background: rgba(2, 4, 10, 0.66); }
373
+ .terminal-panel { border-color: #2a3a66; box-shadow: 0 0 0 1px rgba(120, 170, 255, 0.06), 0 30px 80px rgba(0, 0, 0, 0.7); }
374
+ .news-link { color: #f1f5ff; }
375
+ a.news-link:visited { color: var(--muted); }
376
+
377
+ @media (max-width: 640px) {
378
+ .session-card { padding-left: 118px; }
379
+ .session-card .card-art, .session-card .card-aura { width: 132px; }
380
+ .session-card .card-art::before, .session-card .card-art::after { background-size: 132px auto; }
381
+ }
382
+ }
383
+
384
+ @keyframes orbital-launch { from { opacity: 0; transform: translateY(22px) scale(0.96); } 70% { opacity: 1; } }
385
+ @keyframes orbital-dock { from { opacity: 0; transform: translateX(-14px) scale(0.98); } }
386
+ @keyframes orbital-level-up {
387
+ 30% { transform: scale(1.32) rotate(-12deg); filter: brightness(1.6) drop-shadow(0 0 10px #9fd8ff); }
388
+ 60% { transform: scale(0.95) rotate(4deg); }
389
+ }
390
+ @keyframes orbital-summon { from { opacity: 0; transform: translateY(-14px) scale(0.2) rotate(-120deg); } 65% { opacity: 1; transform: scale(1.15); } }
391
+ @keyframes orbital-orbit { from { transform: rotateX(68deg) rotate(0); } to { transform: rotateX(68deg) rotate(1turn); } }
392
+ @keyframes orbital-drift { to { transform: translateX(-120px); } }
393
+ @keyframes orbital-float { from { transform: translateY(0) rotate(-1deg); } to { transform: translateY(-8px) rotate(1deg); } }
package/web/skins/orbital/ui/level.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><defs><radialGradient id="p" cx="40%" cy="34%" r="70%"><stop offset="0" stop-color="#22345c"/><stop offset="0.7" stop-color="#0b1222"/><stop offset="1" stop-color="#05080f"/></radialGradient><linearGradient id="r" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#b9ecff"/><stop offset="1" stop-color="#5b6cff"/></linearGradient><filter id="g" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="1.4"/></filter></defs><g transform="rotate(-22 32 32)"><ellipse cx="32" cy="32" rx="30" ry="10" fill="none" stroke="url(#r)" stroke-width="1.6" stroke-opacity="0.55"/></g><circle cx="32" cy="32" r="21" fill="url(#p)"/><circle cx="32" cy="32" r="20.2" fill="none" stroke="url(#r)" stroke-width="1.6"/><circle cx="32" cy="32" r="17" fill="none" stroke="#9fd8ff" stroke-opacity="0.22" stroke-width="1" stroke-dasharray="1.2 3.2"/><g transform="rotate(-22 32 32)"><path d="M2 32A30 10 0 0 0 62 32" fill="none" stroke="url(#r)" stroke-width="2"/><circle cx="55" cy="38.4" r="3.4" fill="#d6f4ff" filter="url(#g)"/><circle cx="55" cy="38.4" r="2.2" fill="#ffffff"/></g></svg>
package/web/skins/orbital/ui/lock.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 44"><defs><pattern id="h" width="6" height="6" patternUnits="userSpaceOnUse" patternTransform="rotate(45)"><rect width="3" height="6" fill="#ffc53d"/><rect x="3" width="3" height="6" fill="#141821"/></pattern><clipPath id="c"><path d="M20 2l17 9.5v21L20 42 3 32.5v-21z"/></clipPath></defs><path d="M20 2l17 9.5v21L20 42 3 32.5v-21z" fill="#0b1020" fill-opacity="0.86"/><rect x="0" y="33" width="40" height="11" fill="url(#h)" clip-path="url(#c)"/><path d="M20 2l17 9.5v21L20 42 3 32.5v-21z" fill="none" stroke="#ffc53d" stroke-width="1.6" stroke-linejoin="round"/><path d="M15.5 19v-3a4.5 4.5 0 0 1 9 0v3" fill="none" stroke="#e8eefc" stroke-width="2.2" stroke-linecap="round"/><rect x="13" y="19" width="14" height="10.5" rx="2.2" fill="#e8eefc"/><circle cx="20" cy="23.6" r="1.6" fill="#0b1020"/><rect x="19.3" y="24" width="1.4" height="3" rx="0.7" fill="#0b1020"/></svg>
package/web/skins/orbital/ui/plasma.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><linearGradient id="f" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#c9e6ff"/><stop offset="0.5" stop-color="#5ba6ff"/><stop offset="1" stop-color="#3a3fd6"/></linearGradient></defs><path d="M8 0.6l5.6 7.4L8 15.4 2.4 8z" fill="url(#f)" stroke="#d8ecff" stroke-width="0.8" stroke-linejoin="round"/><path d="M8 0.6v14.8M2.4 8h11.2" stroke="#ffffff" stroke-opacity="0.35" stroke-width="0.6"/><path d="M8 2.4L5 6.6l3-1z" fill="#ffffff" fill-opacity="0.6"/></svg>
package/web/skins/orbital/ui/power.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><linearGradient id="f" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#8dffc8"/><stop offset="1" stop-color="#14b46f"/></linearGradient></defs><rect x="6" y="0.8" width="4" height="2" rx="0.6" fill="#9fb2c8"/><rect x="3.2" y="2.4" width="9.6" height="12.8" rx="2" fill="#0d1526" stroke="#9fb2c8" stroke-width="1"/><rect x="4.8" y="4" width="6.4" height="9.6" rx="1" fill="url(#f)"/><path d="M8.8 4.9L6.2 9.3h2l-1 3.8 2.6-4.6h-2z" fill="#0d1526" fill-opacity="0.75"/></svg>
package/web/theme.js CHANGED
@@ -7,6 +7,7 @@
7
7
  var skins = [
8
8
  { id: 'guild', name: 'Guild' },
9
9
  { id: 'professional', name: 'Professional' },
10
+ { id: 'orbital', name: 'Orbital' },
10
11
  ];
11
12
  window.agentGuildSkins = skins;
12
13