taskchef 7.11.1 → 7.12.1
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.
|
Binary file
|
package/package.json
CHANGED
package/src/dashboard/index.html
CHANGED
|
@@ -29,12 +29,22 @@
|
|
|
29
29
|
|
|
30
30
|
<main>
|
|
31
31
|
<section class="toolbar" aria-label="Task filters">
|
|
32
|
-
<
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
<
|
|
36
|
-
|
|
37
|
-
|
|
32
|
+
<div class="toolbar-primary">
|
|
33
|
+
<label>
|
|
34
|
+
Project
|
|
35
|
+
<select id="project-filter">
|
|
36
|
+
<option value="">All projects</option>
|
|
37
|
+
</select>
|
|
38
|
+
</label>
|
|
39
|
+
<label>
|
|
40
|
+
Updated
|
|
41
|
+
<select id="date-filter">
|
|
42
|
+
<option value="24h">Latest 24 hours</option>
|
|
43
|
+
<option value="7d">Latest 7 days</option>
|
|
44
|
+
<option value="all" selected>All time</option>
|
|
45
|
+
</select>
|
|
46
|
+
</label>
|
|
47
|
+
</div>
|
|
38
48
|
<fieldset class="status-filter-fieldset">
|
|
39
49
|
<legend>Status</legend>
|
|
40
50
|
<div id="status-filter" class="status-filter-options">
|
|
@@ -60,14 +70,6 @@
|
|
|
60
70
|
</label>
|
|
61
71
|
</div>
|
|
62
72
|
</fieldset>
|
|
63
|
-
<label>
|
|
64
|
-
Updated
|
|
65
|
-
<select id="date-filter">
|
|
66
|
-
<option value="24h">Latest 24 hours</option>
|
|
67
|
-
<option value="7d">Latest 7 days</option>
|
|
68
|
-
<option value="all" selected>All time</option>
|
|
69
|
-
</select>
|
|
70
|
-
</label>
|
|
71
73
|
<p id="task-count" class="task-count" aria-live="polite"></p>
|
|
72
74
|
</section>
|
|
73
75
|
|
package/src/dashboard/styles.css
CHANGED
|
@@ -20,7 +20,7 @@ body {
|
|
|
20
20
|
margin: 0;
|
|
21
21
|
background: var(--background);
|
|
22
22
|
color: var(--text);
|
|
23
|
-
line-height: 1.
|
|
23
|
+
line-height: 1.45;
|
|
24
24
|
}
|
|
25
25
|
|
|
26
26
|
button, select { font: inherit; }
|
|
@@ -35,71 +35,78 @@ button { color: inherit; }
|
|
|
35
35
|
display: flex;
|
|
36
36
|
align-items: flex-end;
|
|
37
37
|
justify-content: space-between;
|
|
38
|
-
gap:
|
|
39
|
-
padding-block:
|
|
38
|
+
gap: 20px;
|
|
39
|
+
padding-block: 40px 24px;
|
|
40
40
|
border-bottom: 1px solid var(--border);
|
|
41
41
|
}
|
|
42
42
|
|
|
43
43
|
h1, h2, h3, p { margin-top: 0; }
|
|
44
|
-
h1 { margin-bottom:
|
|
44
|
+
h1 { margin-bottom: 5px; font-size: clamp(1.9rem, 4.5vw, 3.1rem); line-height: 1; letter-spacing: -0.04em; }
|
|
45
45
|
h2 { line-height: 1.2; }
|
|
46
46
|
h3 { margin-bottom: 8px; font-size: 0.84rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
|
|
47
47
|
|
|
48
|
-
.title-row { display: flex; align-items: center; gap: clamp(
|
|
48
|
+
.title-row { display: flex; align-items: center; gap: clamp(9px, 1.8vw, 14px); margin-bottom: 5px; }
|
|
49
49
|
.title-row h1 { margin-bottom: 0; }
|
|
50
|
-
.dashboard-icon { display: block; flex: none; width: clamp(
|
|
50
|
+
.dashboard-icon { display: block; flex: none; width: clamp(36px, 5.5vw, 44px); aspect-ratio: 1; }
|
|
51
51
|
.dashboard-icon img { display: block; width: 100%; height: 100%; object-fit: contain; }
|
|
52
52
|
|
|
53
|
-
.eyebrow { margin-bottom:
|
|
53
|
+
.eyebrow { margin-bottom: 8px; color: var(--accent); font-size: 0.76rem; font-weight: 750; letter-spacing: 0.15em; text-transform: uppercase; }
|
|
54
54
|
.dashboard-version { margin-inline-start: 0.45em; color: var(--muted); font-size: 0.72rem; letter-spacing: 0.04em; text-transform: none; }
|
|
55
55
|
.subtitle, .task-project, time, .timestamp-missing { color: var(--muted); }
|
|
56
|
-
.subtitle { margin-bottom: 0; }
|
|
56
|
+
.subtitle { margin-bottom: 0; font-size: 0.9rem; }
|
|
57
57
|
|
|
58
|
-
.connection { display: flex; align-items: center; gap:
|
|
58
|
+
.connection { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 0.82rem; }
|
|
59
59
|
.connection-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--warning); }
|
|
60
60
|
.connection-dot.connected { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
|
|
61
61
|
|
|
62
|
-
main { padding-block:
|
|
62
|
+
main { padding-block: 24px 72px; }
|
|
63
63
|
|
|
64
64
|
.toolbar {
|
|
65
|
-
display:
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
65
|
+
display: grid;
|
|
66
|
+
gap: 10px;
|
|
67
|
+
margin-bottom: 18px;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.toolbar-primary {
|
|
71
|
+
display: grid;
|
|
72
|
+
grid-template-columns: repeat(2, minmax(180px, 240px));
|
|
73
|
+
align-items: end;
|
|
74
|
+
gap: 14px;
|
|
69
75
|
}
|
|
70
76
|
|
|
71
|
-
label { display: grid; gap:
|
|
72
|
-
select { min-width: 180px; padding:
|
|
73
|
-
.
|
|
74
|
-
.status-filter-fieldset
|
|
75
|
-
.status-filter-
|
|
76
|
-
.status-filter-
|
|
77
|
+
label { display: grid; gap: 5px; color: var(--muted); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
|
|
78
|
+
select { min-width: 180px; min-height: 36px; padding: 7px 32px 7px 10px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--text); }
|
|
79
|
+
.toolbar-primary select { width: 100%; }
|
|
80
|
+
.status-filter-fieldset { width: 100%; min-width: 0; margin: 0; padding: 0; border: 0; }
|
|
81
|
+
.status-filter-fieldset legend { margin-bottom: 5px; padding: 0; color: var(--muted); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
|
|
82
|
+
.status-filter-options { display: flex; flex-wrap: wrap; gap: 5px; }
|
|
83
|
+
.status-filter-option { position: relative; display: block; color: var(--text); font-size: 0.78rem; letter-spacing: 0; text-transform: none; cursor: pointer; }
|
|
77
84
|
.status-filter-option input { position: absolute; width: 1px; height: 1px; opacity: 0; }
|
|
78
|
-
.status-filter-option span { display:
|
|
85
|
+
.status-filter-option span { display: flex; align-items: center; min-height: 34px; padding: 5px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); white-space: nowrap; }
|
|
79
86
|
.status-filter-option:hover span { border-color: var(--accent); }
|
|
80
87
|
.status-filter-option:has(input:checked) span { border-color: var(--accent); background: var(--accent); color: white; box-shadow: 0 1px 2px rgb(24 33 29 / 16%); }
|
|
81
88
|
.status-filter-option:has(input:focus-visible) span { outline: 3px solid var(--accent); outline-offset: 3px; }
|
|
82
|
-
.task-count { margin: 0
|
|
89
|
+
.task-count { justify-self: end; margin: 0; color: var(--muted); font-size: 0.82rem; }
|
|
83
90
|
|
|
84
|
-
.task-list { display: grid; grid-template-columns: minmax(0, 1fr); gap:
|
|
85
|
-
.task-card { padding:
|
|
86
|
-
.task-heading { display: flex; align-items: flex-start; justify-content: space-between; gap:
|
|
87
|
-
.task-title { padding: 0; border: 0; background: none; font-size:
|
|
91
|
+
.task-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
|
|
92
|
+
.task-card { padding: 16px 18px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); box-shadow: 0 1px 0 rgb(0 0 0 / 2%); }
|
|
93
|
+
.task-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
|
|
94
|
+
.task-title { padding: 0; border: 0; background: none; font-size: 1rem; font-weight: 720; line-height: 1.35; text-align: left; cursor: pointer; }
|
|
88
95
|
.task-title:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
|
|
89
|
-
.task-project { margin:
|
|
96
|
+
.task-project { margin: 2px 0 10px; font-size: 0.8rem; }
|
|
90
97
|
.task-title, .task-summary { overflow-wrap: anywhere; }
|
|
91
|
-
.task-summary { display: grid; max-width:
|
|
92
|
-
.task-summary strong { margin-top:
|
|
93
|
-
time, .timestamp-missing { font-size: 0.
|
|
98
|
+
.task-summary { display: grid; max-width: 82ch; margin-bottom: 12px; gap: 2px; font-size: 0.9rem; line-height: 1.45; }
|
|
99
|
+
.task-summary strong { margin-top: 4px; color: var(--muted); font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase; }
|
|
100
|
+
time, .timestamp-missing { font-size: 0.75rem; }
|
|
94
101
|
.timestamp-toggle { padding: 2px 0; border: 0; background: none; cursor: pointer; text-align: left; }
|
|
95
102
|
.timestamp-toggle:hover time { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
|
|
96
|
-
.task-footer { display: flex; align-items: center; justify-content: space-between; gap:
|
|
103
|
+
.task-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
|
|
97
104
|
.task-open { flex: none; }
|
|
98
|
-
.task-action { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height:
|
|
105
|
+
.primary-button.task-action, .secondary-button.task-action { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; padding: 5px 9px; font-size: 0.78rem; line-height: 1.2; white-space: nowrap; }
|
|
99
106
|
.codex-icon { display: block; flex: none; width: 18px; height: 18px; }
|
|
100
107
|
.codex-icon img { display: block; width: 100%; height: 100%; object-fit: contain; }
|
|
101
108
|
|
|
102
|
-
.status { flex: none; padding:
|
|
109
|
+
.status { flex: none; padding: 3px 8px; border-radius: 999px; background: var(--surface-muted); color: var(--muted); font-size: 0.68rem; font-weight: 750; line-height: 1.4; text-transform: capitalize; }
|
|
103
110
|
.status-completed { background: var(--accent-soft); color: var(--accent); }
|
|
104
111
|
.status-failed { background: #f3dfdd; color: var(--danger); }
|
|
105
112
|
.status-needs_input { background: #f4e9ce; color: var(--warning); }
|
|
@@ -157,20 +164,28 @@ pre { max-height: 280px; margin: 0; padding: 14px; overflow: auto; border-radius
|
|
|
157
164
|
:focus-visible { outline: 3px solid rgb(33 95 74 / 35%); outline-offset: 3px; }
|
|
158
165
|
|
|
159
166
|
@media (max-width: 650px) {
|
|
160
|
-
.site-header { align-items: flex-start; padding-top:
|
|
167
|
+
.site-header { align-items: flex-start; gap: 14px; padding-top: 28px; }
|
|
161
168
|
.title-row { align-items: flex-start; }
|
|
162
|
-
.toolbar {
|
|
163
|
-
.toolbar label, .toolbar select { width: 100%; }
|
|
169
|
+
.toolbar-primary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
|
170
|
+
.toolbar-primary label, .toolbar-primary select { width: 100%; min-width: 0; }
|
|
164
171
|
.toolbar .status-filter-option { width: auto; }
|
|
165
|
-
.task-count {
|
|
172
|
+
.task-count { justify-self: start; }
|
|
166
173
|
.task-heading { align-items: flex-start; }
|
|
174
|
+
.task-title, .timestamp-toggle { display: flex; align-items: center; min-height: 36px; }
|
|
167
175
|
.task-footer { align-items: flex-start; flex-direction: column; }
|
|
168
176
|
.task-open { align-self: flex-start; }
|
|
177
|
+
select { min-height: 40px; }
|
|
178
|
+
.status-filter-option span { min-height: 38px; }
|
|
179
|
+
.primary-button.task-action, .secondary-button.task-action { min-height: 40px; }
|
|
169
180
|
.dialog-actions { align-items: center; flex-flow: row wrap; }
|
|
170
181
|
.metadata { grid-template-columns: 1fr; }
|
|
171
182
|
.metadata dt { padding-bottom: 0; border-bottom: 0; }
|
|
172
183
|
}
|
|
173
184
|
|
|
185
|
+
@media (max-width: 480px) {
|
|
186
|
+
.toolbar-primary { grid-template-columns: minmax(0, 1fr); }
|
|
187
|
+
}
|
|
188
|
+
|
|
174
189
|
@media (prefers-color-scheme: dark) {
|
|
175
190
|
:root {
|
|
176
191
|
color-scheme: dark;
|