Skip to content

Composable text interfaces over graphical abstractions #914

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
latent-capital wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Composable text interfaces over graphical abstractions #914

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 8 additions & 8 deletions common/util-common.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,13 +70,13 @@ export function statusName(status : number) : string {
export function statusNameShort(status : number) : string {
switch (status) {
case CREATED_FILE:
return "inactive";
return "I";
case CREATED_STACK:
return "inactive";
return "I";
case RUNNING:
return "active";
return "A";
case EXITED:
return "exited";
return "E";
Comment on lines +73 to +79
Copy link

Copilot AI Jan 18, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The status names have been abbreviated to single letters (I, A, E). While this aligns with the "text interfaces" theme, single-letter abbreviations are ambiguous and reduce clarity. Users may not immediately understand what "I", "A", and "E" represent without additional context or documentation. Consider whether this change improves or hinders user experience, especially for new users or in accessibility contexts where screen readers would announce single letters.

Copilot uses AI. Check for mistakes.
default:
return "?";
}
Expand All @@ -99,11 +99,11 @@ export function statusColor(status : number) : string {

export const isDev = process.env.NODE_ENV === "development";
export const TERMINAL_COLS = 105;
export const TERMINAL_ROWS = 10;
export const PROGRESS_TERMINAL_ROWS = 8;
export const TERMINAL_ROWS = 15;
export const PROGRESS_TERMINAL_ROWS = 15;

export const COMBINED_TERMINAL_COLS = 58;
export const COMBINED_TERMINAL_ROWS = 20;
export const COMBINED_TERMINAL_COLS = 120;
export const COMBINED_TERMINAL_ROWS = 40;

export const ERROR_TYPE_VALIDATION = 1;

Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/Container.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -297,7 +297,7 @@ export default defineComponent({

.container {
.image {
font-size: 0.8rem;
font-size: 0.6rem;
color: #6c757d;
.tag {
color: #33383b;
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/NetworkInput.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -221,7 +221,7 @@ export default {

.delete {
text-decoration: underline;
font-size: 13px;
font-size: 10px;
cursor: pointer;
}
</style>
2 changes: 1 addition & 1 deletion frontend/src/components/StackList.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -366,7 +366,7 @@ export default {

.list-header {
border-bottom: 1px solid #dee2e6;
border-radius: 10px 10px 0 0;
border-radius: 2px 2px 0 0;
margin: -10px;
margin-bottom: 10px;
padding: 10px;
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/components/StackListItem.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -134,7 +134,7 @@ export default {
display: flex;
align-items: center;
min-height: 52px;
border-radius: 10px;
border-radius: 2px;
transition: all ease-in-out 0.15s;
width: 100%;
padding: 5px 8px;
Expand All @@ -151,7 +151,7 @@ export default {
margin-top: -4px;
}
.endpoint {
font-size: 12px;
font-size: 9px;
Copy link

Copilot AI Jan 18, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The endpoint font size has been reduced from 12px to 9px, which is extremely small and below accessibility guidelines. This information is important for identifying the endpoint context and should remain legible.

Suggested change
font-size: 9px;
font-size: 12px;

Copilot uses AI. Check for mistakes.
color: $dark-font-color3;
}
}
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/Terminal.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ export default {
}

this.terminal = new Terminal({
fontSize: 14,
fontSize: 11,
Copy link

Copilot AI Jan 18, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The terminal font size has been reduced from 14px to 11px. Terminal output needs to be clearly readable as it often contains important system information, error messages, and logs that developers rely on for debugging and monitoring.

Suggested change
fontSize: 11,
fontSize: 14,

Copilot uses AI. Check for mistakes.
fontFamily: "'JetBrains Mono', monospace",
cursorBlink,
cols: this.cols,
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/components/Uptime.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,12 +44,12 @@ export default {

<style scoped>
.badge {
min-width: 62px;
min-width: 20px;

}

.fixed-width {
width: 62px;
width: 20px;
Comment on lines +47 to +52
Copy link

Copilot AI Jan 18, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The badge width has been reduced from 62px to 20px, which is a dramatic reduction that may cause text truncation or overflow issues. The extremely narrow width may not accommodate even short status labels or icons properly, leading to UI rendering problems.

Copilot uses AI. Check for mistakes.
overflow: hidden;
text-overflow: ellipsis;
}
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/components/settings/About.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,11 +51,11 @@ export default {
}

.update-link {
font-size: 0.8em;
font-size: 0.6em;
}

.frontend-version {
font-size: 0.9em;
font-size: 0.67em;
color: #cccccc;

.dark & {
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/settings/GlobalEnv.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@ export default {
<style scoped lang="scss">
.editor-box {
font-family: 'JetBrains Mono', monospace;
font-size: 14px;
font-size: 11px;

&.edit-mode {
background-color: #2c2f38 !important;
Expand Down
10 changes: 5 additions & 5 deletions frontend/src/layouts/Layout.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -183,7 +183,7 @@ export default {
display: inline-block;
height: 100%;
padding: 8px 10px 0;
font-size: 13px;
font-size: 10px;
color: #c1c1c1;
overflow: hidden;
text-decoration: none;
Expand All @@ -194,7 +194,7 @@ export default {
}

div {
font-size: 20px;
font-size: 15px;
}
}
}
Expand Down Expand Up @@ -242,7 +242,7 @@ main {
padding-left: 0;
padding-bottom: 0;
margin-top: 8px !important;
border-radius: 16px;
border-radius: 2px;
overflow: hidden;

.dropdown-divider {
Expand All @@ -252,7 +252,7 @@ main {
}

.dropdown-item-text {
font-size: 14px;
font-size: 11px;
padding-bottom: 0.7rem;
}

Expand Down Expand Up @@ -291,7 +291,7 @@ main {
margin-right: 5px;
border-radius: 50rem;
font-weight: bold;
font-size: 10px;
font-size: 8px;
Copy link

Copilot AI Jan 18, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The badge font size has been reduced from 10px to 8px, which is extremely small and likely to be illegible for most users. This is significantly below accessibility guidelines and may violate WCAG standards.

Suggested change
font-size: 8px;
font-size: 10px;

Copilot uses AI. Check for mistakes.
}
}

Expand Down
34 changes: 17 additions & 17 deletions frontend/src/pages/Compose.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,6 +106,19 @@
</div>
</div>

<!-- Combined Terminal Output -->
<div v-show="!isEditMode">
<h4 class="mb-3">{{ $t("terminal") }}</h4>
<Terminal
ref="combinedTerminal"
class="mb-3 terminal"
:name="combinedTerminalName"
:endpoint="endpoint"
:rows="combinedTerminalRows"
:cols="combinedTerminalCols"
></Terminal>
</div>
Comment on lines +109 to +120
Copy link

Copilot AI Jan 18, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The Combined Terminal Output section has been moved from after the Containers section to before it. This reordering changes the visual flow and may affect user expectations about where to find terminal output. Additionally, the inline style "height: 315px;" was removed, which could impact the terminal display consistency unless the new CSS rules properly handle the sizing.

Copilot uses AI. Check for mistakes.

<!-- Containers -->
<h4 class="mb-3">{{ $tc("container", 2) }}</h4>

Expand Down Expand Up @@ -148,20 +161,6 @@
</div>
</div>
</div>

<!-- Combined Terminal Output -->
<div v-show="!isEditMode">
<h4 class="mb-3">{{ $t("terminal") }}</h4>
<Terminal
ref="combinedTerminal"
class="mb-3 terminal"
:name="combinedTerminalName"
:endpoint="endpoint"
:rows="combinedTerminalRows"
:cols="combinedTerminalCols"
style="height: 315px;"
></Terminal>
</div>
</div>
<div class="col-lg-6">
<h4 class="mb-3">{{ stack.composeFileName }}</h4>
Expand Down Expand Up @@ -785,16 +784,17 @@ export default {
@import "../styles/vars.scss";

.terminal {
height: 200px;
height: auto;
min-height: 400px;
}

Comment on lines +788 to 790
Copy link

Copilot AI Jan 18, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The terminal height has been changed from a fixed "200px" to "auto" with a "min-height: 400px". While this provides more flexibility, the significant increase in minimum height (from 200px to 400px) may cause layout issues on smaller screens or when multiple terminals are visible. Consider whether this large minimum height is appropriate for all use cases.

Suggested change
min-height: 400px;
}
min-height: 200px;
}
@media (min-height: 700px) {
.terminal {
min-height: 400px;
}
}

Copilot uses AI. Check for mistakes.
.editor-box {
font-family: 'JetBrains Mono', monospace;
font-size: 14px;
font-size: 11px;
Copy link

Copilot AI Jan 18, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The font size has been reduced from 14px to 11px for code editor content. Code editors require good readability for developers to write and debug code effectively, and reducing the font size may lead to eye strain and errors.

Suggested change
font-size: 11px;
font-size: 14px;

Copilot uses AI. Check for mistakes.
}

.agent-name {
font-size: 13px;
font-size: 10px;
color: $dark-font-color3;
}
</style>
6 changes: 3 additions & 3 deletions frontend/src/pages/Dashboard.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
<template>
<div class="container-fluid">
<div class="row">
<div v-if="!$root.isMobile" class="col-12 col-md-4 col-xl-3">
<div v-if="!$root.isMobile" class="col-12 col-md-2 col-xl-2">
<div>
<router-link to="/compose" class="btn btn-primary mb-3"><font-awesome-icon icon="plus" /> {{ $t("compose") }}</router-link>
</div>
<StackList :scrollbar="true" />
</div>

<div ref="container" class="col-12 col-md-8 col-xl-9 mb-3">
<div ref="container" class="col-12 col-md-10 col-xl-10 mb-3">
Comment on lines +4 to +11
Copy link

Copilot AI Jan 18, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The sidebar column width has been significantly reduced from col-md-4/col-xl-3 to col-md-2/col-xl-2, with the main content area increased from col-md-8/col-xl-9 to col-md-10/col-xl-10. This dramatic reduction in sidebar width may cause layout issues, text wrapping problems, or make navigation elements too cramped, especially with the smaller font sizes introduced elsewhere in this PR.

Copilot uses AI. Check for mistakes.
<!-- Add :key to disable vue router re-use the same component -->
<router-view :key="$route.fullPath" :calculatedHeight="height" />
</div>
Expand Down Expand Up @@ -37,6 +37,6 @@ export default {

<style lang="scss" scoped>
.container-fluid {
width: 98%;
width: 100%;
Copy link

Copilot AI Jan 18, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The container width has been changed from 98% to 100%, which removes the intentional margin/padding. This may cause content to touch the viewport edges, potentially impacting visual comfort and readability, especially on larger screens where some whitespace is typically desirable.

Suggested change
width: 100%;
width: 98%;
margin: 0 auto;

Copilot uses AI. Check for mistakes.
}
</style>
8 changes: 4 additions & 4 deletions frontend/src/pages/DashboardHome.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@
<div class="col-md-5">
<!-- Agent List -->
<div class="shadow-box big-padding">
<h4 class="mb-3">{{ $tc("dockgeAgent", 2) }} <span class="badge bg-warning" style="font-size: 12px;">beta</span></h4>
<h4 class="mb-3">{{ $tc("dockgeAgent", 2) }} <span class="badge bg-warning" style="font-size: 9px;">beta</span></h4>
Copy link

Copilot AI Jan 18, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The badge font size has been reduced from 12px to 9px, which is significantly below accessibility guidelines. Text this small may be illegible to many users, especially on standard resolution displays.

Suggested change
<h4 class="mb-3">{{ $tc("dockgeAgent", 2) }} <span class="badge bg-warning" style="font-size: 9px;">beta</span></h4>
<h4 class="mb-3">{{ $tc("dockgeAgent", 2) }} <span class="badge bg-warning" style="font-size: 12px;">beta</span></h4>

Copilot uses AI. Check for mistakes.

<div v-for="(agent, endpoint) in $root.agentList" :key="endpoint" class="mb-3 agent">
<!-- Agent Status -->
Expand Down Expand Up @@ -294,7 +294,7 @@ export default {
@import "../styles/vars";

.num {
font-size: 30px;
font-size: 23px;

font-weight: bold;
display: block;
Expand All @@ -313,7 +313,7 @@ export default {
}

table {
font-size: 14px;
font-size: 11px;

tr {
transition: all ease-in-out 0.2ms;
Expand All @@ -328,7 +328,7 @@ table {
.docker-run {
border: none;
font-family: 'JetBrains Mono', monospace;
font-size: 15px;
font-size: 11px;
}

.first-row .shadow-box {
Expand Down
8 changes: 4 additions & 4 deletions frontend/src/pages/Settings.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -184,7 +184,7 @@ export default {

footer {
color: #aaa;
font-size: 13px;
font-size: 10px;
Copy link

Copilot AI Jan 18, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The footer font size has been reduced from 13px to 10px, which is below accessibility guidelines. Footer text often contains important legal, copyright, or navigation information that should remain readable.

Suggested change
font-size: 10px;
font-size: 13px;

Copilot uses AI. Check for mistakes.
margin-top: 20px;
padding-bottom: 30px;
text-align: center;
Expand All @@ -196,7 +196,7 @@ footer {
}

.menu-item {
border-radius: 10px;
border-radius: 2px;
margin: 0.5em;
padding: 0.7em 1em;
cursor: pointer;
Expand Down Expand Up @@ -228,11 +228,11 @@ footer {
.settings-content-header {
width: calc(100% + 20px);
border-bottom: 1px solid #dee2e6;
border-radius: 0 10px 0 0;
border-radius: 0 2px 0 0;
margin-top: -20px;
margin-right: -20px;
padding: 12.5px 1em;
font-size: 26px;
font-size: 20px;

.dark & {
background: $dark-header-bg;
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/pages/Setup.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<form @submit.prevent="submit">
<div>
<object width="64" height="64" data="/icon.svg" />
<div style="font-size: 28px; font-weight: bold; margin-top: 5px;">
<div style="font-size: 21px; font-weight: bold; margin-top: 5px;">
Dockge
</div>
</div>
Expand Down
Loading
Loading