Panele, przyciski i pola z moda
Mod jest pluginem z manifestem, plikiem hooks.json wskazującym kod oraz samym plikiem kodu. Możesz uruchomić Claude Code z katalogiem moda przez claude --plugin-dir ./hello-tabs, a następnie otworzyć panel z poziomu sesji. Panel jest paskiem bocznym obok transkryptu w szerokim terminalu pełnoekranowym albo obramowanym obszarem nad promptem w pozostałych przypadkach. Gdy otwartych jest kilka paneli, każdy dostaje kartę z tytułem.
Aby rysować wyłącznie w panelach, filtruj hook ui.render przez { component: 'Pane' } i sprawdzaj, czy e.requestId odpowiada identyfikatorowi otwartego panelu. Hook ui.render zwraca drzewo elementów, na przykład Box zawierający inne boxy, tekst i przyciski, i buduje je ponownie na podstawie stanu. Przycisk wykonuje callback onPress, który może zmienić zmienną i wywołać ponowne renderowanie przez $.ui.invalidate('ui.render'). Pole Input może wywołać onInput(value) przy każdej zmianie oraz onSubmit(value), gdy użytkownik naciśnie Enter.
Przykładowy mod rejestruje komendę podczas session.start, otwiera panel po jej uruchomieniu, a następnie rysuje jego zawartość w ui.render. Po zmianie stanu callback powinien wywołać ponowne rysowanie; Claude Code uruchomi wtedy hook ui.render ponownie, aby zbudować drzewo z nowymi wartościami. Wartość licznika można zapisać w $.store, który zachowuje dane między sesjami, a przy kolejnym uruchomieniu odczytać ją w session.start. Przykład notatek zapisuje listę, ale jej nie wczytuje; aby odtworzyć ją w następnej sesji, trzeba odczytać dane w hooku session.start.
W rozszerzeniu VS Code przyciski nie mają skrótów klawiszowych, więc użytkownik klika przycisk albo naciska Enter, gdy ma on fokus. Przesłanie pola Input samo nie rozpoczyna tury; stanie się tak tylko wtedy, gdy callback wywoła $.prompt.submit. Jeśli panel otwierany samoczynnie czeka na szerszy terminal, pojawia się dopiero przy szerokości co najmniej 144 kolumn, a po wcześniejszym ręcznym otwarciu wystarcza 110 kolumn.
claude --plugin-dir ./hello-tabs
Zastosowanie w praktyce
Użyj panelu z kartami, gdy chcesz rozdzielić widoki interfejsu, na przykład pokazać tekst na jednej karcie, a licznik i przycisk na drugiej. Pole tekstowe z listą sprawdzi się w panelu do dodawania notatek Enterem i usuwania ich osobnym przyciskiem w każdym wierszu. Takie interfejsy pasują do danych, które mają przetrwać restart, jeśli zapiszesz je w $.store i odczytasz w session.start.
value, jeśli chcesz zachować tekst wpisywany przez użytkownika podczas ponownego renderowania.