Skip to content

Commit 551b89f

Browse files
goodguy1963goodguy1963
committed
feat: update demo assets and version to 2.1.6
1 parent b7b1153 commit 551b89f

8 files changed

Lines changed: 139 additions & 88 deletions

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ That structure keeps the LLM as the native execution chat surface while Copilot
3838

3939
## 🎬 Demo
4040

41-
[![Watch the Copilot Cockpit intro video](https://raw.githubusercontent.com/goodguy1963/Copilot-Cockpit/main/images/DEMO%20v2.gif)](https://www.youtube.com/watch?v=yiJCmwmxEFc)
41+
[![Watch the Copilot Cockpit intro video](https://raw.githubusercontent.com/goodguy1963/Copilot-Cockpit/main/images/DEMO%20v21.gif)](https://www.youtube.com/watch?v=yiJCmwmxEFc)
4242

4343
Use the feature tour below for the slower tab-by-tab explanation.
4444

‎docs/media-reference.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ Use this page as the current media baseline for public-facing docs in this repos
44

55
## Live Product Footage
66

7-
- `images/DEMO v2.gif` is the current live product demo asset used in the README and getting-started guide.
7+
- `images/DEMO v21.gif` is the current live product demo asset used in the README and getting-started guide.
88
- The linked YouTube demo shows the extension running in VS Code.
99

1010
## Illustrative Mockups

‎images/DEMO v21.gif‎

21.5 MB
Loading

‎package-lock.json‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"name": "copilot-cockpit",
33
"displayName": "Copilot Cockpit",
44
"description": "The AI control layer for GitHub Copilot — a persistent AI workflow cockpit inside VS Code with planning, review gates, and an agent crew for the heavy lifting.",
5-
"version": "2.1.4",
5+
"version": "2.1.6",
66
"publisher": "local-dev",
77
"license": "SEE LICENSE IN LICENSE",
88
"icon": "images/icon.png",

‎src/cockpitWebview.ts‎

Lines changed: 103 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -929,13 +929,21 @@ ${buildSchedulerWebviewSharedStyles()}
929929
}
930930
931931
.help-panel {
932+
--help-accent: color-mix(in srgb, var(--vscode-textLink-foreground, #3794ff) 55%, var(--vscode-foreground) 45%);
933+
--help-accent-dim: color-mix(in srgb, var(--vscode-textLink-foreground, #3794ff) 12%, transparent);
934+
--help-card-bg: color-mix(in srgb, var(--vscode-editorWidget-background) 66%, var(--vscode-editor-background) 34%);
935+
--help-card-hover: color-mix(in srgb, var(--vscode-textLink-foreground, #3794ff) 5%, var(--vscode-editorWidget-background) 95%);
936+
--help-muted: color-mix(in srgb, var(--vscode-descriptionForeground) 92%, var(--vscode-foreground) 8%);
937+
--help-icon: color-mix(in srgb, var(--vscode-textLink-foreground, #3794ff) 52%, var(--vscode-descriptionForeground) 48%);
932938
position: relative;
933939
display: grid;
934-
gap: 0.625rem;
940+
gap: 10px;
935941
isolation: isolate;
936-
overflow: hidden; /* clip */
937-
padding: 6px;
938-
border-radius: 16px;
942+
overflow: hidden;
943+
padding: 8px;
944+
border-radius: 12px;
945+
border: 1px solid var(--vscode-panel-border);
946+
background: var(--vscode-editor-background);
939947
}
940948
941949
.help-panel > :not(.help-warp-layer) {
@@ -949,20 +957,20 @@ ${buildSchedulerWebviewSharedStyles()}
949957
z-index: 0;
950958
pointer-events: none;
951959
opacity: 0;
952-
overflow: hidden; /* truncate */
953-
border-radius: 16px;
954-
transition: opacity 0.6s ease;
960+
overflow: hidden;
961+
border-radius: 12px;
962+
transition: opacity 0.8s ease;
955963
}
956964
957965
.help-warp-layer::before {
958966
content: "";
959967
position: absolute;
960968
inset: -15% -12%;
961969
background:
962-
radial-gradient(circle at 18% 50%, color-mix(in srgb, var(--vscode-focusBorder) 34%, transparent) 0%, transparent 36%),
963-
radial-gradient(circle at 30% 52%, color-mix(in srgb, var(--vscode-editorInfo-foreground, #5cc8ff) 30%, transparent) 0%, transparent 22%),
964-
linear-gradient(110deg, transparent 0%, color-mix(in srgb, var(--vscode-focusBorder) 10%, transparent) 38%, color-mix(in srgb, var(--vscode-editorInfo-foreground, #5cc8ff) 18%, transparent) 52%, transparent 78%);
965-
filter: blur(22px);
970+
radial-gradient(circle at 18% 50%, var(--help-accent-dim) 0%, transparent 36%),
971+
radial-gradient(circle at 30% 52%, var(--help-accent-dim) 0%, transparent 22%),
972+
linear-gradient(110deg, transparent 0%, color-mix(in srgb, var(--vscode-textLink-foreground, #3794ff) 4%, transparent) 38%, color-mix(in srgb, var(--vscode-textLink-foreground, #3794ff) 6%, transparent) 52%, transparent 78%);
973+
filter: blur(24px);
966974
opacity: 0;
967975
transform: scale(1.08);
968976
}
@@ -972,11 +980,11 @@ ${buildSchedulerWebviewSharedStyles()}
972980
position: absolute;
973981
inset: 0;
974982
background-image:
975-
radial-gradient(circle at 10% 18%, color-mix(in srgb, var(--vscode-editorInfo-foreground, #5cc8ff) 70%, transparent) 0 1px, transparent 1.8px),
976-
radial-gradient(circle at 22% 71%, color-mix(in srgb, var(--vscode-focusBorder) 72%, transparent) 0 1px, transparent 1.8px),
977-
radial-gradient(circle at 78% 36%, color-mix(in srgb, white 65%, transparent) 0 1px, transparent 1.7px),
978-
radial-gradient(circle at 64% 82%, color-mix(in srgb, var(--vscode-editorInfo-foreground, #5cc8ff) 55%, transparent) 0 1px, transparent 1.7px),
979-
radial-gradient(circle at 90% 14%, color-mix(in srgb, white 58%, transparent) 0 1px, transparent 1.8px);
983+
radial-gradient(circle at 10% 18%, color-mix(in srgb, var(--vscode-textLink-foreground, #3794ff) 35%, transparent) 0 1px, transparent 1.8px),
984+
radial-gradient(circle at 22% 71%, color-mix(in srgb, var(--vscode-textLink-foreground, #3794ff) 28%, transparent) 0 1px, transparent 1.8px),
985+
radial-gradient(circle at 78% 36%, color-mix(in srgb, white 38%, transparent) 0 1px, transparent 1.7px),
986+
radial-gradient(circle at 64% 82%, color-mix(in srgb, var(--vscode-textLink-foreground, #3794ff) 22%, transparent) 0 1px, transparent 1.7px),
987+
radial-gradient(circle at 90% 14%, color-mix(in srgb, white 32%, transparent) 0 1px, transparent 1.8px);
980988
opacity: 0;
981989
}
982990
@@ -985,11 +993,11 @@ ${buildSchedulerWebviewSharedStyles()}
985993
}
986994
987995
.help-warp-layer.is-active::before {
988-
animation: helpWarpGlow 10s ease-out forwards;
996+
animation: helpWarpGlow 12s ease-out forwards;
989997
}
990998
991999
.help-warp-layer.is-active::after {
992-
animation: helpWarpStars 10s linear forwards;
1000+
animation: helpWarpStars 12s linear forwards;
9931001
}
9941002
9951003
.help-warp-layer.is-fading {
@@ -1007,62 +1015,57 @@ ${buildSchedulerWebviewSharedStyles()}
10071015
background: linear-gradient(
10081016
90deg,
10091017
transparent 0%,
1010-
color-mix(in srgb, white 14%, transparent) 12%,
1011-
color-mix(in srgb, var(--vscode-editorInfo-foreground, #5cc8ff) 65%, white 35%) 55%,
1018+
color-mix(in srgb, white 10%, transparent) 12%,
1019+
color-mix(in srgb, var(--vscode-textLink-foreground, #3794ff) 30%, white 30%) 55%,
10121020
transparent 100%
10131021
);
10141022
box-shadow:
1015-
0 0 8px color-mix(in srgb, var(--vscode-editorInfo-foreground, #5cc8ff) 28%, transparent),
1016-
0 0 18px color-mix(in srgb, var(--vscode-focusBorder) 20%, transparent);
1023+
0 0 6px color-mix(in srgb, var(--vscode-textLink-foreground, #3794ff) 14%, transparent),
1024+
0 0 12px color-mix(in srgb, var(--vscode-textLink-foreground, #3794ff) 8%, transparent);
10171025
filter: blur(0.25px);
10181026
transform-origin: left center;
10191027
transform: translate3d(-12vw, 0, 0) scaleX(0.22) rotate(var(--warp-rotate, 0deg));
10201028
animation: helpWarpFlight var(--warp-duration, 1.6s) linear var(--warp-delay, 0s) infinite;
10211029
}
10221030
10231031
.help-intro {
1024-
border: 1px solid var(--vscode-panel-border); /* edge */
1025-
border-radius: 8px;
1026-
padding: 10px 14px 12px 14px;
1027-
background: linear-gradient(
1028-
135deg,
1029-
color-mix(in srgb, var(--vscode-editorWidget-background) 86%, var(--vscode-editor-background) 14%) 0%,
1030-
var(--vscode-editor-background) 100%);
1032+
border: 1px solid var(--vscode-panel-border);
1033+
border-radius: 10px;
1034+
padding: 12px 16px;
1035+
background: var(--help-card-bg);
10311036
}
10321037
10331038
.help-intro-title {
1034-
margin: 0 0 4px 0;
1039+
margin: 0 0 6px 0;
10351040
display: flex;
10361041
align-items: center;
1037-
gap: 10px; // local-diverge-991
1038-
font-size: 0.875rem;
1042+
gap: 10px;
1043+
font-size: 0.9375rem;
10391044
font-weight: 700;
1040-
line-height: 1.2;
1045+
line-height: 1.25;
1046+
letter-spacing: -0.01em;
10411047
}
10421048
10431049
.help-intro-rocket {
10441050
display: inline-flex;
10451051
align-items: center;
10461052
justify-content: center;
1047-
width: 34px;
1048-
height: 34px;
1053+
width: 36px;
1054+
height: 36px;
10491055
padding: 0;
1050-
border: 1px solid color-mix(in srgb, var(--vscode-focusBorder) 45%, var(--vscode-panel-border));
1056+
border: 1px solid var(--vscode-panel-border);
10511057
border-radius: 999px;
1052-
background:
1053-
radial-gradient(circle at 30% 30%, color-mix(in srgb, white 34%, transparent) 0%, transparent 52%),
1054-
linear-gradient(135deg, color-mix(in srgb, var(--vscode-focusBorder) 30%, transparent), color-mix(in srgb, var(--vscode-editorInfo-foreground, #5cc8ff) 24%, transparent));
1058+
background: var(--help-card-bg);
10551059
color: var(--vscode-foreground);
10561060
cursor: pointer;
1057-
box-shadow: 0 0 0 1px color-mix(in srgb, white 4%, transparent), 0 10px 24px color-mix(in srgb, var(--vscode-focusBorder) 18%, transparent);
1058-
transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
1061+
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
10591062
flex: 0 0 auto;
10601063
}
10611064
10621065
.help-intro-rocket:hover {
10631066
transform: translateY(-1px) scale(1.04);
1064-
box-shadow: 0 0 0 1px color-mix(in srgb, white 8%, transparent), 0 12px 26px color-mix(in srgb, var(--vscode-focusBorder) 24%, transparent);
1065-
border-color: color-mix(in srgb, var(--vscode-focusBorder) 70%, white 30%);
1067+
box-shadow: 0 2px 12px color-mix(in srgb, var(--vscode-textLink-foreground, #3794ff) 18%, transparent);
1068+
border-color: var(--help-accent);
10661069
}
10671070
10681071
.help-intro-rocket:focus-visible {
@@ -1086,14 +1089,14 @@ ${buildSchedulerWebviewSharedStyles()}
10861089
}
10871090
10881091
.help-intro-title-text {
1089-
min-width: 0px; /* flex-fix */
1092+
min-width: 0px;
10901093
}
10911094
10921095
.help-intro-body {
10931096
margin: 0;
1094-
color: var(--vscode-descriptionForeground);
1095-
font-size: 0.6875rem;
1096-
line-height: 1.45;
1097+
color: var(--help-muted);
1098+
font-size: 0.75rem;
1099+
line-height: 1.55;
10971100
}
10981101
10991102
.help-grid {
@@ -1104,70 +1107,101 @@ ${buildSchedulerWebviewSharedStyles()}
11041107
}
11051108
11061109
.help-section {
1107-
border: 1px solid var(--vscode-panel-border); /* outline */
1110+
border: 1px solid var(--vscode-panel-border);
11081111
border-radius: 8px;
1109-
padding: 10px 12px;
1110-
background-color: var(--vscode-editor-background);
1112+
padding: 12px 14px;
1113+
background: var(--help-card-bg);
11111114
display: grid;
1112-
gap: 7px;
1115+
gap: 8px;
1116+
transition: background 0.15s ease, border-color 0.15s ease;
1117+
cursor: default;
1118+
}
1119+
1120+
.help-section:hover {
1121+
background: var(--help-card-hover);
1122+
border-color: color-mix(in srgb, var(--vscode-textLink-foreground, #3794ff) 25%, var(--vscode-panel-border) 75%);
11131123
}
11141124
11151125
.help-section.is-featured {
11161126
grid-column: 1 / -1;
1117-
background: color-mix(in srgb, var(--vscode-editor-background) 88%, var(--vscode-focusBorder) 12%);
1127+
border-left: 3px solid var(--help-accent);
11181128
}
11191129
11201130
.help-section h3 {
11211131
margin: 0;
1122-
font-size: 12px;
1132+
font-size: 0.8125rem;
1133+
font-weight: 600;
1134+
display: flex;
1135+
align-items: center;
1136+
gap: 7px;
1137+
letter-spacing: -0.01em;
1138+
}
1139+
1140+
.help-section-icon {
1141+
display: inline-flex;
1142+
align-items: center;
1143+
justify-content: center;
1144+
width: 20px;
1145+
height: 20px;
1146+
flex: 0 0 auto;
1147+
color: var(--help-icon);
1148+
}
1149+
1150+
.help-section-icon svg {
1151+
width: 16px;
1152+
height: 16px;
11231153
}
11241154
11251155
.help-section p {
11261156
margin: 0;
1127-
color: var(--vscode-descriptionForeground);
1128-
line-height: 1.4;
1129-
font-size: 12px;
1157+
color: var(--help-muted);
1158+
line-height: 1.5;
1159+
font-size: 0.75rem;
11301160
}
11311161
11321162
.help-section ul {
11331163
margin: 0;
1134-
padding-left: 18px;
1135-
color: var(--vscode-descriptionForeground);
1136-
line-height: 1.38;
1137-
font-size: 12px;
1164+
padding-left: 20px;
1165+
color: var(--help-muted);
1166+
line-height: 1.55;
1167+
font-size: 0.75rem;
11381168
}
11391169
11401170
.help-section li + li {
1141-
margin-top: 5px;
1171+
margin-top: 6px;
1172+
}
1173+
1174+
.help-section li::marker {
1175+
color: var(--help-icon);
11421176
}
11431177
11441178
.help-flow-diagram {
11451179
display: flex;
11461180
flex-wrap: wrap;
11471181
align-items: center;
11481182
gap: 6px;
1149-
padding: 8px 10px;
1183+
padding: 10px 12px;
11501184
border: 1px solid var(--vscode-panel-border);
11511185
border-radius: 10px;
1152-
background: color-mix(in srgb, var(--vscode-editorWidget-background) 90%, transparent);
1186+
background: var(--vscode-editor-background);
11531187
}
11541188
11551189
.help-flow-node {
11561190
display: inline-flex;
11571191
align-items: center;
11581192
min-height: 28px;
1159-
padding: 4px 9px;
1193+
padding: 4px 10px;
11601194
border-radius: 999px;
1161-
border: 1px solid color-mix(in srgb, var(--vscode-focusBorder) 22%, var(--vscode-panel-border));
1162-
background: color-mix(in srgb, var(--vscode-editor-background) 88%, transparent);
1195+
border: 1px solid var(--vscode-panel-border);
1196+
background: var(--help-card-bg);
11631197
color: var(--vscode-foreground);
1164-
font-size: 11px;
1165-
font-weight: 700;
1198+
font-size: 0.6875rem;
1199+
font-weight: 600;
11661200
line-height: 1.25;
11671201
}
11681202
11691203
.help-flow-arrow {
1170-
color: var(--vscode-descriptionForeground);
1204+
color: var(--help-accent);
11711205
font-size: 14px;
11721206
font-weight: 700;
11731207
line-height: 1;

0 commit comments

Comments
 (0)