feat(dashboard): deal a generated name into the create-box dialog #908
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,57 @@ | ||
| /* | ||
| * Copyright 2025 Daytona Platforms Inc. | ||
| * Modified by BoxLite AI, 2025-2026 | ||
| * SPDX-License-Identifier: AGPL-3.0 | ||
| */ | ||
|
|
||
| import { useCallback, useEffect, useRef, useState } from 'react' | ||
| import { generateBoxName } from '@boxlite-ai/box-name' | ||
| import { scrambleFrame } from '@/lib/scramble' | ||
|
|
||
| const REVEAL_MS = 460 // duration of the left-to-right lock-in | ||
| const FRAME_MS = 42 // animation tick | ||
|
|
||
| // Generates a box name locally (shared @boxlite-ai/box-name lib — the same | ||
| // generator the server uses for unnamed creates) and reveals it with a | ||
| // "decode" animation, so the name feels handed to the user rather than typed. | ||
| // `onName` receives the final name; the dialog stores it as the editable field | ||
| // value, not a placeholder. | ||
| export function useGeneratedBoxName(onName: (name: string) => void) { | ||
| const [display, setDisplay] = useState('') | ||
| const [isGenerating, setIsGenerating] = useState(false) | ||
| const timer = useRef<ReturnType<typeof setInterval> | undefined>(undefined) | ||
| const onNameRef = useRef(onName) | ||
| onNameRef.current = onName | ||
|
|
||
| const clearTimer = () => { | ||
| if (timer.current) clearInterval(timer.current) | ||
| timer.current = undefined | ||
| } | ||
|
|
||
| const generate = useCallback(() => { | ||
| clearTimer() | ||
| const name = generateBoxName() | ||
| setIsGenerating(true) | ||
| const start = Date.now() | ||
| setDisplay(scrambleFrame(name, 0)) | ||
| timer.current = setInterval(() => { | ||
| const progress = Math.min(1, (Date.now() - start) / REVEAL_MS) | ||
| setDisplay(scrambleFrame(name, progress)) | ||
| if (progress >= 1) { | ||
| clearTimer() | ||
| setIsGenerating(false) | ||
| onNameRef.current(name) | ||
| } | ||
| }, FRAME_MS) | ||
| }, []) | ||
|
|
||
| const reset = useCallback(() => { | ||
| clearTimer() | ||
| setDisplay('') | ||
| setIsGenerating(false) | ||
| }, []) | ||
|
|
||
| useEffect(() => clearTimer, []) | ||
|
|
||
| return { display, isGenerating, generate, reset } | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| import { describe, expect, it } from 'vitest' | ||
|
|
||
| import { scrambleFrame } from './scramble' | ||
|
|
||
| describe('scrambleFrame', () => { | ||
| it('reveals the whole target once progress reaches 1', () => { | ||
| expect(scrambleFrame('cozy-otter', 1)).toBe('cozy-otter') | ||
| expect(scrambleFrame('cozy-otter', 5)).toBe('cozy-otter') | ||
| }) | ||
|
|
||
| it('locks a left-to-right prefix proportional to progress', () => { | ||
| // 10-char target, 0.5 progress -> first 5 chars revealed. | ||
| expect(scrambleFrame('cozy-otter', 0.5).slice(0, 5)).toBe('cozy-') | ||
| }) | ||
|
|
||
| it('keeps the target length and box-name charset while scrambling', () => { | ||
| const frame = scrambleFrame('cozy-otter', 0) | ||
| expect(frame).toHaveLength('cozy-otter'.length) | ||
| expect(frame).toMatch(/^[a-z-]+$/) | ||
| }) | ||
| }) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| /* | ||
| * Copyright 2025 Daytona Platforms Inc. | ||
| * Modified by BoxLite AI, 2025-2026 | ||
| * SPDX-License-Identifier: AGPL-3.0 | ||
| */ | ||
|
|
||
| // One frame of a left-to-right "decode" reveal, used by the create-box name | ||
| // field while a generated name locks in. The first `progress` fraction of | ||
| // characters are locked to `target`; the rest are random glyphs from the box-name | ||
| // alphabet. progress <= 0 → fully scrambled (same length); progress >= 1 → target. | ||
| const GLYPHS = 'abcdefghijklmnopqrstuvwxyz-' | ||
|
|
||
| export function scrambleFrame(target: string, progress: number): string { | ||
| const revealed = Math.max(0, Math.min(target.length, Math.floor(progress * target.length))) | ||
| let out = '' | ||
| for (let i = 0; i < target.length; i++) { | ||
| out += i < revealed ? target[i] : GLYPHS[Math.floor(Math.random() * GLYPHS.length)] | ||
| } | ||
| return out | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| { | ||
| "name": "@boxlite-ai/box-name", | ||
| "version": "0.0.0-dev", | ||
| "description": "Shared default box-name generator (word lists + generateBoxName)", | ||
| "private": true, | ||
| "main": "./src/index.ts", | ||
| "types": "./src/index.ts" | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| { | ||
| "name": "box-name", | ||
| "$schema": "../../node_modules/nx/schemas/project-schema.json", | ||
| "sourceRoot": "libs/box-name/src", | ||
| "projectType": "library", | ||
| "targets": {} | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,49 @@ | ||
| /* | ||
| * Copyright 2025 Daytona Platforms Inc. | ||
|
|
||
| * Modified by BoxLite AI, 2025-2026 | ||
| * SPDX-License-Identifier: AGPL-3.0 | ||
| */ | ||
|
|
||
| // Single source of truth for default box names, shared by the api (assigns a | ||
| // name when a create request has none) and the dashboard (pre-fills the same | ||
| // style of name in the create dialog). Keep it dependency-free: it is consumed | ||
| // as source on both sides. | ||
|
|
||
| export const BOX_NAME_ADJECTIVES = [ | ||
| 'agile', 'amber', 'astute', 'bold', 'bouncy', 'brave', 'breezy', 'brilliant', 'brisk', 'calm', | ||
| 'cheery', 'clever', 'cosmic', 'cozy', 'crimson', 'crisp', 'dapper', 'daring', 'darting', 'deft', | ||
| 'dreamy', 'dusky', 'eager', 'fierce', 'fluffy', 'fresh', 'gallant', 'gentle', 'gliding', 'glossy', | ||
| 'golden', 'hearty', 'hovering', 'hushed', 'indigo', 'intrepid', 'ivory', 'jade', 'jaunty', 'jolly', | ||
| 'jovial', 'keen', 'lively', 'lofty', 'lucid', 'lunar', 'mellow', 'mighty', 'mild', 'mystic', | ||
| 'neat', 'nebular', 'nimble', 'opal', 'perky', 'placid', 'plucky', 'polished', 'prismatic', 'quick', | ||
| 'radiant', 'savvy', 'serene', 'sharp', 'silver', 'sleek', 'snappy', 'snug', 'soaring', 'solar', | ||
| 'sparkly', 'starry', 'swift', 'tidy', 'tranquil', 'valiant', 'vibrant', 'vivid', 'witty', 'zippy', | ||
| ] as const | ||
|
|
||
| export const BOX_NAME_ANIMALS = [ | ||
| 'alpaca', 'badger', 'bat', 'bear', 'beaver', 'bee', 'beluga', 'bluebird', 'bluejay', 'bobcat', | ||
| 'bumblebee', 'bunny', 'butterfly', 'calf', 'canary', 'capybara', 'cardinal', 'cat', 'chameleon', 'chick', | ||
| 'chickadee', 'chinchilla', 'chipmunk', 'cockatiel', 'corgi', 'cottontail', 'crab', 'cub', 'deer', 'dolphin', | ||
| 'dove', 'dragonfly', 'duck', 'duckling', 'eagle', 'falcon', 'fawn', 'ferret', 'finch', 'firefly', | ||
| 'flamingo', 'fox', 'frog', 'gecko', 'goldfinch', 'goose', 'gosling', 'guppy', 'hamster', 'hare', | ||
| 'hawk', 'hedgehog', 'heron', 'hummingbird', 'joey', 'kangaroo', 'kit', 'kitten', 'koala', 'ladybug', | ||
| 'lamb', 'lemur', 'llama', 'lovebird', 'lynx', 'magpie', 'manatee', 'marmot', 'meerkat', 'mole', | ||
| 'mouse', 'narwhal', 'nightingale', 'ocelot', 'octopus', 'otter', 'owl', 'owlet', 'panda', 'parakeet', | ||
| 'parrot', 'peacock', 'pelican', 'penguin', 'piglet', 'platypus', 'pony', 'porpoise', 'possum', 'puffin', | ||
| 'pup', 'puppy', 'quokka', 'rabbit', 'raccoon', 'raven', 'robin', 'salamander', 'seahorse', 'seal', | ||
| 'sheep', 'sloth', 'snail', 'sparrow', 'squirrel', 'starfish', 'stingray', 'swallow', 'swan', 'tadpole', | ||
| 'tortoise', 'toucan', 'turtle', 'wallaby', 'walrus', 'whale', 'wolf', 'wombat', 'woodpecker', 'wren', | ||
| ] as const | ||
|
|
||
| function pick<T>(arr: readonly T[]): T { | ||
| return arr[Math.floor(Math.random() * arr.length)] | ||
| } | ||
|
|
||
| /** | ||
| * Generate a default box name like `cozy-otter`. Hyphen- (not underscore-) | ||
| * separated and all-lowercase, so the clean name is a valid DNS label in case | ||
| * box names ever become hostnames. | ||
| */ | ||
| export function generateBoxName(): string { | ||
| return `${pick(BOX_NAME_ADJECTIVES)}-${pick(BOX_NAME_ANIMALS)}` | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
When this hook mounts while the dialog is already open, React.StrictMode (the dashboard root is wrapped at
apps/dashboard/src/main.tsx:34) runs the effect cleanup immediately after the first setup. This cleanup clears the only interval created bygenerate()without settingisGeneratingback to false; the replayed open effect then hits thewasOpenRefguard inCreateBoxDialog.tsx:249and does not start a replacement timer, so the field stays read-only and the Create button remains disabled indefinitely for mounted-open dialogs/tests.Useful? React with 👍 / 👎.