Tampilan terbaru mengikuti referensi kantor hangat: kayu terang, lantai parket, tanaman berdaun, kursi berbantalan dan sofa sage. Avatar chibi memakai kepala oval, rambut bervolume, wajah sederhana, badan membulat serta rig animasi yang sama. Panel putih gading memakai aksen hijau tua. Referensi gambar menjadi arahan gaya, bukan jaminan kesamaan render. Catatan gaya maket/soft block di bawah adalah riwayat perkembangan.
Seluruh teks antarmuka memakai bahasa Inggris.
Maket kantor empat lantai dengan 13 anggota tim, ruang kerja terbuka, dan pengelolaan tugas lokal. Nama dan peran mengikuti daftar pengguna. Denah, furnitur, dan figur orang adalah interpretasi ilustratif, bukan pengukuran atau potret asli.
Tampilannya meniru maket arsitek dari karton: warna krem, garis tinta di tepi benda, satu aksen merah bata. Avatar bergaya balok seperti Roblox, dengan kepala kubus, badan kotak, lengan dan kaki bersendi, serta wajah sederhana. Tiap anggota memakai varian perempuan berambut panjang atau varian laki-laki berambut pendek, sesuai daftar tim. Semua tetap ilustratif, bukan potret rupa asli. Animasi bekerja, ngobrol, minum, menelepon, dan rutinitas lain tetap berjalan.
Label, pemilih tim, detail, log, dan tugas menampilkan inisial anggota. Identitas penyimpanan tetap memakai nama lengkap agar tugas serta pilihan musholla yang sudah disimpan tetap cocok.
- 01: barber, kursi dan cermin, area tunggu, parkiran mobil dan motor.
- 02: dapur, kompor, bak cuci, kulkas, dan dua meja makan bersama.
- 03: ruang kerja terbuka dengan empat kelompok meja di atas karpet masing-masing. Papan ide memisahkan Leadership dan Marketing & Business, rak rendah memisahkan Engineering & Design dan Customer Service. Ada ruang rapat kaca, dua phone booth, ruang pantry & lounge berdinding kaca, musholla, lampu gantung, dan jendela.
- 04: rooftop garden mengikuti referensi keempat: lantai kayu, lounge di bawah pergola, meja bersama dengan kursi sage, coffee bar, planter di tepi, dan lentera hangat. Meja biliar tetap tersedia. Tim memilih tempat secara acak, termasuk sofa, meja, biliar, dan coffee bar; akses tangga tetap di kiri.
- View whole building: keempat lantai terlihat dengan tangga dua bentang di sisi kiri yang menyambungkan tiap lantai. Klik salah satu lantai untuk masuk. Di tampilan ini keempat lantai tersusun rapat seperti gedung sungguhan: lantai 1 sampai 3 berdinding kaca, tangga ada di menara kaca di sisi kiri, dan sisi parkir lantai 1 dibiarkan terbuka untuk keluar-masuk kendaraan, dengan jalan masuk ke jalan raya. Isi lantai tetap terlihat menembus kaca; klik kaca suatu lantai untuk masuk ke lantai itu. Perpindahan antara satu lantai dan seluruh gedung memakai animasi kamera sekitar 1,4 detik: saat keluar, lantai-lantai lain meluncur masuk menyusun gedung; saat masuk, lantai lain bergeser menjauh. Animasi dilewati bila sistem meminta gerakan dikurangi, dan berhenti seketika bila layar disentuh atau diseret. Tampilan ini juga menampilkan alas kota bundar dengan jalan, pohon, gedung-gedung lain (yang dekat dibuat rendah agar kantor tidak tertutup), awan yang bergerak pelan di kejauhan, dan burung yang terbang berputar. Saat satu lantai dipilih, yang tampil hanya lantai itu; tangga luar dan orang yang sedang di tangga hanya terlihat di tampilan seluruh gedung.
Seret untuk memutar dan memiringkan kamera. Shift + seret atau klik kanan untuk menggeser, scroll atau cubit trackpad untuk zoom, geser dua jari ke samping untuk memutar. Di layar sentuh: satu jari memutar, dua jari mencubit dan menggeser. Keyboard: panah memutar/memiringkan, W A S D menggeser, Q/E zoom. Tombol +, −, Rotate, dan Reset tetap tersedia.
Kamera karakter: pilih anggota tim, lalu First-person view (sudut orang pertama) atau Follow from behind. Seret atau tombol panah untuk menoleh, scroll atau cubit untuk jarak kamera belakang. Kamera ikut berpindah lantai saat karakter naik atau turun tangga. Tekan Esc, Exit camera, atau Reset untuk kembali ke tampilan maket.
Ruang rapat, kedua phone booth, musholla, serta ruang pantry & lounge (berdinding kaca) punya pintu yang terbuka sendiri saat seseorang mendekat, lalu menutup kembali.
Di lantai 3 tim punya rutinitas sendiri: menghampiri rekan untuk ngobrol, ambil minum di pantry, rehat di lounge, menelepon di phone booth, membaca papan ide, rapat kecil berdua atau bertiga, atau berdiri meregangkan badan. Bubble bergantian menandai siapa yang bicara. Paling banyak empat orang meninggalkan meja sekaligus, dan karakter dengan tugas aktif lebih jarang beranjak. Routine: on/off menghentikan kegiatan baru; yang sedang berlangsung diselesaikan lalu kembali ke meja. Rutinitas mati secara bawaan bila sistem meminta gerakan dikurangi.
Office log mencatat kegiatan simulasi dan perubahan status tugas, terbaru di atas. Isinya kejadian simulasi, bukan pesan dari AI. Di layar kecil log dibuka lewat tombol Log.
Prayer time mengantar anggota yang sudah dicentang Join at prayer time (di panel detail karakter) ke musholla. Tidak ada yang dicentang secara bawaan, dan tidak ada yang dikirim otomatis. Pilihan disimpan di browser ini. Musholla memuat delapan sajadah.
Lunch, To the rooftop, dan Back to work memindahkan tim melalui jalur tangga 3D yang terlihat. Kamera dan lantai yang sedang dilihat tidak berubah saat perintah aktivitas diberikan, termasuk Prayer time. Dari tampilan seluruh gedung, perjalanan dapat diamati tanpa pindah tampilan. Jika tujuan berubah saat di tangga, karakter mencapai bordes berikutnya sebelum menuju tujuan baru. Pause menghentikan perjalanan di posisi saat ini. Animasi tidak menyelesaikan tugas.
Music memutar instrumental santai sintetis (chord lembut, bass, dan melodi pada 72 BPM), dibuat melalui Web Audio tanpa file atau layanan audio eksternal. Klik lagi untuk menghentikannya. Slider Vol. menyimpan volume di browser. Musik selalu mati saat halaman baru dimuat; perlu klik pengguna untuk mulai. Jeda simulasi tidak menghentikan musik.
Jalankan dari direktori proyek:
python3 -m http.server 4173 --bind 127.0.0.1 --directory publicBuka http://127.0.0.1:4173. Internet diperlukan untuk memuat Three.js dari CDN dan font Archivo serta IBM Plex Mono dari Google Fonts.
- Klik Tasks di bagian atas atau pilih karakter lalu View / assign tasks.
- Isi pekerjaan, penanggung jawab, dan instruksi opsional. Tugas masuk antrean.
- Klik Start task. Satu karakter hanya dapat memiliki satu tugas aktif. Karakter kembali ke mejanya di lantai 3.
- Isi hasil pekerjaan, lalu klik Save result & finish. Waktu simulasi tidak menyelesaikan tugas secara otomatis.
- Gunakan filter status atau penanggung jawab untuk mencari tugas. Show character menutup panel dan membuka lantai tempat karakter berada.
- Klik Export tasks untuk mengunduh salinan JSON. Impor belum tersedia.
Tugas disimpan dalam localStorage untuk alamat browser ini. Tidak ada sinkronisasi antarperangkat. Menghapus data situs juga menghapus tugas. Jika penyimpanan gagal, perubahan tidak diterapkan; data rusak tidak ditimpa secara otomatis.
Tugas dengan nama karakter prototipe lama tetap disimpan dan dapat dipindahkan ke anggota tim baru. Tugas aktif yang dipindahkan kembali ke antrean; hasil tugas selesai tetap dipertahankan.
Dengan server, tugas disimpan di data/tasks.json dan anggota yang tersambung ke agen AI mengerjakan tugasnya sendiri. Saat ini Social Media Specialist dan Customer Service; daftarnya ada di server/agents.js. Anggota lain tetap simulasi dengan status yang diubah manual.
cp .env.example .env # isi ANTHROPIC_API_KEY dari console.anthropic.com → API Keys
npm start # atau: node server/server.js (Node 22+)Buka http://127.0.0.1:3000.
- Tugas untuk anggota yang tersambung ke agen AI berjalan sendiri: Queued → In progress → Needs review. Baca hasil lalu pilih Approve & finish, atau isi Revision comments dan klik Request revision. Revisi kembali ke antrean; draf sebelumnya tersimpan di Draft history. Agen tidak memposting apa pun.
- Tanpa
ANTHROPIC_API_KEY, server berjalan dalam dry run: hasilnya teks contoh berlabel jelas, bukan output AI. Label nama anggota yang tersambung ke agen AI memiliki titik hijau dan panel detailnya menampilkan mode yang dipakai. - Jika Claude gagal (koneksi, key salah, saldo habis), tugas kembali ke antrean dengan pesan error dan tombol Try again.
- Pada kunjungan pertama ke server yang masih kosong, tugas yang tersimpan di browser dipindahkan ke server.
- Server belum memiliki login, sehingga hanya mendengarkan di 127.0.0.1 (laptop ini). Jangan dibuka ke jaringan sebelum ada autentikasi.
.envdandata/tidak masuk git.- Tanpa server (misalnya
python3 -m http.serveratau Live Server), aplikasi tetap berjalan seperti sebelumnya dengan localStorage.
Tugas terlihat langsung di kantor:
- Balon ucapan: karakter berkata "On it!" saat tugasnya dimulai dan "Done!" saat selesai. Agen AI menampilkan "Drafting…" selama bekerja.
- Task board di lantai 3 (dulu idea board, menghadap depan) menampilkan hingga lima tugas terbuka dengan inisial dan statusnya.
- Ringkasan di atas Office log: jumlah orang yang sedang mengerjakan tugas, yang bebas, dan tugas selesai hari ini.
Ketiganya juga berjalan tanpa server (tugas dari localStorage).
Model bawaan adalah claude-sonnet-5-5; ganti dengan ANTHROPIC_MODEL di .env. tests/server.cjs menguji alur dry run dari awal sampai akhir, tugas manual, penjaga API, persistensi, dan jalur error agen; tes ini menyalakan servernya sendiri.
public/index.html: struktur halaman dan panel tugas.public/office.js: empat lantai 3D, data tim, pergerakan, kamera, dan integrasi tugas.public/office.css: navigasi lantai, panel anggota, dan kontrol responsif.public/tasks.js: tugas, validasi, penyimpanan, filter, dan ekspor.public/tasks.css: panel tugas responsif, fokus keyboard, dan gaya formulir.public/music.js: komposisi instrumental, kontrol putar/mati, dan volume.server/server.js: server lokal (file statis + API tugas) dan pekerja agen AI.server/agents.js: anggota yang tersambung ke agen AI beserta instruksinya.
tests/avatar-stairs.cjs memeriksa varian avatar, inisial, kompatibilitas tugas, posisi 3D saat naik/turun tangga, jeda, perubahan tujuan, kamera yang tetap, musik, volume tersimpan, serta layout 375/768/1440px. Jalankan dengan node tests/avatar-stairs.cjs; konfigurasi Playwright sama seperti tes di bawah. OFFICE_URL dapat digunakan untuk alamat server selain port 4173.
tests/office.cjs menguji jumlah tim, pergantian lantai, klik lantai dari tampilan gedung, kamera karakter (mata, belakang, ikut ke lantai lain, Esc), pintu otomatis, orbit/geser/zoom kamera, rutinitas otomatis (meninggalkan meja, ngobrol, batas empat orang), log kantor, musholla dengan pilihan per orang, pilihan karakter, tugas, perjalanan makan/rooftop/kembali, tampilan responsif, dan pemindahan tugas lama. Jalankan server lokal terlebih dahulu, kemudian node tests/office.cjs dengan Playwright dan Chromium tersedia. Jika Playwright terpasang di luar proyek, set PLAYWRIGHT_MODULE ke direktori modul tersebut. Tambahkan --visual untuk hanya memeriksa lantai dan mengambil tangkapan layar. Browser pengujian memakai konteks terpisah dari data pengguna.
Select an avatar or initials in Team member. The detail sheet shows Active task, its instructions, and View / assign tasks. A brick-red underline marks an avatar with an active task; its accessible label and tooltip include the task title. The task remains visible while the character travels or takes a break. Completing it or returning it to the queue removes the marker.
Under Send instructions to, choose the selected person, their division, or Choose people… for a custom group. Meet together, Lunch, Rooftop, and Back to work apply only to that selection and preserve the current camera. The footer still commands the whole team. Meeting places are reserved before anyone moves; an invitation that exceeds the available six seats is rejected without moving a partial group. Explicit meetings last until participants receive another command, such as Back to work. Tasks remain manually managed.
tests/member-commands.cjs covers selection scope, room capacity, empty selection, meeting arrival, camera preservation, active-task display and responsive detail panels. Use the same Playwright setup as the other tests.
Heads, torsos, limbs, hair and shoes now use rounded block geometry shared between characters. Joint poses blend over time instead of snapping between walking, sitting and activities. Small weight shifts, breathing, alternating typing/mouse poses and head turns vary by person. Characters slow down near their final destination. Barber characters share the rounded shapes and pose blending. Gender assignments, initials and task identities are unchanged.
tests/soft-avatar.cjs exercises character cameras, stairs, pause and arrival at lunch, with screenshots of the new figures. tests/member-commands.cjs remains the regression check for instructions and active tasks.
View whole building now uses a closer camera, navy panels, warm floor lights and a muted dusk sky. Individual floors keep the warm daylight interior. Navigation thumbnails are captured from the actual 3D floors at startup. Counts show team members currently on each floor, excluding people on the stairs and barber visitors; they are not online-presence indicators. Mobile navigation uses compact floor labels and counts instead of thumbnails. No analytics or account controls are implied.
tests/building-view.cjs checks thumbnail loading, counts, clicking a floor through the facade, theme switching and 375/768/1440px layouts.
Hasil manual dan komentar revisi disimpan sementara di sessionStorage tab browser, sehingga pembaruan daftar serta reload tidak menghapus tulisan yang belum dikirim. Komentar revisi terikat ke versi draf. Persetujuan memakai versi tugas agar tampilan lama tidak menyetujui draf yang sudah berubah.
Worker memakai identitas eksekusi: hasil atau error terlambat tidak mengubah tugas yang sudah dialihkan. API memvalidasi penanggung jawab dan batas satu tugas aktif per orang. Jalankan ulang server setelah memperbarui kode backend.
tests/server.cjs memeriksa siklus draf, revisi, persetujuan, dan pemulihan tulisan setelah polling/reload dengan dry-run. tests/worker-reliability.cjs memakai provider lokal tiruan untuk memeriksa error terlambat setelah pengalihan tugas. Pengujian ini tidak memanggil AI berbayar.